JS 节点笔记

h5新增自定义属性

    为了保存并使用数据,有一些数据不必要保存到数据库中；

    data开头作为自定义属性并赋值

    兼容性获取element.getAttribute("data-自定义属性名")

    h5新增element.dataset.属性名 或者element.dataset['属性名']

    注意

    如果自定义属性有多个连接起来的 获取的时候一定要用驼峰命名法

    <div class="conter" id="conter"></div>

 <div class="conter" id="conter"></div>
     var div = document.getElementById("conter")

     div.setAttribute("data-index", 1)

     div.setAttribute("data-list-name", 1000)
     // getAttribute获取
     console.log(div.dataset);
     console.log(div.getAttribute("class"));
     console.log(div.getAttribute("data-index"));

     // h5新增获取自定义属性方法
     console.log(div.dataset.index);
     console.log(div.dataset["index"]);

     console.log(div.dataset.listName);
     console.log(div.dataset["listName"]);

节点操作

    利用节点层次关系获取元素

    元素节点 nodeType为1

    属性节点 nodetype为2

    文本节点 nodeType为3 文本节点包括文字、空格、换行等

 

节点层次

    父子兄层次关系

1、父级节点

    node.parentNode

    得到的是离他最近的节点 如果没有父节点就返回null

     <div class="box">
         <span class="erweima">2</span>
         <ul class="ul">
             <li>2</li>
             <li>2</li>
         </ul>
     </div>
 var box = document.querySelector("box")
     console.log(box);
     // 父节点parentNode
     var erweima = document.querySelector(".erweima")
     // 得到的是离他最近的节点  如果没有父节点就返回null
     console.log(erweima.parentNode);

子节点

    parentNode.children 非标准 但是现在的浏览器都支持

    子节点childNode 获取到所有的子节点 包括换行

     <ol class="ol">
         <li>123</li>
         <li>123</li>
         <li>123</li>
         <li>123</li>
         <li>123</li>
     </ol>
 // 子节点childNode 获取到所有的子节点 包括换行
     var ul = document.querySelector(".ul")
     // console.log(ul.childNodes);
     console.log(ul.children);

     var ol = document.querySelector(".ol")
     // firstChild获取到的是第一个节点
     console.log(ol.firstChild);
     // lastchild获取到的啊最后一个节点
     console.log(ol.lastChild);

     // 兼容性问题不推荐使用  ie9以上支持
     console.log(ol.firstElementChild);
     console.log(ol.lastElementChild);

     // 实际开发常用的是
     console.log(ol.children[0]);
     console.log(ol.children[ol.children.length - 1]);

兼容性问题

    node.previousElementSibling 得到上一个元素节点

    node.nextElementSibling 得到下一个元素节点

 

     <div class="group">ssss</div>
     <span>4556</span>
  var div = document.querySelector(".group")
     console.log(div.nextSibling);
     console.log(div.nextElementSibling);
     console.log(div.previousElementSibling);

创建节点

    document.createElement("节点名")

    node.appendChild(child) 后面追加元素类似于数组的push

    node.insertBefore(child,指定元素) 在指定元素前面添加元素

注意

    我们想要在页面添加元素首先要先创建元素然后再添加元素

<ul class="ul2">
        <li>123</li>
    </ul>
    <script>
        // 创建节点
        var li = document.createElement("li")
        var lis = document.createElement("li")
        // 添加节点node.appendChild(child)  node父节点 child是子节点
        var ul = document.querySelector(".ul2")
        ul.appendChild(li)
        ul.insertBefore(lis, ul.children[0])
    </script>

删除节点

    node.removeChild(child) 删除父元素中的一个子节点

 <button class="button2">删除</button>
     <ul class="ul3">
         <li>1</li>
         <li>12</li>
         <li>13</li>
     </ul>
     <script>
         var ul = document.querySelector(".ul3")
         var btn = document.querySelector(".button2")
         btn.onclick = function () {
             if (ul.children.length == 0) {
                 this.disabled = false
             } else {
                 ul.removeChild(ul.children[0])
             }

         }
     </script>

复制节点

    node.cloneNode()  如果括号里面是空的或者是false就只复制了标签 不复制内容  如果括号里面是true 就可以复制内容

  <ul class="ul4">
         <li>1</li>
         <li>16</li>
         <li>12</li>
         <li>13</li>
     </ul>
     <script>
         var ul = document.querySelector(".ul4")
         var lis = ul.children[0].cloneNode(true);
         ul.appendChild(lis)
     </script>