【DOM BOM】笔记 3日节点操作

最新推荐文章于 2023-09-23 14:13:17 发布

索西引擎

最新推荐文章于 2023-09-23 14:13:17 发布

阅读量2.9k

点赞数 1

分类专栏： # HTML&CSS&JavaScript&Vue 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_39518871/article/details/109183232

版权

HTML&CSS&JavaScript&Vue 专栏收录该内容

47 篇文章

订阅专栏

节点操作

获取元素通常使用两种方式：利用DOM提供的方法获取元素 和 利用节点层级关系获取元素。

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

该方法逻辑性不强、繁琐。

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

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

节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用 node 来表示。
HTML DOM树中的所有节点均可通过 JavaScript 进行访问，所有 HTML元素（节点）均可被修改，也可以创建或删除。
一般地，节点至少拥有 nodeType（节点类型）、nodeName（节点名称）和 nodeValue（节点值）这三个基本属性值。
元素节点 nodeType 为1 。
属性节点 nodeType 为2 。
文本节点 nodeType为3（文本节点包含文字、空格、换行等）。

<body>
  <!-- 节点的优点 -->
  <div>我是div</div>
  <span>我是span</span>
  <ul>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
  </ul>
  <div class="box">
    <span class="erweima">x</span>
  </div>
  <script>
    var box = document.querySelector('.box');
    console.dir(box);
  </script>
</body>

在这里插入图片描述

节点层级

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

父级节点

获取方式：node.parentNode 。
parentNode 属性可以返回某节点的父节点，注意是最近的一个父节点。
如果指定的节点没有父节点则返回 null 。

  <body>
    <!-- 节点的优点 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
      <li>我是li</li>
      <li>我是li</li>
      <li>我是li</li>
      <li>我是li</li>
    </ul>
    <div class="demo">
      <div class="box">
        <span class="erweima">x</span>
      </div>
    </div>
    <script>
      var erweima = document.querySelector("erweima");
      //得到是离元素最近的父级节点
      console.log(erweima.parentNode);
    </script>
  </body>

子节点

1、获取方式：parentNode.childNodes （标准）
parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为及时更新的集合。返回值里面包含了所有的子节点，包括元素节点、文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。

  var ul = document.querySelector('ul');
  for (var i = 0; i < ul.childrenNodes.length; i++) {
        if (ul.childrenNodes[i].nodeType == 1) {
             // ul.childrenNodes[i] 是元素节点
             console.log(ul.childrenNodes[i]);
        }
  }

2、实际开发中常用的获取子元素节点的方式是： parentNode.children（非标准）

  <body>
    <!-- 节点的优点 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
      <li>我是li</li>
      <li>我是li</li>
      <li>我是li</li>
      <li>我是li</li>
    </ul>
    <div class="demo">
      <div class="box">
        <span class="erweima">x</span>
      </div>
    </div>
    <script>
      // 以前元素的获取方法
      var ul = document.querySelector('ul');
      var lis = ul.querySelectorAll('li');
      // DOM 提供的方法（API）获取
      // 1. 子节点  所有的子节点包含元素节点和文本节点等
      console.log(ul.childNodes);
      //    文本节点的nodeType为3
      console.log(ul.childNodes[0].nodeType);
      // 2. children 获取所有的子元素节点，也是我们实际开发常用的
      console.log(ul.children);
    </script>
  </body>

第一个子元素和最后一个子元素

1、获取第一个子节点：parentNode.firstChild。结果为返回第一个子节点，找不到返回null。同样也是包含所有的节点。
2、获取最后一个子节点：parentNode.lastChild。结果为返回最后一个子节点，找不到返回null。同样也是包含所有的节点。
3、获取第一个子元素节点：parentNode.firstElementChild。结果返回第一个子元素节点，找不到则返回null。该方法有兼容性问题，IE9以上才支持。
4、获取最后一个子元素节点：parentNode.firstElementChild。结果返回最后一个子元素节点，找不到则返回null。该方法有兼容性问题，IE9以上才支持。
5、实际开发种写法：

  <body>
    <!-- 节点的优点 -->
    <div>我是div</div>
    <span>我是span</span>
    <ol>
      <li>我是li1</li>
      <li>我是li2</li>
      <li>我是li3</li>
      <li>我是li4</li>
    </ol>
    <script>
      var ol = document.querySelector('ol');
      console.log(ol.firstChild);
      console.log(ol.lastChild);
      console.log(ol.firstElementChild);
      console.log(ol.lastElementChild);
      // 实际开发写法
      // 既没有兼容性问题又返回元素节点
      // 返回第一个子元素节点
      console.log(ol.children[0]);
      // 返回最后一个子元素节点
      console.log(ol.children[ol.children.length - 1]);
    </script>
  </body>

案例新浪下拉菜单

在这里插入图片描述

