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>