第十章 DOM节点操作

一,获取返回节点

1.childNodes()

返回一个数组 这个数组由给定的子节点构成
什么意思呢?来演示一下 首先创建一个ul ,然后返回ul里面的节点

  <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5 </li>
        </ul>
<script>
  var ul = document.getElementsByTagName("ul")[0];
       console.log(ul.childNodes);
</script>

childNodes
那么大家现在肯定会有一些疑问 ,为什么是11个节点呢? Text 又是什么呢?
那么我们换一种写法来看看

  <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5 </li></ul>
<script>
  var ul = document.getElementsByTagName("ul")[0];
       console.log(ul.childNodes);
</script>

childNodes

其实text就是标签之间的空格

2.firstChild

返回给定节点的第一个子节点

  <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5 </li></ul>
<script>
  var ul = document.getElementsByTagName("ul")[0];
       console.log(ul.firstChild
);
</script>

firstChild

获取到了第一个li标签 没问题

3.lastChild

给定返回子节点的最后一个节点 这个就不演示了 和上面类似

4.parentNode

返回给定节点的父节点
如果我们给他一个li 他会返回他的父节点ul

 <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5 </li></ul>
<script>
  var ul = document.getElementsByTagName("ul")[0];
  var li = ul.getElementsByTagName("li")[2];
       console.log(li.parentNode);
</script>

parentNode

5.nextSibling

返回给定节点的下一个节点
如我们获取第三个li 然后用这个 会返回第四个 li

 <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5 </li></ul>
<script>
  var ul = document.getElementsByTagName("ul")[0];
  var li = ul.getElementsByTagName("li")[2];
       console.log(li.nextSibling);
</script>

nextSibling

6.previousSibling

返回给定节点的上一个节点
跟上面一样 不演示了

7.lastElementChild 如果只返回标签节点 需要一个过滤

返回上一个 也是一样的 需要在中间加一个Element

二,DOM节点的操作方法

• 创建 添加 删除 替换

1.创建元素节点 createElement ()

如我们要创建一个li

 
       var ul = document.getElementsByTagName("ul")[0];
        var oli = document.createElement("li");
        console.log(oli)

createElement

2.2.添加节点 appendChild ()

在指定节点后面添加一个新子节点
// 格式 : 父.appenChild(子)
如我们要把新创建的li放在ul里面

  var ul = document.getElementsByTagName("ul")[0];
        var oli = document.createElement("li");
        ul.appendChild(oli);

appendChild

4. createTextNode()

创建文本节点

var text = document.createTextNode("啦啦啦啦")
        console.log(text)

createTextNode

---

如果我们要将新创建的文本标签放在li里面 然后将li放入ul里面应该怎么写呢?
首先先创建文本节点和标签节点
然后将文本节点放入标签节点
最后将标签节点放入ul

  var ul = document.getElementsByTagName("ul")[0];
        //首先先创建好节点 
        var oli = document.createElement("li");
        var text = document.createTextNode("啦啦啦啦")
        //然后将文本节点放入li
        oli.appendChild(text);
        //最后将li节点放入ul里面
        ul.appendChild(oli)

例

上面的文本节点也可以用innerHtml来进行替代

5.insertBefore(添加节点,位置)

 格式 父.insertBefore(添加节点,位置)

6.removeChild()

删除节点 从子节点列表中删除指定节点
如我们要删除第一个li

   <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>

       </ul>
 
    <script>
        
        var ul = document.getElementsByTagName("ul")[0];
        ul.removeChild(ul.childNodes[1])//为什么下标不是0  因为第一个是空格Text   
  </script>   

removeChild

删除节点的第二种写法

var ul = document.getElementsByTagName("ul")[0];
        var li = document.getElementsByTagName('li');

        li[0].remove();

7.replaceChild(new,old )替换节点

  var div = document.getElementsByTagName("div")[0];
        var op = document.createElement("p");
        op.innerHTML = "新内容"
        div.replaceChild(op,div.firstElementChild)

        

新的写在前面 老的写后面

replaceChild

8.after ()

再给定节点的后面添加节点

9.before()

在给定节点的前面添加节点

三,DOM nodeName nodeValue nodeType

1.nodeName 获取节点名称

<ul>
      <li>第一个</li>
      <li>第二个</li>
      <li>第三个</li>
  </ul>
  <script>
      var oul = document.getElementsByTagName("ul")[0].childNodes;

      for(var i = 0;i<oul.length;i++){
           console.log("第"+(i+1)+"节点名称"+oul[i].nodeName);
      }

nodeName

因为是childNodes 所以一共是7个节点

        元素节点的nodeName就是标签名 
        属性节点的nodeName就是属性名称 
        文本节点的nodeName永远是#text
        文档节点的nodeName永远是#document 

2.nodeValue 获取节点内容

  var oul = document.getElementsByTagName("ul")[0].childNodes;

        for(var i = 0;i<oul.length;i++){
             console.log("第"+(i+1)+"节点名称"+oul[i].nodeValue);
        }

nodeValue

        元素节点的nodeValue是undefined或null
        文本节点的nodeValue是文本自身 
        属性节点的nodeValue是属性值

3.nodeType 节点类型

<ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ul>
    <script>
        var oul = document.getElementsByTagName("ul")[0].childNodes;

        for(var i = 0;i<oul.length;i++){
             console.log("第"+(i+1)+"节点名称"+oul[i].nodeType);
        }

nodeType

        元素节点的类型时   1
        属性节点是         2
        文本节点           3
        文档节点           9
        注释节点是         8