DOM节点

592 0 0

作者:代码集中营

语雀链接

（1）文档对象模型DOM

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

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

（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）

		<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不要重复添加

		<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>

内容来源于网络如有侵权请私信删除

文章来源: 博客园

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

标签： HTML CSS HTML5 CSS3

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

DOM节点

DOM节点

语雀链接

（1）文档对象模型DOM

（2）document根节点

（3）节点的访问

getElementById()

getElementsByName()

getElementsByClassName

getElementsByTagName()

querySelector

querySelectorAll

childNodes

children

firstChild

firstElementChild

lastChild

lastElementChild

parentNode

nextSibling

nextElementSibling

previousSibling

previousElementSibling

（4）节点类型

（5）节点属性

innerHTML

innerText

style

className

getAttribute

setAttribute

removeAttribute

attributes

（6）节点操作

createElement()

appendChild()

insertBefore

removeChild

replaceChild

createTextNode()

cloneNode(true)

相关课程

热门标签

推荐文章