DOM(三)

WangQ
139 阅读4分钟

节点操作

1、 节点概述

6.1.1 为什么学节点操作

获取元素通常使用的两种方式：

a. 利用 DOM 提供的方法获取元素

  • document.getElementById()
  • document.getElementsByTagName()
  • document.querySelector 等

缺点：逻辑性不强、繁琐

b.利用节点层级关系获取元素

  • 利用父子兄节点关系获取元素
  • 逻辑性强， 但是兼容性稍差

这两种方式都可以获取元素节点，但是节点操作更简单

6.1.2 描述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

image.png 一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

  • 元素节点 nodeType 为 1
  • 属性节点 nodeType 为 2
  • 文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）

我们在实际开发中，节点操作主要操作的是元素节点

2、 节点层级

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

2.1 父级节点

  node.parentNode  
  • parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
  • 如果指定的节点没有父节点则返回 null

2.2 子节点

 1.  parentNode.childNodes（标准）  

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。

注意： 返回值里面包含了所有的子节点，包括元素节点，文本节点等。

如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes

例：

     // DOM提供的方法(API)获取
      var ul = document.querySelector('ul');
      var lis = ul.querySelectorAll(lis);
     //  1.子节点
     console.log(ul.childNodes);
     //在下图中，由于换行符是文本节点，所以一共有九个节点(包括5个文本节点，四个li节点)

image.png

  parentNode.children（非标准）  

parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回 （这个是我们重点掌握的）。

虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

     // DOM提供的方法(API)获取
      var ul = document.querySelector('ul');
      var lis = ul.querySelectorAll(lis);
 ​
     //  1.子节点
     console.log(ul.childNodes);
     // li是元素节点，nodeType = 1
     console.log(ul.childNodes[1].nodeType);
     // children 获取所有的子元素节点
     console.log(ul.children);

 parentNode.firstChild  

firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

 parentNode.lastChild    

lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。

 parentNode.firstElementChild  

firstElementChild 返回第一个子元素节点，找不到则返回null。

 parentNode.lastElementChild    

lastElementChild 返回最后一个子元素节点，找不到则返回null。

注意：这两个方法有兼容性问题，IE9 以上才支持。

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，获取第一个子元素节点或最后一个子元素节点的方法：

 // 如果想要第一个子元素节点，可以使用 
 parentNode.chilren[0] 
 // 如果想要最后一个子元素节点，可以使用
 parentNode.chilren[parentNode.chilren.length - 1]

2.3 兄弟节点

 node.nextSibling  

nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。比如文本节点、元素节点等等。

 node.previousSibling    

previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。

 node.nextElementSibling  

nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。

 node.previousElementSibling    

previousElementSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。

注意：这两个方法有兼容性问题， IE9 以上才支持。

2.4 获取兄弟元素节点兼容性的函数

这里是获取下一个兄弟元素节点。如果需要返回上一个兄弟元素节点，直接替换nextSibling为previousSibling

 //传参：传入一个element标签进去   
 function getNextElementSibling(element) {
       var el = element;
 // el.nextSibling是下一个兄弟节点，令 el = el.nextSibling，一直往下找下一个节点，直到找到下一个元素节点即node.Type = 1，就返回当前节点 ，当前节点就是传入element的下一个兄弟元素节点 
       while (el = el.nextSibling) {
         if (el.nodeType === 1) {
             return el;
         }
       }
       return null;
     }  

3、下拉菜单

image.png

分析：先获取nav导航栏，然后再获取nav的四个li元素，每个Li都包含一个a标签和一个ul(有三个小li)；先将ul都隐藏起来，再通过JS操作节点，当鼠标经过时ul的样式再显示出来。效果如下：

image.png

   <a href="#">微博</a>
       <ul>
         <li>
           <a href="">私信</a>
         </li>
         <li>
           <a href="">评论</a>
         </li>
         <li>
           <a href="">@我</a>
         </li>
       </ul>
     </li>

         // 1. 获取元素
         var nav = document.querySelector('.nav');
         var lis = nav.children; // 得到4个小li
         // 2.循环注册事件
         for (var i = 0; i < lis.length; i++) {
             lis[i].onmouseover = function() {
                 this.children[1].style.display = 'block';
             }
             lis[i].onmouseout = function() {
                 this.children[1].style.display = 'none';
             }
         }

4、 创建和添加节点

第一步： 创建节点

 document.createElement('tagName')

document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

第二部：添加节点

 node.appendChild(child)

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。

 node.insertBefore(child, 指定元素

node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。

   <ul> <li>123</li> </ul>
   <script>
     var ul = document.querySelector('ul');
     // 第一步：创建节点
     var li = document.createElement('li');
     // 第二步：添加节点才可以看到效果 node.appendChild(child) node是父级，child是子级
     // appendChild(child) 是在后边追加子元素
     ul.appendChild(li);
     // insertBefore(child,指定元素) 是在指定元素的前边追加元素
     // 在页面中添加元素：先创建元素再添加元素（也就是先创建然后在想放到哪里）
     var lili = document.createElement('li');
     ul.insertBefore(lili,ul.children[0]);

5、简单版发布留言

①核心思路： 点击按钮之后，就动态创建一个li，添加到ul 里面。

②创建li 的同时，把文本域里面的值通过li.innerHTML 赋值给 li

③如果想要新的留言后面显示就用 appendChild 如果想要前面显示就用insertBefore

   <textarea name="" id=""></textarea>
     <button>发布</button>
     <ul>
 ​
     </ul>
     <script>
         // 1. 获取元素
         var btn = document.querySelector('button');
         var text = document.querySelector('textarea');
         var ul = document.querySelector('ul');
         // 2. 注册事件
         btn.onclick = function() {
             if (text.value == '') {
                 alert('您没有输入内容');
                 return false;
             } else {
                 // console.log(text.value);
                 // (1) 创建元素
                 var li = document.createElement('li');
                 // 先有li 才能赋值
                 li.innerHTML = text.value;
                 // (2) 添加元素
                 // ul.appendChild(li);
                 ul.insertBefore(li, ul.children[0]);
             }
         }
     </script>
avatar
文章
阅读
粉丝