4.DOM扩展

4-1内联事件

<!-- 内联事件 -->
    <!-- 
        data-自定义属性名
     -->
    <button id="btn"  data-aid="123456" onclick="go(event)">btn</button>
    <script>
        /* 
        定义data-aid="123456"
        获取自定义属性值 event.target.dataset.aid 
        */
        function go(event){
            console.log("hello world");
            console.log(event.target.dataset.aid)
        }
    </script>

4-2节点扩展

                    firtChild   获取第一个子节点
                    firtElementChild 获取第一个元素子节点
                    lastChild     最后一个
                    lastElementChild    
          兄弟节点
                     nextSibling     下一个兄弟节点
                     nextElementSibling    下一个元素兄弟节点
                     previousSibling     上一个
                     previousElementSibling

4-3classList

classList对象有下列方法。
add()：增加一个 class。
remove()：移除一个 class。
contains()：检查当前元素是否包含某个 class。
toggle()：将某个 class 移入或移出当前元素。
item()：返回指定索引位置的 class。

例子
1.add() remove()

<p id="app">hello world</p>
    <button id="btn">移除class</button>
    <script>
        var app = document.getElementById("app");
        var btn =  document.getElementById("btn");
        app.onclick = function(){
            this.classList.add("current")
        }
        btn.onclick =  function(){
            app.classList.remove("current")
        }
    </script>

2.toggle() contains()

<!-- 
        toggle toggleClass();
        contains      hasClass()  判断是否包含某个class
     -->
    <p id="app">hello world</p>
    <script>
        var app =  document.getElementById("app");
        app.onclick =  function(){
            // if(this.classList.contains("current")){
            //     this.classList.remove("current")
            // }else{
            //     this.classList.add("current")
            // }
            this.classList.toggle("current")
        }
    </script>

4-4ParentNode.append()，ParentNode.prepend()

• prepend()在父元素的第一位增加元素
• append()在父元素的最后一位增加元素

  <ul id="app">
        <li>html</li>
    </ul>
    <script>
        // append,prepend
        var app =  document.getElementById("app");
        var p = "<h1>hello world<h1>";
        app.prepend(p);
    </script>

  4-5ChildNode 接口

4-5-1before-在元素之前插入,可以传多个值

<script>
        var child = document.getElementById("child");
        child.before("before")
</script>

4-5-2after-在元素之前插入,可以传多个值

<script>
        var child = document.getElementById("child");
        child.after("after")
</script>