HTML DOM方法与节点树详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gfuchao/article/details/50429953

一些 DOM 对象方法

这里提供一些您将在本教程中学到的常用方法：

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

元素类型	NodeType
元素	1
属性	2
文本	3
注释	8
文档	9

HTML DOM 节点树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

HTML DOM Tree 实例

节点父、子和同胞

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

请看下面的 HTML 片段：

<html>
  <head>
    <title>DOM 教程</title>
  </head>
  <body>
    <h1>DOM 第一课</h1>
    <p>Hello world!</p>
  </body>
</html>

从上面的 HTML 中：

<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点

并且：

<html> 节点拥有两个子节点：<head> 和 <body>
<head> 节点拥有一个子节点：<title> 节点
<title> 节点也拥有一个子节点：文本节点 "DOM 教程"
<h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点

并且：

<head> 元素是 <html> 元素的首个子节点
<body> 元素是 <html> 元素的最后一个子节点
<h1> 元素是 <body> 元素的首个子节点
<p> 元素是 <body> 元素的最后一个子节点

警告！

DOM 处理中的常见错误是希望元素节点包含文本。

在本例中：<title>DOM 教程</title>，元素节点 <title>，包含值为 "DOM 教程" 的文本节点。

可通过节点的 innerHTML 属性来访问文本节点的值。

您将在稍后的章节中学习更多有关 innerHTML 属性的知识。

<html>
	<head>
		<title>Skip Blanks String</title>
		<script type="text/javaScript">
			//忽略空白字符串
			function SkipBlanksString(element){
				var ret = [];
				for(var i=0; i<element.length; i++){ 
					if(element[i].nodeType === 3 && /^\s+$/.test(element[i].nodeValue)){ 
						continue;
					} else { 
						ret.push(element[i]);
					}
				}
				return ret;
			};
			//删除空白字符
			function RemoveSkipString(element){ 
				for(var i=0; i<element.length; i++){ 
					if(element[i].nodeType === 3 && /^\s+$/.test(element[i].nodeValue)){ 
						element[i].parentNode.removeChild(element[i]);
					}
				}
				return element;
			};
			window.onload = function (){
				var box = document.getElementById('box');
				alert(RemoveSkipString(box.childNodes).length);  //返回数量3
				alert(SkipBlanksString(box.childNodes).length);   //返回数量3
			};
		</script>
	</head>
	<body>
		<div id="box">
			<p id="p1">hello world!</p>
			Fuck You!
			<p>this is the last line</p>
		</div>
	</body>
</html>

<html>
<head>
	<meta charset="UTF-8">
	<title>Skip Blanks String</title>
	<script type="text/javaScript">
		//删除空白字符
		function Rst(node){ 
			for(var i=0; i<node.length; i++){ 
				if(node[i].nodeType === 3 && /^\s+$/.test(node[i].nodeValue)){ 
					node[i].parentNode.removeChild(node[i]);
				}
			}
			return node;
		};
		window.onload = function (){ 
			var box = document.getElementById('box'); 
			var Skip = Rst(box.childNodes);   //删除所有空白字符
			var createD = document.createElement('div');   //创建元素节点<div></div>
			for(var i=0; i<Skip.length; i++){ 
				var createP = document.createElement('p');    //创建元素节点 <p></p>
				var Str ='';
				if(Skip[i].nodeType === 1){ 
					Str = Skip[i].innerHTML;   //如果是“元素节点”输出innerHTML 赋值给 Str
				} else { 
					Str = Skip[i].nodeValue;   //如果是“文本节点”输出nodeValue 赋值给 Str
				};
				var createT = document.createTextNode(Str);   //创建文本节点
				createP.appendChild(createT);   //把文本节点添加到P元素下
				box.parentNode.appendChild(createD).appendChild(createP);   //添加DIV标签,再DIV下添加子节点P标签
			};
		};
	</script>
</head>
<body>
	<div id="box">
		<p id="p1">hello world!</p>
		<span>Fuck You....</span>
		激光电波,毕.........
		<p>this is the last line</p>
	</div>
</body>
</html>

<html>
<head>
	<meta charset="UTF-8">
	<title>2016年1月9日 23:35:52</title>
	<script type="text/JavaScript">
			function evening(){ 
				var Col = document.body.style;
				Col.backgroundColor ="blue";
			};
			function nooning(){ 
				var Col = document.body.style;
				Col.backgroundColor ="lavender"
			};
			winDow.onload = function(){ 
			};
			</script>
</head>
<body>
	<button type="button" οnclick="var i=0; setInterval(function(){document.body.innerHTML=i++},500);">Hello world!</button>
	<input type="button" οnclick="setInterval(evening,500)" value="This is the button" />
	<button type="button" οnclick="setInterval(nooning,1000)">This is the third</button>
</body>
</html>