标题还有字数限制?这是DOM节点.这字数肯定够了

最新推荐文章于 2024-09-21 18:46:25 发布

超级超bug

最新推荐文章于 2024-09-21 18:46:25 发布

阅读量116

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/wzfnba/article/details/128069066

版权

节点:

在前面我们之前了DOM元素,而在页面中所有的页面元素都是由一个个的节点元素组成,其中节点我们可以分为元素节点 ,文本节点,属性节点.
节点跟节点之间的关系我们可以分为父子关系,兄弟关系.

  <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
    </ul>

像上面ul跟li之间的关系就是父子关系, 那ul就是li的父节点 ,li是ul的子节点.
同样li之间就是兄弟关系,他们互为兄弟节点.

获取节点:

1 获取父节点子元素.parentNode() 得到的就是父元素

2 子节点

node.childNodes (获取所有的子节点包含元素节点文本节点等等)
node.childNode[i] (获取第i-1个子节点)
node.children (获取所有的子元素节点)（常用返回值是伪数组）
node.firstChild（第一个子节点不管是文本节点还是元素节点）
node.lastChild（最后一个子节点不管是文本节点还是元素节点）

3 兄弟节点:上一个兄弟节点:node.previousElementSibling
下一个兄弟节:node.nextElementSiblin

<body>
    <ul>
        <li>这是第1个li</li>
        <li class="two">这是第2个li</li>
        <li>这是第3个li</li>
    </ul>
    <script>
        /*
          目标:掌握兄弟节点 
          获取下一个兄弟
          语法:dom元素.nextElementSibling
          获取上一个兄弟元素
          语法:dom元素.previousElementSibling
        */
        const two = document.querySelector('.two')
        // 获取这个元素的下一个兄弟节点
        console.log(two.nextElementSibling);
        // 获取这个元素的上一个兄弟节点
        console.log(two.previousElementSibling);


    </script>
</body>

运行结果如下:

节点操作:

增加节点: 创建节点document.createElement('li')

添加到节点后面appendChild()

   <ul>
        <li>1个li</li>
        <li>2个li</li>
        <li>3个li</li>
    </ul>
    <button>添加li</button>
    <script>
        /*
      目标：掌握 增加节点
      1. 创建 节点
        - 语法：document.createElement('标签名') 掌握
      2. 追加节点 
        - 语法：父对象.appendChild(需要追加的节点) 掌握
        - 作用：将 节点 追加到 某个父元素 内部的最后面 
    */
        document.querySelector('button').addEventListener('click', function () {
            const liNode = document.createElement('li')
            liNode.innerHTML = '最后一个li'
            // const ul = this.previousElementSibling
            // ul.appendChild(liNode)
            document.querySelector('ul').appendChild(liNode)
        })
    </script>

将节点添加到前面:.insertBefore(node)

删除节点:

有如下两种方式: this.parentNode.removeChild(this)和 this.remove()

<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
    </ul>
    <script>
        /*
        目标:了解删除节点
        语法:
        父元素.removeChild(要删除的子元素)
        子元素.remove()
        */
        const lis = document.querySelectorAll('li')
        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click', function () {
                //    第一种删除方式
                // this.parentNode.removeChild(this)
                // 第二种删除方式
                this.remove()
            })
        }
    </script>
</body>

克隆节点: cloneNode()

<body>
    <ul>
        <li>1</li>
        <li id="two">2</li>
        <li>3</li>
    </ul>
    <button>克隆节点</button>
    <script>
        /*
        目标:了解克隆节点
        语法:dom对象.cloneNode(布尔值)
        布尔值:
        默认值false值克隆元素本省.不克隆元素里面的内容
        true克隆自己 并且克隆元素里面的内容
        */
        const btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            const li = document.querySelector('#two')
            console.log(li.cloneNode(true));
        })
    </script>
</body>