经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
DOM节点
来源：cnblogs　　作者：代码集中营　　时间：2020/11/23 11:56:23　　对本文有异议

语雀链接

（1）文档对象模型DOM

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

9CB7482B-9985-4F96-96C4-3909CA5B18A1.png0AB4ABD0-B941-47DA-87C9-0A65A772B3E5.png

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

2B456014-B2E0-4F2A-B6C9-A376EFCF4B54.png

（2）document根节点

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

（3）节点的访问

getElementById()

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

getElementsByName()

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

getElementsByClassName

  1. 		<div class="con">11</div>
  2. 		<div class="con">22</div>
  3. 		<div class="con">33</div>
  4. 		<script type="text/javascript">
  5. 			
  6. 			var divs = document.getElementsByClassName('con')
  7. 			console.log(divs.length)
  8. 			
  9. 		</script>

getElementsByTagName()

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

querySelector

  • 只得到符合条件的第一个元素
  1. 		<div id="container">	
  2. 			<p class="name">111</p>
  3. 			<p class="name">222</p>
  4. 			<p class="name">333</p>
  5. 		</div>
  6. 		
  7. 		<script type="text/javascript">		
  8. 				var item = document.querySelector('#container .name')
  9. 				// <p class="name">111</p>
  10. 				console.log(item)
  11. 		</script>

querySelectorAll

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

childNodes

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

children

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

firstChild

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

firstElementChild

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

lastChild

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

lastElementChild

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

parentNode

  • 获取指定节点的父节点
  1. 		<div id="text">
  2. 			<p id="con"> parentNode 获取指点节点的父节点</p>
  3. 		</div>
  4. 		
  5. 		<script type="text/javascript">
  6. 			var mynode = document.getElementById("con");
  7. 			// DIV
  8. 			console.log(mynode.parentNode.nodeName)
  9. 		</script>

nextSibling

nextElementSibling

previousSibling

previousElementSibling

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

（4）节点类型

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

（5）节点属性

innerHTML

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

innerText

  • 纯文本方式设置元素的文本内容
  1. 		<div id="div1">
  2. 			<span>sss</span>
  3. 		</div>
  5. 		<script type="text/javascript">
  6. 			var mychar = document.getElementById('div1');
  7. 			
  8. 			// 网页上显示dddd
  9. 			mychar.innerHTML = '<span>dddd</span>'
  10. 			// <span>dddd</span>
  11. 			console.log(mychar.innerHTML);
  12. 			
  13. 			// 网页上显示<span>dddd</span>
  14. 			mychar.innerText = '<span>dddd</span>'
  15. 			// <span>dddd</span>
  16. 			console.log(mychar.innerText);
  17. 			
  18. 		</script>

style

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

className

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

getAttribute

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

elementNode.getAttribute(name)

setAttribute

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

elementNode.setAttribute(name,value)

removeAttribute

object.removeAttribute("style");

attributes

  • 返回该节点的所有属性，是一个数组
  1. 		<div id="div1" class="top" style="width: 100px;">
  2. 			<span>sss</span>
  3. 		</div>
  5. 		<script type="text/javascript">
  6. 			var mychar = document.getElementById('div1');
  7. 			
  8. 			var attrs = mychar.attributes
  9. 			// 3
  10. 			console.log(attrs.length)
  11. 			// id
  12. 			// class
  13. 			// style
  14. 			for(let i = 0; i < attrs.length; i++){
  15. 				console.log(attrs[i])
  16. 			}
  17. 			
  18. 		</script>

（6）节点操作

createElement()

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

appendChild()

  • 插入节点appendChild()：在指定节点的最后一个子节点列表之后添加一个新的子节点。
  • ul添加一个li，内容为PHP
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. </head>
  7. <body>
  9. <ul id="test">
  10.   <li>JavaScript</li>
  11.   <li>HTML</li>
  12. </ul> 
  14. <script type="text/javascript">
  15.   var otest = document.getElementById("test");  
  16.   var add = document.createElement('li');
  17.   add.innerHTML = "PHP";
  18.   otest.appendChild(add);
  19. </script> 
  21. </body>
  22. </html>
  • 下面的例子会发现p在div2中了，div1中没有了
  1. 		<div id="div1">
  2. 			<p id="p1">aaa</p>
  3. 		</div>
  4. 		
  5. 		<div id="div2"></div>
  6. 		
  7. 		<script type="text/javascript">
  8. 			
  9. 			var div1 = document.getElementById('div1')
  10. 			var div2 = document.getElementById('div2')
  11. 			var p1 = document.getElementById('p1')
  12. 			
  13. 			div2.appendChild(p1)
  14. 			
  15. 		</script>
  • appendChild不要重复添加

image.png  image.png

  1. 		<div id="div1">
  2. 			<div id="div2">2222</div>
  3. 			
  4. 		</div>
  6. 		<script type="text/javascript">
  7. 			
  8. 			var div1 = document.getElementById('div1')
  9. 			var div2 = document.getElementById('div2')
  10. 			
  11. 			var div3 = document.createElement('div');
  12. 			div3.innerHTML = '3333'
  13.       // div3 div2并列
  14. 			div1.appendChild(div3);
  15.       // div3在div2里面，并且之前并列的div3不见了
  16. 			//div2.appendChild(div3);
  17. 		</script>

insertBefore

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

removeChild

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

replaceChild

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

createTextNode()

  • 创建文本节点
  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. 		<title>无标题文档</title>
  6. 		<style type="text/css">
  7. 			.message {
  8. 				width: 200px;
  9. 				height: 100px;
  10. 				background-color: #CCC;
  11. 			}
  12. 		</style>
  13. 	</head>
  14. 	<body>
  15. 		<script type="text/javascript">
  16. 			var element = document.createElement("p");
  17. 			element.className = "message";
  18. 			var textNode = document.createTextNode("I love JavaScript!");
  19. 			element.appendChild(textNode);
  20. 			document.body.appendChild(element);
  21. 		</script>
  23. 	</body>
  24. </html>

cloneNode(true)

  • true：深度克隆，所有子节点会被克隆
  • false：只会克隆节点自身
  • 节点操作后，节点原位置会丢失
  • 下面的例子会发现p在div2中了，div1中没有了
  1. 		<div id="div1">
  2. 			<p id="p1">aaa</p>
  3. 		</div>
  4. 		
  5. 		<div id="div2"></div>
  6. 		
  7. 		<script type="text/javascript">
  8. 			
  9. 			var div1 = document.getElementById('div1')
  10. 			var div2 = document.getElementById('div2')
  11. 			var p1 = document.getElementById('p1')
  12. 			
  13. 			div2.appendChild(p1)
  14. 			
  15. 		</script>
  • 克隆
  1. 		<div id="div1">
  2. 			<p id="p1">aaa</p>
  3. 		</div>
  4. 		
  5. 		<div id="div2"></div>
  6. 		
  7. 		<script type="text/javascript">
  8. 			
  9. 			var div1 = document.getElementById('div1')
  10. 			var div2 = document.getElementById('div2')
  11. 			var p1 = document.getElementById('p1')
  12. 			
  13. 			var p2 = p1.cloneNode(true);
  14. 			
  15. 			div2.appendChild(p2)
  16. 			
  17. 		</script>

原文链接：http://www.cnblogs.com/ArthurWangWang/p/14014844.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号