JS HTML DOM元素节点

Posted 2021-01-17 zhuyan-dailycheck

要想创建一个元素节点，首先要创建一个新元素，然后在新元素中添加

1、appendChild（）尾部添加

使用步骤：（1）新建类型（2）添加内容（3）组合节点（4）定位节点（5）添加节点

代码示范：

<div id="div1">
  <p id="p1">这是第一个初始段落</p>
  <p id="p2">这是第二个初始段落</p>
</div>
<script>
var para = document.createElement("p"); //新建p标签类型的节点
var content = document.createTextNode("这是一个新建节点"); //为节点添加内容
para.appendChild(content); //组合节点
var position = document.getElementById("div1"); //定位节点
position.appendChild(para); //添加节点
</script>

2、insertBefore（）首部添加

使用步骤：（1）新建类型（2）添加内容（3）组合节点（4）定位大范围（5）定位小范围（6）添加节点

代码示范：

<div id="div1">
  <p id="p1">这是第一个初始段落</p>
  <p id="p2">这是第二个初始段落</p>
</div>
<script>
var para = document.createElement("p"); //创建p标签类型的节点
var content = document.createTextNode("这是新添加的节点"); //为节点添加内容
para.appendChild(content); //组合节点
var big_position = document.getElementById("div1"); //定位大范围
var small_position = document.getElementById("p2"); //定位小范围
big_position.insertBefore(para,small_position); //添加节点

可以看出，insertBefore（）的还使用方法与appendChild（）截然不同。有两个参数：（1）是要添加的节点名称 （2）是节点要添加在哪个元素的前方

3、removeChild（）移除节点

使用步骤：（1）获取父元素（2）获取目标元素（3）组合移除

代码示范：

<div id="div1">
  <p id="p1">这是第一个初始段落</p>
  <p id="p2">这是将被移除的段落</p>
  <p id="p3">这是第二个初始段落</p>
</div>
<script>
var parent = document.getElementById("div1"); //获取父元素
var child = document.getElementById("p2"); //获取目标元素
parent.removeChild(child); //组合删除

删除节点必须知道父节点  必须知道

4、replaceChild（）替换节点

使用步骤：（1）获取父元素（2）获取目标元素（3）替换

代码示范：

<div id="div1">
    <p id="p1">这是一个初始段落</p>
    <p id="p2">这是一个初始段落</p>
    <p id="p3">这是一个初始段落</p>
    <p id="p4">这是一个初始段落</p>
</div>
<script>
    var para = document.createElement("p");
    var content = document.createTextNode("I am fine");
    para.appendChild(content);
    var parent = document.getElementById("div1");
    var child = document.getElementById("p2");
    parent.replaceChild(para,child);

5、NodeList

NodeList对象是一个从文档中获取的节点列表集合

所有浏览器中的childNodess属性返回的是NodeList对象  大部分浏览器querySelectAll属性返回的是NodeList对象

HTML Collection 与 NodeList的区别

（1）前者是html元素的集合，后者是文档节点的集合

（2）都与数组对象类似，可以使用索引来获取元素

（3）前者可以通过索引、ID、name来获取元素，后者只能通过索引

（4）只有NodeList对象包含有属性节点和文本节点