JS基础-DOM Node节点-优快云博客

本文介绍了如何使用JavaScript操作DOM节点，包括节点的增删改查及样式管理，并提供了选项选择和二级联动等实用示例。

2019独角兽企业重金招聘Python工程师标准>>>

DOM 节点

节点(Node)	释义	对象
文档节点	整个文档	Document 对象
元素节点	每个HTML元素	Eelement 对象
文本节点	HTML元素内的文本	Text 对象
属性节点	每个HTML的属性	Attribute 对象
注释节点	文档的注释内容	Comment 对象

Attributes属性节点

属性	释义
nodeType	节点类型
nodeValue	节点值
nodeName	节点名称
innerHTML	节点(元素)的文本值

导航属性

属性	释义
parentNode	节点(元素)的父节点
firstChild	节点下第一个子元素
lastChild	节点下最后一个子元素
childNodes	节点(元素)的子节点

Node标签的增删改查

方法

方法	描述
createElement(name)	创建元素
appendChild()	添加元素
removeChild()	删除元素

添加标签节点(createElement)和删除节点标签(removeChild)都是在父级节点上操作的

综合示例

<html>
 <head>
  <style>
		.div1 { width: 300px;height: 100%;color: #000;float: left;text-align: center;background-color: #FFCCCC;}
		div p { background-color: #fff;}
	</style>
 </head>
 <body>
  <div class="div1">
   <h3>Node的增删改查</h3>
   <button onclick="add()">添加标签</button>
   <button onclick="del()">删除标签</button>
   <button onclick="replace()">替换标签</button>
  </div>
  <script>
	var div_1 = document.getElementsByClassName("div1")[0];			//定位标签元素父级

	//添加节点标签函数
	function add(){
		var ele = document.createElement("p");						//定义创建标签元素
		ele.innerHTML="新增的 P 标签";								//添加标签元素内容
		div_1.appendChild(ele);										//定位标签中添加元素
					}

	//删除节点标签函数
	function del(){
		var div_p = div_1.getElementsByTagName("p")[0];				//定义删除的标签元素
		div_1.removeChild(div_p);									//定位标签中删除元素
					}

	//修改节点标签函数
	function replace(){
		var new_title = document.createElement("h2");				//定义创建要修改后的标签
		new_title.innerHTML="替换后的新标题"							//添加标签元素内容
		var old_title = document.getElementsByTagName("h3")[0];		//定义要修改的标签
		div_1.replaceChild(new_title,old_title);				    //进行调遣替换
				   }
</script>
 </body>
</html>

Node样式的增删改查

方法

方法	描述
[ele].classList.add()	添加样式
[ele].classList.remove()	删除样式
[ele].style.[ClassName]	修改样式

添加标签节点(classList.add)和删除节点标签(classList.remove)都是在当前节点上操作的

综合示例

<!DOCTYPE html>
<html>
 <head> 
  <style>
		.sty_1 { height: 200px;width: 200px;background-color: #FFCCCC;}
		.sty_2 { margin: auto;color: #FFF;line-height: 200px;text-align: center;}
	</style> 
 </head> 
 <body> 
  <div class="sty_1">
   this is test !!!
  </div> 
  <button onclick="add()">添加样式</button> 
  <button onclick="del()">删除样式</button> 
  <button onclick="cha()">修改样式</button> 
  <script>
	i = 0;
	var div_1 = document.getElementsByClassName("sty_1")[0];
	function add(){
			div_1.classList.add("sty_2");						//添加样式
	}
	function del(){
			div_1.classList.remove("sty_2")						//删除样式
	}
	function cha(){
			var val = ["#CCCCFF","#FFCC99","#99CCFF"];
			if (i < val.length -1){
				i++;
				div_1.style.backgroundColor=val[i];				//修改样式
			}
			else{
				i = 0;
				div_1.style.backgroundColor=val[i];				//修改样式
			}
	}
</script>  
 </body>
</html>

选项选择

<!DOCTYPE html>
<html>
<body>
	
<button onclick="SelectALL()">全选</button>
<button onclick="Cancel()">取消</button>
<button onclick="Reverse()">反选</button>

<div>
	<input type="checkbox"> 文本
	<input type="checkbox"> 文本
	<input type="checkbox"> 文本
</div>

<script>
	var inputs = document.getElementsByTagName("input");		//定义标签元素数组

	function SelectALL()
	{
		for (var i=0; i<inputs.length;i++)						//for循环数组
		{

			var input=inputs[i];								//循环位置对象
			input.checked=true;									//标记 true 状态
		}
	}

	function Cancel()
	{
		for (var i=0; i<inputs.length;i++)						//for循环数组
		{
			var input=inputs[i];								//循环位置对象
			input.checked=false;								//标记 false 状态
		}
	}
	function Reverse()
	{
		for (var i=0; i<inputs.length;i++)						//for循环数组
		{
			var input=inputs[i];								//循环位置对象
			input.checked=!input.checked;						//状态取反
		}
	}
</script>
</body>
</html>

二级联动

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select id="provinces">
	<option>请选择省份</option>
</select>
<select id="citys">
	<option>请选择城市</option>
</select>

<script>
	data = {"上海市":["徐汇区","宝山区","浦东新区"],"北京市":["朝阳区","丰台区","昌平区"]}
	
	var pro_ele = document.getElementById("provinces");
	var city_ele = document.getElementById("citys");

	for (var i in data){									//遍历省份
		var ele = document.createElement("option");			//定义创建标签元素
		ele.innerHTML=i;									//添加标签元素内容
		pro_ele.appendChild(ele);							//定位标签中添加元素
	}

	pro_ele.onchange=function(){							//域的内容被改变触发事件
		var city_label = this.options[this.selectedIndex];	//通过 this 索引拿到当前选中项的省份标签
		var citys = data[city_label.innerHTML];				//通过省份标签拿到当前选中省份的城市

		city_ele.options.length=1;							//options 只保留第一个，避免不同省份城市累加

		for (var i=0;i<citys.length;i++){					//遍历当前选中省份所有的城市
			var ele = document.createElement("option");		//定义创建标签元素
			ele.innerHTML=citys[i];							//添加标签元素内容
			city_ele.appendChild(ele);						//定位标签中添加元素
		}
	}
</script>
</body>
</html>

转载于:https://my.oschina.net/zhaojunhui/blog/1860580