114_js笔记16_节点元素的dom操作 + HTMLCollection + NodeList

• 一，创建新的 HTML 元素 (节点) - appendChild()

  • //标签
    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另外一个段落。</p>
    </div>
    
    //dom操作
            //为 <p> 元素添加文本节点：
            var para = document.createElement("p");
            //将文本节点添加到 <p> 元素中：
            var node = document.createTextNode("这是一个新的段落1。");
            //最后，在一个已存在的元素中添加 p 元素。
            para.appendChild(node);
            //最后，在一个已存在的元素中添加 p 元素。查找已存在的元素：
            var element = document.getElementById("div1");
            //最后，在一个已存在的元素中添加 p 元素。添加到已存在的元素中:
            element.appendChild(para);

     

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

  • var para1 = document.createElement("p");
            var node1 = document.createTextNode("这是一个新的段落2。");
            para1.appendChild(node1);
            var element1 = document.getElementById("div1");
            var child1 = document.getElementById("p1");
            element1.insertBefore(para1, child1);   

     

• 三，移除已存在的元素(节点) - removeChild()

  • //查找 id="div1" 的元素:
            var parent = document.getElementById("div1");
            //查找 id="p1" 的 <p> 元素:
            var child = document.getElementById("p1");
            //从父元素中移除子节点：
            parent.removeChild(child);

     

• 四，替换 HTML 元素(节点) - replaceChild()

  •  var para2 = document.createElement("p");
            var node2 = document.createTextNode("这是一个新的段落3。");
            para2.appendChild(node2);
            
            var parent2 = document.getElementById("div1");
            var child2 = document.getElementById("p2");
            parent.replaceChild(para2, child2);

     

• 五，HTMLCollection 对象

  • 1，getElementsByTagName() 方法返回 HTMLCollection 对象。
    • var myCollection = document.getElementsByTagName("p");
  • 2，集合中的元素可以通过索引(以 0 为起始位置)来访问。
    • myCollection[1]
  • 3，HTMLCollection 对象的 length 属性定义了集合中元素的数量
    • myCollection.length
  • 4，遍历元素个数

    • var myCollection = document.getElementsByTagName("p");
      var i;
      for (i = 0; i < myCollection.length; i++) {
          myCollection[i].style.backgroundColor = "red";
      }

       

  • 5，注意：
    • HTMLCollection 不是一个数组！
    • 可以像数组一样，使用索引来获取元素

• 六，NodeList对象

  • 1，所有浏览器的  childNodes 属性返回的是 NodeList 对象
    • var myNodeList = document.childNodes;
  • 2，大部分浏览器的 querySelectorAll() 返回 NodeList 对象
    • var myNodeList = document.querySelectorAll("p");
  • 3，一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象
  • 4，NodeList 中的元素可以通过索引(以 0 为起始位置)来访问
    • y = myNodeList[1]
  • 5，NodeList 对象 length 属性定义了节点列表中元素的数量
    • myNodelist.length
  • 6，遍历元素

    • var myNodelist = document.querySelectorAll("p");
      var i;
      for (i = 0; i < myNodelist.length; i++) {
          myNodelist[i].style.backgroundColor = "red";
      }

       

• 七，HTMLCollection 与 NodeList 的区别

  • 相同点：
    • NodeList 与 HTMLCollection 有很多类似的地方。 
    • NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
    • NodeList 与 HTMLCollection 都有 length 属性。
    • HTMLCollection 元素可以通过 name，id 或索引来获取
    • 无法使用数组的方法： valueOf(), pop(), push(), 或 join()
  • 不同点：
    • HTMLCollection 是 HTML 元素的集合；NodeList 是一个文档节点的集合。
    • NodeList 只能通过索引来获取；HTMLCollection 元素可以通过 name，id 或索引来获取
    • 只有 NodeList 对象有包含属性节点和文本节点

 

 

• •