h5新增自定义属性

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

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

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

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

注意

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

 <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>

巴特西

JS 节点笔记