导航栏里面的li都要有鼠标经过效果，所以需要循环注册鼠标事件。
核心原理：当鼠标经过li里面的第二个孩子ul时，ul显示；当鼠标离开，则ul隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
    }
    .nav {
      width: 500px;
      margin: 100px auto;
    }
    .nav > li {
      float: left;
    }
    .nav ul {
      display: none;
    }
    .nav > li > a {
      display: block;
      width: 90px;
      height: 30px;
      border: 0;
      font-size: 16px;
      text-align: center;
      line-height: 30px;
      color: #000000;
      text-decoration: none;
    }
    .nav > li > a:hover {
      background-color: #ccc;
    }
    .nav > li > ul > li:hover {
      background-color: skyblue;
    }
    .nav > li > ul > li > a {
      display: block;
      width: 90px;
      height: 30px;
      border: 1px solid pink;
      border-width: 0 1px 1px 1px;
      font-size: 14px;
      text-align: center;
      line-height: 30px;
      color: #000000;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <ul class="nav">
    <li>
      <a href="#">微博</a>
      <ul>
        <li><a href="#">私信</a></li>
        <li><a href="#">评论</a></li>
        <li><a href="#">@我</a></li>
      </ul>
    </li>
    <li>
      <a href="#">微博</a>
      <ul>
        <li><a href="#">私信</a></li>
        <li><a href="#">评论</a></li>
        <li><a href="#">@我</a></li>
      </ul>
    </li>
    <li>
      <a href="#">微博</a>
      <ul>
        <li><a href="#">私信</a></li>
        <li><a href="#">评论</a></li>
        <li><a href="#">@我</a></li>
      </ul>
    </li>
    <li>
      <a href="#">微博</a>
      <ul>
        <li><a href="#">私信</a></li>
        <li><a href="#">评论</a></li>
        <li><a href="#">@我</a></li>
      </ul>
    </li>
    <li>
      <a href="#">微博</a>
      <ul>
        <li><a href="#">私信</a></li>
        <li><a href="#">评论</a></li>
        <li><a href="#">@我</a></li>
      </ul>
    </li>
    <script>
      // 1. 获取元素
      var nav = document.querySelector('.nav');
      var lis = nav.children;
      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';
        }
      }
    </script>
  </ul>
</body>
</html>

兄弟节点

node.nextSibling 返回当前元素的下一个兄弟节点，找不到则返回 null。同样，也是包含所有的节点（文本，元素等）。
node.previousSibling 返回当前元素上一个兄弟节点，找不到则返回 null。同样，也是包含所有的节点（文本，元素等）。
node.nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回 null。该方法有兼容性问题，IE9以上才支持。
node.previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回 null。该方法有兼容性问题，IE以上才支持。
如何解决兼容性问题？答：自己封装一个兼容性的函数。

function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
        if(el.nodeType === 1) {
          return el;
        }
      }
      return null;
    }

节点操作

创建节点和添加节点

document.createElement(tagName) 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为 动态创建元素节点。
node.appendChild(child) 方法将一个节点添加到指定父节点的子节点列表末尾。类似于CSS里面的after伪元素。

  <ul></ul>
  <script>
    // 1. 创建元素节点
    var li = document.createElement('li');
    // 2. 添加节点
    var ul = document.querySelector('ul');
    ul.appendChild(li);
  </script>

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

  <ul>
    <li>123</li>
  </ul>
  <script>
    // 1. 创建元素节点
    var li = document.createElement('li');
    // 2. 添加节点
    var ul = document.querySelector('ul');
    ul.appendChild(li);
    var lili = document.createElement('li');
    ul.insertBefore(lili,ul.children[0]);
  </script>

案例简单发布留言

在这里插入图片描述

核心思路：点击按钮后，就动态创建一个 li，添加到 ul 里面。
创建 li 的同时，把文本域里面的值通过 li.innerHTML 赋值给 li。
如果想要新的留言后面显示就用appendChild，如果想要前面显示就用 insertBefore。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <br />
    <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 {
          // (1) 创建元素
          var cli = document.createElement("li");
          cli.innerHTML = text.value;
          // (2) 添加元素
          // ul.appendChild(cli);
          ul.insertBefore(cli, ul.children[0]);
        }
      };
    </script>
  </body>
</html>

删除节点

node.removeChild(child)方法从DOM中删除一个子节点，返回删除的节点。

  <body>
    <button>删除</button>
    <ul>
      <li>熊大</li>
      <li>熊二</li>
      <li>光头强</li>
    </ul>
    <script>
      // 1. 获取元素
      var ul = document.querySelector('ul');
      var btn = document.querySelector('button');
      // 删除元素
      // ul.removeChild(ul.children[2]);
      // 3. 点击按钮依次删除里面的孩子
      btn.onclick = function() {
        if(ul.children.length == 0) {
          this.disabled = true;
        } else {
          ul.removeChild(ul.children[0]);
        }
      }
    </script>
  </body>

删除留言案例

在这里插入图片描述

