html_JavaScript节点操作

元素节点

执行结果：

nodeName: 标签的名称
nodeType: 节点的类型 1为标签节点
nodeValue: 当是元素节点的时候，永远为null

属性节点

执行结果：

nodeName: 属性名称
nodeType: 节点的类型 2为属性节点
nodeValue: 属性的值

模拟文档树结构：

执行结果：

节点层级：

第一个和最后一个子节点

执行结果：

注意：firstElementChild和lastElementChild都有兼容性的问题,IE9以后才拥有这功能.当获取不到的时候返回null

下一个或上一个兄弟节点

执行结果：

EG1:动态创建列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态生成列表</title>
</head>
<body>
	<div id="box">
		<p>1112</p>
	</div>
	<script>
	var a  = [
		{"key":"键盘","qre":"850201"},
		{"key":"键盘鼠标套装","qre":"83523"},
		{"key":"键盘机械","qre":"157405"},
		{"key":"键盘膜","qre":"575939"},
		{"key":"键盘自营","qre":"5327"},
		{"key":"键盘无线","qre":"92861"},
		{"key":"键盘 无声静音","qre":"2257"},
		{"key":"键盘垫","qre":"307593"},
		{"key":"键盘游戏键盘","qre":"296423"},
		{"key":"键盘女生","qre":"21404"},
		{"key":"键盘托","qre":"191725"},
		{"key":"键盘78键","qre":"2633"},
		{"key":"键盘 朋克 机械","qre":"12211"}
	]
	//动态创建列表
	var box = document.getElementById("box");
	//创建ul
	//在内存中创建了一个DOM对象
	var ul = document.createElement("ul");
	//把ul对象添加到box中
	box.appendChild(ul);

	//遍历数组，生成li
	var i=0;
	len = a.length;
	console.log(len);
	for(;i<len;i++){
		//创建li
		//在内村中创建一个孤立的DOM元素
		var li = document.createElement("li");
		//设置li中的内容
		li.innerHTML=a[i].key;
		//把li元素添加到ul中(添加到DOM元素)
		ul.appendChild(li);

		 //鼠标放到li上高亮显示
		 li.onmouseover = function(){
		 	// this.style.backgroundColor="#ccc";
		 	this.style.color="red";
		 };
		 li.onmouseout = function(){
		 	// this.style.backgroundColor="";
		 	this.style.color="black";
		 };
			
	}
	</script>
</body>
</html>

执行结果：

html_JavaScript节点操作

猜你喜欢