DOM 元素 节点

一、创建新的 HTML 元素节点 - appendChild()
创建新的 HTML 元素节点需要先创建一个元素，然后在已存在的元素中添加节点；

<div id="demo">
	<p>段落。</p>
	<p>段落二。</p>
</div>

<script type="text/javascript">
	var varp = document.createElement("p");
	var node = document.createTextNode("我是新加人的段落 。");
	varp.appendChild(node);

	var element = document.getElementById("demo");
	element.appendChild(varp);
</script>

注意：appendChild()添加元素是添加新元素到尾部

二、创建新的 HTML 元素节点 - insertBefore()

<div id="demo">
	<p id='p'>段落。</p>
    <p id='p1'>段落二。</p>
</div>

<script type="text/javascript">
	var varp = document.createElement("p");
    var node = document.createTextNode("这是一个新的段落。");
    varp.appendChild(node);

    var element = document.getElementById("demo");
    var child = document.getElementById("p");
    element.insertBefore(varp, child);
</script>

与appendChild()添加在最后不同的时，insertBefore()是在段前插入新元素。

三、移除已存在的元素
要移除一个元素，你需要知道该元素的父元素。移除已存在的元素使用node.remove() 方法。

 <div id="demo">
        <p id="p1">第一个段落。</p>
        <p id="p2">第二个段落。移除了就看不到我了</p>
        <button onClick="delpElemennt()">移除段落</button>
    </div>

    <script type="text/javascript">
        function delpElemennt(){
            var varp = document.getElementById("demo");//查找 id="demo" 的元素
            var child = document.getElementById("p1");//查找 id="p1" 的 <p> 元素
            varp.removeChild(child);//从父元素中移除子节点
        }
    </script>

此示例中，点击按钮button事件delpElemennt()，移除ID为p2的段落。代码是已知要查找的子元素，然后查找其父元素，再删除这个子元素（删除节点必须知道父节点）

四、替换 HTML 元素
我们可以使用 replaceChild() 方法来替换 HTML DOM 中的元素

<div id="demo">
		<p id="p1">这是一个段落。</p>
		<p id="p2">这是另外一个段落。</p>
	</div>

	<script type="text/javascript">
		var varp = document.createElement("p");
		var node = document.createTextNode(" replaceChild​替换段落。");
		varp.appendChild(node);
		var demoId = document.getElementById("demo");
		var child = document.getElementById("p1");
		demoId.replaceChild(varp, child);
	</script>

HTML DOM 集合

一、HTMLCollection 对象
getElementsByTagName() 方法返回 HTMLCollection 对象。HTMLCollection 对象类似包含 HTML 元素的一个数组。集合中的元素可以通过索引(以 0 为起始位置)来访问。

<h1>HTML DOM</h1>
<p>javascript:;</p>
<p id="demo"></p>
<script type="text/javascript">
	var collection = document.getElementsByTagName("p");
	document.getElementById("demo").innerHTML = "P 段落的内容为:<span style='color:red;'> " + collection[0].innerHTML +
		'</span>';
</script>

二、HTMLCollection 对象 length 属性

<h1>HTML DOM</h1>
<p>javascript:;</p>
<p id="demo"></p>
<p id="demo2"></p>  
<script type="text/javascript">
	var collection = document.getElementsByTagName("p");
	document.getElementById("demo").innerHTML = "P 段落的内容为:<span style='color:red;'> " + collection[0].innerHTML +
		'</span>';
    document.getElementById("demo2").innerHTML = collection.length;
</script>

HTMLCollection 对象的 length 属性定义了集合中元素的数量。

注意：
HTMLCollection 不是一个数组！
HTMLCollection 看起来像是一个数组，但其实不是。可以像数组一样，使用索引来获取元素。
HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

NodeList节点列表

NodeList 对象类似 HTMLCollection 对象。NodeList 对象是一个从文档中获取的节点列表 (集合) ，一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。所有浏览器的 childNodes 属性返回的是 NodeList 对象。大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

<h1>HTML DOM</h1>
<p>javascript nodelist;</p>

<button onclick="bunNodelist()">点击测试</button>

<script type="text/javascript">
function bunNodelist() {
	var nodelist = document.querySelectorAll("p");//获取 <p> 元素的集合
	var i;
	for (i = 0; i < nodelist.length; i++) {
		nodelist[i].style.color = "#f90000";
	}
}
</script>

注意：
节点列表不是一个数组！
节点列表看起来像是一个数组，但其实不是。你可以像数组一样，使用索引来获取元素。
节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

HTMLCollection 与 NodeList 的区别

1. HTMLCollection 是 HTML 元素的集合。
2. NodeList 是一个文档节点的集合。
3. NodeList 与HTMLCollection 有很多类似的地方。
4. NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, 5, …)来获取元素。
5. NodeList 与 HTMLCollection 都有 length 属性。元素可以通过索引(以 0 为起始位置)
6. HTMLCollection 元素可以通过 name，id 或索引来获取。
7. NodeList 只能通过索引来获取。
8. 有 NodeList 对象有包含属性节点和文本节点。