当我们把文本域里面的值赋值给 li 的时候，多添加一个删除的链接。
需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的 li。
阻止链接跳转需要添加 javascript: void(0); 或者 javascript:;

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul {
        background-color: #ccc;
        padding: 0;
      }
      li {
        width: 300px;
        padding: 5px;
        background-color: skyblue;
        font-size: 14px;
        margin: 15px 0;
        list-style: none;
      }
      li a {
        float: right;
      }
    </style>
  </head>
  <body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <br />
    <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 {
          // (1) 创建元素
          var cli = document.createElement("li");
          cli.innerHTML = text.value + "<a herf='javascript:;'>删除</a>";
          // (2) 添加元素
          // ul.appendChild(cli);
          ul.insertBefore(cli, ul.children[0]);
          // (3) 删除元素
          var as = document.querySelectorAll('a');
          for(var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
              ul.removeChild(this.parentNode);
            }
          }
        }
      };
    </script>
  </body>
</html>

复制节点

node.cloneNode()方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点。

  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <script>
      var ul = document.querySelector('ul');
      var lili = ul.children[0].cloneNode(true);
      ul.appendChild(lili);
    </script>
  </body>

如果括号参数为空或者为 false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
如果括号参数为 true，则是深度拷贝，会复制节点本身以及里面所有的子节点。

案例动态生成表格

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        width: 500px;
        margin: 100px auto;
        border-collapse: collapse;
        text-align: center;
      }

      th,
      td {
        border: 1px solid #333;
      }
      thead tr {
        height: 40px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>科目</th>
          <th>成绩</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      // 1. 先准备好学生的数据
      var datas = [
        {
          name: "魏璎珞",
          subject: "JS",
          score: "100",
        },
        {
          name: "弘历",
          subject: "JS",
          score: "98",
        },
        {
          name: "傅恒",
          subject: "JS",
          score: "99",
        },
        {
          name: "明玉",
          subject: "JS",
          score: "88",
        },
      ];
      // 2. 往tbody里面创建行
      var tbody = document.querySelector('tbody');
      for(var i = 0; i < datas.length; i++) {
        // 创建 tr
        var tr = document.createElement('tr');
        tbody.appendChild(tr);
        // 创建 td 
        for(var key in datas[i]) {
          // 创建单元格
          var td = document.createElement('td');
          // 往单元格放数据
          td.innerHTML = datas[i][key];
          tr.appendChild(td);
        }
        // 3. 创建有删除2个字的单元格
        var td = document.createElement('td');
        td.innerHTML = '<a herf="javascript:;">删除</a>';
        tr.appendChild(td);
      }
      // 4. 删除操作
      var as = document.querySelectorAll('a');
      for(var i = 0; i < as.length; i++) {
        as[i].onclick = function() {
          tbody.removeChild(this.parentNode.parentNode);
        }
      }
    </script>
  </body>
</html>

三种动态创建元素区别

document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。
innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘。
innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂。
createElement() 创建多个元素效率稍低一点点，但是结构更清晰。
总结：不同浏览器下，innerHTML效率比createElement高。

  <body>
    <button>点击</button>
    <p>abc</p>
    <div class="inner"></div>
    <div class="create"></div>
    <script>
      // 1. document.write()创建元素
      var btn  = querySelector('button');
      btn.onclick = function() {
        document.write('<a herf="#">百度</a>');
      }
      // 2. innerHTML 创建元素 字符串拼接方式
      var inner = document.querySelector('.inner');
      for(var i = 0; i < 100; i++) {
        inner.innerHTML += '<a herf="#">百度</a>';
      }
      // 2. innerHTML 创建元素 数组拼接形式
      var arr = [];
      for (var i = 0; i < 100; i++) {
        arr.push('<a herf="#">百度</a>');
      }
      inner.innerHTML = arr.join('');
      // 3. document.createElement() 创建元素
      var create = document.querySelector('.create');
      for (var i = 0; i < 100; i++) {
        var a = document.createElement('a');
        create.appendChild(a);
      }
    </script>
  </body>

DOM重点核心

文档对象模型（Document Object Model，DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

1、对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的DOM编程接口。

2、对于HTML，DOM使得HTML形成一棵DOM树，包含文档、元素、节点。
在这里插入图片描述
我们获取过来的DOM元素是一个对象（object），所以称为文档对象模型。

关于DOM操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

创建

document.write
innerHTML
createElement

增

appendChild
insertBefore

删

removeChild

改

主要修改DOM的元素属性，DOM元素的内容、属性、表单的值等。

修改元素属性：src、herf、title等。
修改普通元素内容：innerHTML、innerText。
修改表单元素：value、type、disabled等。
修改元素样式：style、className。

查

主要获取查询DOM的元素。

DOM提供的API方法：getElementById、getElementsByTagName古老用法，不太推荐。
H5提供的新方法：querySelector、querySelectorAll提倡。
利用节点操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibiling）提倡。

属性操作

主要针对自定义属性。

setAttribute：设置DOM的属性值。
getAttribute：得到DOM的属性值。
removeAttribute：移除属性。

事件操作

给元素注册事件，采取事件源.事件类型 = 事件处理程序。

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发