DOM 元素
声明
该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明
DOM 元素
1、创建新元素(节点)
-
要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。
-
首先，创建元素方式是固定的
document.createElement- 比如我要创建一个p元素，并为p元素创建一个新的文本节点
var para = document.createElement("p");var node = document.createTextNode("这是一个新的段落。");
-
然后，要查找现存元素的位置用于添加新创建的元素
document.getElementById -
最后将新创建的文本节点添加到p元素中，将p元素添加到已存在元素中
添加的方式是不固定的
appendChild()用于添加新元素到尾部insertBefore()用于添加新元素到开始位置
光这样说有一点点难理解，我们来举两个简单例子，这两个例子用到了不同的添加方式
1.1 appendChild()
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新添加p元素的文本内容。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
分析一下上边的实例代码
1.创建 < p > 元素:
var para = document.createElement("p");
2.为 < p > 元素创建一个新的文本节点：
var node = document.createTextNode("这是一个新的段落。");
3.将文本节点添加到 < p > 元素中：
para.appendChild(node);
4.最后，在一个已存在的元素中添加 p 元素。
查找已存在的元素：
var element = document.getElementById("div1");
添加到已存在的元素中:
element.appendChild(para);
1.2 insertBefore()
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
2、移除已存在元素
需要注意的是，如果要移除某个元素，一定首先要知道该元素的父元素！
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
如果能够在不引用父元素的情况下删除某个元素，就太好了。不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
实例解析
HTML 文档中
元素包含两个子节点 (两个
元素):
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
查找 id="div1" 的元素:
var parent = document.getElementById("div1");
查找 id="p1" 的 < p > 元素:
var child = document.getElementById("p1");
从父元素中移除子节点：
parent.removeChild(child);
另外一种删除方式是已知子元素，通过子元素查找其父元素，再删除这个子元素
var child = document.getElementById("p1");
child.parentNode.removeChild(child); //通过子元素查找其父元素并删除子元素
3、替换 HTML 元素
替换方法为：replaceChild()
这个方法有两个参数(我现在了解到的)，第一个参数是新创建元素，第二个参数是被替换元素的位置信息
语法是这样的
被替换子元素的父元素位置.replaceChild(参数1，参数2)；
直接上例子
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新创建元素的文本内容。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
