DOM节点及其相关操作

DOM节点

DOM数里每一个内容 都是DOM的节点

DOM树

节点的几大类型

元素节点:

•      所有的标签 : html body	div ...
  

•       html是根节点
  

属性节点

•       所有的属性 : href id class title ...
  

文本节点

•        所有文本 ： user 自己书写
  

其他

查找节点

能够根据节点关系查找目标节点的能力

节点关系

• 父节点
• 子节点
• 兄弟节点

查找父节点

• 父节点查找

• parentNode — 属性
• 返回最近一级的父节点

子元素.parentNode

    <script>
        let son = document.querySelector('.son');
        // 调用最近一级别的父节点
        console.log(son.parentNode);
        let father = document.querySelector('.father');
        console.log(father);
    </script>

打印结果

• 子节点查找

• childNodes

  获得所有子节点 [
  包括文本节点(空格、换行)、注释节点等
  ]

• children (重点)

  仅获得所有元素节点

  返回的是一个伪数组

父元素.children

    <button>
        点击
    </button>

     <ul>
         <li>1</li>
         <li>3</li>
         <li>3</li>
         <li>4</li>
     </ul>
     <script>
         let btn =document.querySelector('button');
         let ul  = document.querySelector('ul');  // 父节点选取
         // 通过父节点选取子节点 
         btn.addEventListener('click',function () {
            for(let i  = 0;i < ul.children.length;i++){ // 通过数组进行遍历
                ul.children[i].style.color = 'red';
            } 
         });
         // 也可以单独进行改变颜色
         ul.children[0].style.color = 'pink'
     </script>

• 兄弟节点查找

• 下一个兄弟节点

  nextElementSibling [
  包括文本节点(空格、换行)、注释节点等
  ]

• 上一个兄弟节点

  previousElementSibling [
  包括文本节点(空格、换行)、注释节点等
  ]

上一个兄弟节点

    <button>
        点击
    </button>
    <ul>
        <li>1</li>
        <li class="two">2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        let btn = document.querySelector('button');
        let two = document.querySelector('.two');


        btn.addEventListener('click',function () {
            // 上一个兄弟颜色改变
            two.previousElementSibling.style.color = 'red'; 
        });
    </script>

结果输出

点击后 :

下一个兄弟节点

    <button>
        点击
    </button>
    <ul>
        <li>1</li>
        <li class="two">2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <script>
        let btn = document.querySelector('button');
        let two = document.querySelector('.two');
        btn.addEventListener('click',function () {
            // 上一个兄弟颜色改变
            // two.previousElementSibling.style.color = 'red'; 
 
 
            // 下一个兄弟改变颜色
            two.nextElementSibling.style.color = 'red';
        });
    </script>

结果输出

点击后 :

追加节点

    <ul>
        <li>1</li>
    </ul>

    <script>
        let ul  = document.querySelector('ul');
        // 创建节点
        let li1 = document.createElement('li');
        li1.innerHTML = '2' // 内容
        // 追加节点
        // 1.追加在 1 的后面 相当于 push()
        ul.appendChild(li1)

        let li2 = document.createElement('li');
        li2.innerHTML = '3' // 内容
        // 2. 追加在1的前面
        // insertBefore(子元素 , 放在哪个的前面(通过父节点找子节点的方式去寻找需要放到的位置))
        ul.insertBefore(li2,ul.children[0])
    </script>

克隆和删除节点

删除节点(真正删除而非隐藏【display : none】)

    <button>删除</button>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        let ul = document.querySelector('ul');
        let btn = document.querySelector('button');
        btn.addEventListener('click',function () {
            // 删除节点  只能通过父节点进行删除
            ul.removeChild(ul.children[0])
        })
    </script>

测试结果

点击一次删除一次

克隆节点

• 复制原来有的节点[
  把复制的节点放入到指定的元素内部]

元素.cloneNode(布尔值)

] 为true – 表示其节点中的子节点也一并克隆
] 为dalse - 只克隆当前节点
默认为false

    <ul>
        <li>这里测试</li>
    </ul>

    <script>
        let ul = document.querySelector('ul');
        // 只克隆本体
        let newul = ul.cloneNode(false)

        // 连同孩子一起克隆
        let allul = ul.cloneNode(true)
    </script>

测试结果

总结

数据来源 B站 https://www.bilibili.com/video/BV1AT4y1v75t?p=32