欢迎光临
我的个人博客网站

DOM节点


语雀链接

(1)文档对象模型DOM

  • 全称:Document Object Model
  • 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)

DOM节点DOM节点

  • HTML文档是由节点构成的集合,常见的三种DOM节点
    • 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。
    • 文本节点:向用户展示的内容,如<li>…</li>中的JavaScript、DOM、CSS等文本。
    • 属性节点:元素属性,如<a>标签的链接属性href=”http://www.imooc.com“。

DOM节点

(2)document根节点

  • 相关方法都封装在document对象中,document是整个文档的根节点
  • 输出内容(document.write)
  • 输出HTML标签
var mystr="hello"; document.write(mystr+"<br>");//输出hello后,输出一个换行符 
  • 输出空格
document.write("   1      2                3  ");//只会有一个空格 结果: 1 2 3 
  •  
document.write("aa"+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+"的忠实粉丝!"); 

(3)节点的访问

getElementById()

  • id是唯一的
  • 如果存在多个相同的id,则返回第一个
var mychar= document.getElementById('id'); 

getElementsByName()

  • 因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素
var mynode= document.getElementsByName('myt') console.log(mynode.length) console.log(mynode[0])  <input name="myt" type="text" value="1"> <input name="myt" type="text" value="2"> <input name="myt" type="text" value="3"> <input name="myt" type="text" value="4"> <input name="myt" type="text" value="5"> <input name="myt" type="text" value="6"> 

getElementsByClassName

		<div class="con">11</div> 		<div class="con">22</div> 		<div class="con">33</div> 		<script type="text/javascript"> 			 			var divs = document.getElementsByClassName('con') 			console.log(divs.length) 			 		</script> 

getElementsByTagName()

  • 返回带有指定标签名的节点对象的集合

querySelector

  • 只得到符合条件的第一个元素
		<div id="container">	 			<p class="name">111</p> 			<p class="name">222</p> 			<p class="name">333</p> 		</div> 		 		<script type="text/javascript">		 				var item = document.querySelector('#container .name') 				// <p class="name">111</p> 				console.log(item) 		</script> 

querySelectorAll

  • 符合条件的所有元素
		<div id="container">	 			<p class="name">111</p> 			<p class="name">222</p> 			<p class="name">333</p> 		</div>  	var item = document.querySelectorAll('#container .name') 	// 3 	console.log(item.length) 	// <p class="name">111</p> 	console.log(item[0]) 

childNodes

  • IE浏览器会忽略节点之间生成的空白文本节点,而其它浏览器不会。
  • 我们可以通过检测节点类型过滤子节点
		<div> 			<p id="name">javascript</p> 			<div>jQuery</div> 			<h5>PHP</h5> 		</div> 		 		<script type="text/javascript"> 			var aa = document.getElementsByTagName('div')[0].childNodes;       // 7 			console.log(aa.length) 			// #text, ,3              文本节点(空白) 			// p, null, 1   		      元素节点 			// #text, , 3		     			文本节点(空白) 			// div, null, 1			 			元素节点 			// #text, ,3			 				文本节点(空白) 			// H5, null, 1			 			元素节点 			// #text, , 3			 				文本节点(空白) 			for (var i = 0; i < aa.length; i++) { 				console.log(aa[i].nodeName + ',' + aa[i].nodeValue + ',' + aa[i].nodeType); 			} 		</script> 

children

  • children可以避免文本节点,只考虑元素节点
		<div> 			<p id="name">javascript</p> 			<div>jQuery</div> 			<h5>PHP</h5> 		</div>  		<script type="text/javascript"> 			var aa = document.getElementsByTagName('div')[0].children; 			// p, null, 1   		      元素节点 			// div, null, 1			 			元素节点 			// H5, null, 1			 			元素节点 			for (var i = 0; i < aa.length; i++) { 				console.log(aa[i].nodeName + ',' + aa[i].nodeValue + ',' + aa[i].nodeType); 			} 		</script> 

firstChild

  • 该属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL
  • node.firstChild
  • 说明:与elementNode.childNodes[0]是同样的效果。

firstElementChild

  • 可以避免文本节点,只考虑元素节点

lastChild

  • lastChild 最后一个子节点
  • 该属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回 NULL
  • node.lastChild
  • 说明:与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

lastElementChild

  • 可以避免文本节点,只考虑元素节点

parentNode

  • 获取指定节点的父节点
		<div id="text"> 			<p id="con"> parentNode 获取指点节点的父节点</p> 		</div> 		 		<script type="text/javascript"> 			var mynode = document.getElementById("con"); 			// DIV 			console.log(mynode.parentNode.nodeName) 		</script> 

nextSibling

nextElementSibling

previousSibling

