DOM操作HTML


                                              DOM操作HTML

      1、获取节点
      
       -->>1.利用节点关系获取节点

             childNodes - 获取所有子节点。

             firstChild - 获取第一个子节点。
           
              .....

       -->>2、直接获取节点

         document.getElementById("id") -- 根据id获取节点。
 
         document.getElementsByTagName("div") -- 根据标签名称获取节点。

         document.getElementsByClassName("class") -- 根据类名获取节点。

         document.getElementsByName("name") -- 根据名称获取节点。

       2、创建的节点
      
       -->>1.创建新的节点

           createElement("div") - 创建div的元素节点。

           createTextNode("text") - 创建包含“text”的文本节点。

       -->>2.克隆节点
 
           cloneNode(bool) - 克隆节点,bool为false时只克隆该元素节点,而bool为true时会克隆该节点和该节点的所有子节点。
 
    3、 添加节点

          -->>appendChild(node) - 在所有子节点之后添加一个node。

             insertBefore(node, refnode) - 在refnode之前添加一个node,记住此次添加是发生在某元素的子节点上的,即在某元素的refnode子节点前面加一个node。

        4 、删除节点

          -->>removeChild(node) - 删除node子节点。

        5、 替换节点

           -->>raplaceChild(newnode, oldnode) - 把oldnode替换为newnode,记住此次替换是发生在某元素的子节点上的,即是把某元素的oldnode子节点替换为newnode。

        6 、通用操作(增删改)

           -->>innerHTML - 某元素节点所包含的所有HTML,包括所有元素节点 、 文本节点 以及属性节点。

原文地址:https://www.cnblogs.com/paul-du/p/5402840.html