JavaScript 温故而知新(八)DOM基础

文章目录

      • JavaScript的 DOM基础
        • DOM查找方法
          • ***document.getElementById("id"):***
          • ***document.getElementsByTagName("tag"):***
        • 设置元素样式
          • ***ele.style.styleName = styleValue***
        • DOM(innerHTML和className)
          • ***innerHTML***
          • ***className***
        • DOM属性获取与设置、删除
          • ***获取属性、自定义属性的getAttribute()***
          • ***设置属性 ele.setAttribute("attribute","value")***
          • ***删除属性 ele.removeAttribute("attribute")***

JavaScript的 DOM基础

DOM查找方法
document.getElementById(“id”):

语法:document.getElementById(“id”)
功能:返回对拥有指定ID的第一个对象的引用
返回值:DOM对象
说明:id为DOM元素上id属性的值

	<body>
		<div id="box" class="box">元素</div>
		<script>
			//获取id为box的这个元素
			var box = document.getElementById("box");
			console.log(box);
			//输出 
元素
</script> </body>
document.getElementsByTagName(“tag”):

语法:document.getElementsByTagName(" tag ")
功能:返回一个对所有tag标签引用的集合
返回值:数组
说明:tag为要获取的标签名称

	<body>
		<ul id="list1">
			<li>前端开发</li>
			<li>服务器端开发</li>
			<li>UI设计</li>
		</ul>
		<ol>
			<li>js原生</li>
			<li>js框架</li>
		</ol>
		<script>
			//获取页面中所有的li
			var lis = document.getElementsByTagName("li");
			console.log(lis.length);
			//输出5,返回的是数组,表示5个li
			
			//获取id为list1下的所有的li
			var lis2 = document.getElementById("list1").getElementsByTagName("li")
			console.log(lis2.length);
			//输出长度3
		</script>
	</body>
设置元素样式
ele.style.styleName = styleValue

语法:ele.style.styleName = styleValue
功能:设置ele元素的CSS样式
说明:
1、ele为要设置样式的DOM对象
2、styleName为要设置的样式名称(不能使用" - "连字符形式 font-size 使用驼峰命名形式fontSize)
3、styleValue为设置的样式值

	<body>
		<div id="box" class="box">元素</div>
		<ul id="list">
			<li>前端开发</li>
			<li>服务器端开发</li>
			<li>UI设计</li>
		</ul>	
		<script>	
			//设置id为box的这个元素的文字颜色
			var box = document.getElementById("box");
			box.style.color = "#f00";
			//属性是减号链接的复合形式时,必须要转换为驼峰形式
			box.style.fontWeight = "bold";
			
			var lis = document.getElementById("list").getElementsByTagName("li");
			//因为getElementsByTagName返回的是数组
			//遍历每一个li
			for (var i=0,len=lis.length; i<len; i++){
				console.log(lis[i]);
				//输出lis[0],等于
  • 前端开发
  • //输出lis[1],等于
  • 服务器端开发
  • //输出lis[2],等于
  • UI设计
  • lis[i].style.color = "#00f";//设置为蓝色 //设置li的背景颜色 if(i == 0){ lis[i].style.backgroundColor = "#ccc"; }else if(i == 1){ lis[i].style.backgroundColor = "#ff0"; }else if(i == 2){ lis[i].style.backgroundColor = "#0f0"; }else{//其他 lis[i].style.backgroundColor = "#333"; } } <script> </body>
    DOM(innerHTML和className)
    innerHTML

    1、语法:ele.innerHTML
    1、功能:返回ele元素开始和结束标签之间的HTML

    2、语法:ele.innerHTML = " html "
    2、功能:设置ele元素开始和结束标签之间的 HTML内容为html

    className

    1、语法:ele.className
    1、功能:返回ele元素的class属性

    2、语法:ele.className=" cls "
    2、功能:设置ele元素的class属性为cls

    	<body>
    		<div id="box" class="box">元素</div>
    		<ul id="list">
    			<li>前端开发</li>
    			<li class="on">服务器端开发</li>
    			<li>UI设计</li>
    		</ul>
    		<ol>
    			<li>js原生</li>
    			<li>js框架</li>
    		</ol>
    		<script>
    			var lis = document.getElementById("list").getElementsByTagName("li");
    			for(var i=0, len=lis.length; i<len; i++){
    				console.log(lis[i].innerHTML);
    				//输出li的HTML,包括li里的标签和文本
    					//前端开发
    					//服务器端开发
    					//UI设计
    				lis[i].innerHTML = lis[i].innerHTML + '程序';
    				//简写:lis[i].innerHTML += '程序';
    				//输出每个li文本后面都加上程序两个字
    					//前端开发程序
    					//服务器端开发程序
    					//UI设计程序
    				
    				//添加类current
    				lis[1].className = "current";
    				//说明:li本身有class="on",className动态添加class,是重新设置类,会替换元素本身的class
    			}
    			console.log(document.getElementById("box").className);
    			//输出box
    		</script>
    	</body>
    
    DOM属性获取与设置、删除
    获取属性、自定义属性的getAttribute()
    	<body>
    		<p id="text" class="text" align="center" data-type="title">文本</p>
    		<input id="user" type="text" name="user" value="user" validate="true">
    		<script>
    			var p = document.getElementById("text");
    			//除了获取class属性是className,其他是直接是html标签属性
    			console.log(p.className);
    			//输出text
    			console.log(p.align);
    			//输出center
    			//data-type是自定义属性,所以console.log(p.data-type)获取不了
    			console.log(p.getAttribute("data-type"));
    			//输出title
    			console.log(p.getAttribute("class"));
    			//等于p.className
    			
    			var user = document.getElementById("user");
    			//获取input自带的标签属性
    			console.log(user.type);//输出text
    			console.log(user.name);//输出user
    			console.log(user.value);//输出user
    			//获取input自定义属性
    			console.log(user.getAttribute("validate"));//输出true
    		</script>
    	</body>
    
    设置属性 ele.setAttribute(“attribute”,“value”)

    语法:ele.setAttribute(“attribute”,“value”)
    功能:在ele元素上设置属性
    说明:
    1、ele是要操作的dom对象
    2、attribute为要设置的属性名称
    3、value为设置的attribute属性的值
    注意:
    1、setAttribute方法必须要有两个参数
    2、如果value是字符串,需加引号
    3、setAttribute()有兼容性问题

    删除属性 ele.removeAttribute(“attribute”)

    语法:ele.removeAttribute(“attribute”)
    功能:删除ele上的attribute属性
    说明:
    1、ele是要操作的dom对象
    2、attribute为要删除的属性名称

    	<body>
    		<p id="text" class="text" align="center" data-type="title">文本</p>
    		<input id="user" type="text" name="user" value="user" validate="true">
    		<script>
    			var p = document.getElementById("text");
    			var user = document.getElementById("user");
    			//给p设置一个自定义属性data-color的属性
    			p.setAttribute("data-color","red");
    			//给input设置一个isRead的属性
    			user.setAttribute("isRead","false");
    			//删除p上的align属性
    			p.removeAttribute("align");
    		</script>
    	</body>
    

    你可能感兴趣的:(JS,基础)