previousElementSibling

  • 访问兄弟节点nextSibling previousSibling
  • nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。 如果无此节点,则该属性返回 null
  • previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。如果无此节点,则该属性返回 null。
  • 注意事项
    • 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略
    • 解决问题方法:判断节点nodeType是否为1, 如是不为元素节点,跳过。
  • nextElementSibling可以避免文本节点,只考虑元素节点
  • previousElementSibling可以避免文本节点,只考虑元素节点
    function get_nextSibling(n){         var x=n.nextSibling;         while (x && x.nodeType!=1){             x=x.nextSibling;         }         return x;     } 

(4)节点类型

  • 元素节点、属性节点、文本节点都有三个重要属性
    • 节点名 nodeName
    • 节点值 nodeValue
    • 节点类型 nodeType(元素1、属性2、文本3、注释8、文档9)
      DOM节点
		<div> 			<p id="name">javascript</p> 			<div>jQuery</div> 			<h5>PHP</h5> 		</div> 		 		<script type="text/javascript"> 			var aa = document.getElementsByTagName('div')[0].childNodes;       // 7 			console.log(aa.length) 			// #text, ,3              文本节点(空白) 			// p, null, 1   		      元素节点 			// #text, , 3		     			文本节点(空白) 			// div, null, 1			 			元素节点 			// #text, ,3			 				文本节点(空白) 			// H5, null, 1			 			元素节点 			// #text, , 3			 				文本节点(空白) 			for (var i = 0; i < aa.length; i++) { 				console.log(aa[i].nodeName + ',' + aa[i].nodeValue + ',' + aa[i].nodeType); 			} 		</script> 
  • 属性节点
			for (var i = 0; i < aa.length; i++) { 				 				if(aa[i].nodeName == 'P'){ 					 					// 子节点 					var ps = aa[i].childNodes 					// 1 					console.log(ps.length) 					// #text,javascript,3 					for(let j = 0; j < ps.length; j++){ 						console.log(ps[j].nodeName + ',' + ps[j].nodeValue + ',' + ps[j].nodeType) 					} 					 					var attrs = aa[i].attributes 					// 1 					console.log(attrs.length) 					// id,name,2 					for(let j = 0; j < attrs.length; j++){ 						console.log(attrs[j].nodeName + ',' + attrs[j].nodeValue + ',' + attrs[j].nodeType) 					} 					 				} 			} 
  • 其他节点
			// 文档节点 			// #document undefined 9 			console.log(document.nodeName,document.nodeValue,document.nodeType) 			 			for (var i = 0; i < document.childNodes.length; i++) { 				var item = document.childNodes[i] 				// html undefined 10  文档声明节点 				 				// HTML undefined 1 html元素节点 				console.log(item.nodeName,item.nodeValue,item.nodeType) 			} 			 			// BODY undefined 1  BODY节点 			console.log(document.body.nodeName,document.body.nodeValue,document.body.nodeType) 			// HEAD undefined 1  HEAD节点 			console.log(document.head.nodeName,document.head.nodeValue,document.head.nodeType) 

(5)节点属性

innerHTML

  • 设置元素的文本内容,支持HTML各类标签

innerText

  • 纯文本方式设置元素的文本内容
		<div id="div1"> 			<span>sss</span> 		</div>  		<script type="text/javascript"> 			var mychar = document.getElementById('div1'); 			 			// 网页上显示dddd 			mychar.innerHTML = '<span>dddd</span>' 			// <span>dddd</span> 			console.log(mychar.innerHTML); 			 			// 网页上显示<span>dddd</span> 			mychar.innerText = '<span>dddd</span>' 			// <span>dddd</span> 			console.log(mychar.innerText); 			 		</script> 

style

  • backgroudColor
  • width
  • height
  • color
  • font
  • fontFamily
  • display
    • none:该元素不会被显示
    • block:该元素会被显示为块级元素
				    mychar.style.color='red'; 				    mychar.style.fontSize='20'; 				    mychar.style.backgroundColor='blue'; 				    mychar.style.height='30px'; 				    mychar.style.width='250px'; 						mychar.style.display = 'block'; 

className

  • 设置元素的类选择器
  • className也可以在attributes数组中找到
var p1 = document.getElementById("p1"); p1.className="one"; 

getAttribute

  • 通过元素节点的属性名称获取属性的值

elementNode.getAttribute(name)

setAttribute

  • setAttribute() 方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值

elementNode.setAttribute(name,value)

removeAttribute

object.removeAttribute(“style”);

attributes

  • 返回该节点的所有属性,是一个数组
		<div id="div1" class="top" style="width: 100px;"> 			<span>sss</span> 		</div>  		<script type="text/javascript"> 			var mychar = document.getElementById('div1'); 			 			var attrs = mychar.attributes 			// 3 			console.log(attrs.length) 			// id 			// class 			// style 			for(let i = 0; i < attrs.length; i++){ 				console.log(attrs[i]) 			} 			 		</script> 

(6)节点操作

createElement()

  • createElement()方法可创建元素节点。此方法可返回一个 Element 对象
		<script type="text/javascript"> 			var body = document.body; 			var input = document.createElement("input"); 			input.type = "button"; 			input.value = "创建一个按钮"; 			body.appendChild(input); 		</script> 

appendChild()

  • 插入节点appendChild():在指定节点的最后一个子节点列表之后添加一个新的子节点。
  • ul添加一个li,内容为PHP
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body>  <ul id="test">   <li>JavaScript</li>   <li>HTML</li> </ul>   <script type="text/javascript">   var otest = document.getElementById("test");     var add = document.createElement('li');   add.innerHTML = "PHP";   otest.appendChild(add); </script>   </body> </html> 
  • 下面的例子会发现p在div2中了,div1中没有了
		<div id="div1"> 			<p id="p1">aaa</p> 		</div> 		 		<div id="div2"></div> 		 		<script type="text/javascript"> 			 			var div1 = document.getElementById('div1') 			var div2 = document.getElementById('div2') 			var p1 = document.getElementById('p1') 			 			div2.appendChild(p1) 			 		</script> 
  • appendChild不要重复添加

DOM节点  DOM节点

		<div id="div1"> 			<div id="div2">2222</div> 			 		</div>  		<script type="text/javascript"> 			 			var div1 = document.getElementById('div1') 			var div2 = document.getElementById('div2') 			 			var div3 = document.createElement('div'); 			div3.innerHTML = '3333'       // div3 div2并列 			div1.appendChild(div3);       // div3在div2里面,并且之前并列的div3不见了 			//div2.appendChild(div3); 		</script> 

insertBefore

  • insertBefore() 方法可在已有的子节点前插入一个新的子节点。
  • 语法:insertBefore(newnode,node);
    • newnode: 要插入的新节点。
    • node: 指定此节点前插入节点。
		<ul id="test"> 			<li>JavaScript</li> 			<li>HTML</li> 		</ul>  		<script type="text/javascript"> 			var otest = document.getElementById("test");  			var add = document.createElement('li'); 			add.innerHTML = "PHP"; 			otest.insertBefore(add, otest.childNodes[2]); 		</script> 

removeChild

  • 必须父节点调用
  • removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL
  • 注意: 把删除的子节点赋值给 x,这个子节点不在DOM树中,但是还存在内存中,可通过 x=null操作
		<div id="content"> 			<h1>html</h1> 			<h1>php</h1> 			<h1>javascript</h1> 			<h1>jquery</h1> 			<h1>java</h1> 		</div>  		<script type="text/javascript"> 			var content = document.getElementById("content"); 			for (var i = content.childNodes.length - 1; i >= 0; i--) { // 倒叙删除 				var childNode = content.childNodes[i]; 				content.removeChild(childNode); 			} 		</script>  		<button onclick="clearText()">清除节点内容</button> 

replaceChild

  • replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
    • 语法:node.replaceChild (newnode,oldnew )
    • 参数:
      • newnode : 必需,用于替换 oldnew 的对象
      • oldnew : 必需,被 newnode 替换的对象
  • b标签换成i
		<div> 			<b id="oldnode">JavaScript</b>是一个很常用的技术,为网页添加动态效果。 		</div> 		<a href="javascript:replaceMessage()"> 将加粗改为斜体</a>  		<script type="text/javascript"> 			function replaceMessage() { 				var oldnode = document.getElementById("oldnode"); 				var oldHTML = oldnode.innerHTML; 				var newnode = document.createElement("i"); 				oldnode.parentNode.replaceChild(newnode, oldnode); 				newnode.innerHTML = oldHTML; 			} 		</script> 

createTextNode()

  • 创建文本节点
<!DOCTYPE HTML> <html> 	<head> 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 		<title>无标题文档</title> 		<style type="text/css"> 			.message { 				width: 200px; 				height: 100px; 				background-color: #CCC; 			} 		</style> 	</head> 	<body> 		<script type="text/javascript"> 			var element = document.createElement("p"); 			element.className = "message"; 			var textNode = document.createTextNode("I love JavaScript!"); 			element.appendChild(textNode); 			document.body.appendChild(element); 		</script>  	</body> </html> 

cloneNode(true)

  • true:深度克隆,所有子节点会被克隆
  • false:只会克隆节点自身
  • 节点操作后,节点原位置会丢失
  • 下面的例子会发现p在div2中了,div1中没有了
		<div id="div1"> 			<p id="p1">aaa</p> 		</div> 		 		<div id="div2"></div> 		 		<script type="text/javascript"> 			 			var div1 = document.getElementById('div1') 			var div2 = document.getElementById('div2') 			var p1 = document.getElementById('p1') 			 			div2.appendChild(p1) 			 		</script> 
  • 克隆
		<div id="div1"> 			<p id="p1">aaa</p> 		</div> 		 		<div id="div2"></div> 		 		<script type="text/javascript"> 			 			var div1 = document.getElementById('div1') 			var div2 = document.getElementById('div2') 			var p1 = document.getElementById('p1') 			 			var p2 = p1.cloneNode(true); 			 			div2.appendChild(p2) 			 		</script> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » DOM节点
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