DOM02

最新推荐文章于 2024-07-11 19:43:55 发布

rcj15651130122

最新推荐文章于 2024-07-11 19:43:55 发布

阅读量27

点赞数

文章标签：数学建模

本文链接：https://blog.csdn.net/rcj15651130122/article/details/131016244

版权

DOM节点

一、节点：

网页中所有的内容都是节点(标签、属性、文本、注释)，在DOM中，节点是使用node表示，节点可以增删改查

节点分为：nodeType：节点类型 nodeName节点名称 nodeValue：节点值

节点有父子兄弟

二、父节点：通过子元素(先获取)找寻父节点(都是属性)

<body>
    <div class="box">
        <div class="sbox">123</div>
    </div>
    <script>
        var sbox = document.querySelector('.sbox')
        //parentNode 父节点 语法:子元素对象.parentNode 一直朝上查找父节点，直到找到document，在朝上查找会显示null

        console.log(sbox);
        //parentElement 终端父节点是html 再朝上查找就会返回null
        console.log(sbox.parentElement.parentElement);
    </script>
</body>

三、子节点：通过父元素(先获取)找寻子节点(都是属性)

<body>
    <ul>
        <!-- 
            子节点
         -->
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
    </ul>
    <script>
        var ul = document.querySelector('ul')
        //子节点(伪数组) childNodes 所有的子节点(换行 注释 标签)，
        // console.log(ul.childNodes)//11
        // console.log(ul.childNodes[0].nodeType)//3
        // console.log(ul.childNodes[1].nodeType)//8
        // console.log(ul.childNodes[2].nodeType)//3
        // console.log(ul.childNodes[3].nodeType)//1
        // console.log(ul.childNodes[4].nodeType)//3
        // console.log(ul.childNodes[5].nodeType)//1
        // for(var i=0;i<ul.childNodes.length;i++){
        //     if(ul.childNodes[i].nodeType==1){
        //         console.log(ul.childNodes[i]);
        //     }
        // }
        //childen 获取所有子节点的元素(伪数组)，不包含空格、注释等 IE9以上才会支持
        console.log(ul.children)//HTMLCollection(4)
        for(var i=0;i<ul.children.length;i++){
            console.log(ul.children[i])
        }

        //firstChild 拿到的是第一个子节点(如果有空格 拿到的就是空格)
        // console.log(ul.firstChild);
        
        //firstElementChild 拿到的是第一个子元素()
        console.log(ul.firstElementChild)

        //lastChild 拿到的是最后一个子节点(如果有空格 拿到的就是空格)
        console.log(ul.lastChild);

        //lastElementChild 拿到的是最后一个一个子元素()
        console.log(ul.lastElementChild)

        // console.log(ul.lastElementChild.innerHTML)
        // ul.lastElementChild.innerHTML = '12345'
        // console.log(ul.lastElementChild.innerHTML)
        </script>
</body>

四、兄弟节点：通过子元素(先获取)找寻兄弟节点(都是属性)

<body>
    <ul>
        <li>1</li>上
        <li class="lili">2</li>下
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        var lili = document.querySelector('.lili')
        //nextSibliing 查找下一个兄弟节点(如果有空格 查找的就是空格)
        console.log(lili.nextSibling);
        //nextElementSibling 查找下一个兄弟元素
        console.log(lili.nextElementSibling);
        //previousSibling 查找上一个兄弟节点(如果有空格 查找的就是空格)
        console.log(lili.previousSibling);
        //previousElementSibling 查找上一个兄弟元素
        console.log(lili.previousElementSibling);
    </script>
</body>

五、创建节点、追加(插入)节点、删除节点、替换节点、克隆(复制)节点

<script>
    // var arr = [ '王多磊','丁龙祥','王金刚','郑日安','王玉']
    //createElement  创建元素(都是在父元素里面操作) 先创建
    var div = document.createElement('div')
    var box = document.querySelector('.box')
    var box1 = document.querySelector('.box1')
    //把创建的元素插入到页面中 appendChild(需要插入的节点) 插入到父元素的最后一个子元素 
    box.appendChild(div)
    div.className = 'box2'
    div.id = 'box3'
    div.innerHTML = '22222'
    div.style.color = 'red'
    
    //兄弟元素 insertBefore(要插入的节点，谁的前面)插入谁的前面
    box.insertBefore(div,box1)
    //每次创建追加的新的节点都在父元素的第一个
    box.insertBefore(div,box.children[0])
    var div2 = document.createElement('div')
    div2.innerHTML = '333333'
    box.appendChild(div2)

    // 删除节点(移除) 父元素.removeChild(想要移除的元素) 必须通过父元素删除
    // box.removeChild(box1)
    // renmove()移除自己以及自己的后代 括号里什么都不需要写
    // box.remove()

    //替换节点replaceChild(新的节点，老的节点)：替换的新的节点会消失
    box.replaceChild(div2,box1)

    //克隆节点cloneNode() 如果括号内为空/false 则是浅拷贝(只克隆自己)：只克隆标签
                        // 如果括号内为true 则是深拷贝(也会克隆自己的子孙后代)：克隆标签及其内容

    var clone = div2.cloneNode(true)
    console.log(clone);   
</script>

六、经典案例

<body>
    <button>新增</button>
    <ul class="ul2">

    </ul>
    <script>
        var arr = [ '王多磊','丁龙祥','王金刚','郑日安','王玉']
        var btns = document.querySelector('button')
        var ul2 = document.querySelector('.ul2')
        
        var num=0
        btns.onclick = function (){    
            if(num>4)  return    
            var li =document.createElement('li')
            ul2.appendChild(li)
            li.innerHTML = arr[num]
            var btn =document.createElement('button')
            li.appendChild(btn)
            btn.innerHTML = '删除'
            num++
            btn.onclick = remove
/*             var btn = document.querySelector('button')//不用在获取了 获取就错了
            btn.onclick = function(){
                li.remove()
            } */
            // li.removeChild(btn)
        }
        function remove() {
            console.log(this)
            this.parentNode.remove()
        }       
    </script>
</body>