DOM 复习

user3646314205664
129 阅读4分钟

DOM 复习

1.节点（Node）

是一个接口，网页里的所有都东西都是一个节点，许多DOM API都会继承于它。

节点的不同类型：

  1. 文档节点 document （整个网页）

  2. 元素节点 element （html body h1 div span...）

  3. 文本节点 text （标签中的文字）

  4. 属性节点 attribute （标签中的属性）

前两种用得较多。

2.事件（event）

事件就是用户和浏览器的交换瞬间，比如鼠标点击、鼠标移动、按下按键...，我们可以通过位事件设置响应函数来完成和用户的交互。

响应的方式：

方式一：

在事件发生时，触发的函数称为事件的响应函数

< button onclick="alert('...');">点我一下< /button>

方式二：

< script >

let btn = document.getElementById('btn');
btn.onclick = function(){
    ... ...
};

3.文档的加载

网页的加载是按照自上向下的顺序一行一行加载的，如果将script标签写在前边，这样js执行时页面还没加载完毕，将会出现获取不到DOM对象的情况。

解决方式：

  1. 将script标签放在body的最后

< body>

< script>< /script>

< /body>

  1. 将代码写在window.onload的回调函数中

    window.onload = function(){

    ...

    };

  2. 引入外部js文件时，在script标签上添加defer属性

< script defer src='...'>< /script>

注：只能延迟文件的加载，不能延迟代码的执行

4.DOM的操作

  1. DOM查询

查询是指在网页中获取指定的节点。

（1）通过document对象查询

document.getElementById() ： 根据id获取一个元素节点对象（id是唯一的）

document.getElementsByClassName() ： 根据class属性值获取一组元素节点对象

document.getElementsByTagName() ：根据标签名获取一组元素节点对象

其中：document.getElementsByTagName(*) : 获取页面中的所有元素

document.getElementsByName() : 根据元素的name属性获取一组元素节点对象（主要用于表单项）

document.querySelector() : 根据选择器字符串获取符合条件的第一个元素

document.querySelectorAll() : 根据选择器字符串获取符合条件的所有元素

document.documentElement() : 获取页面的根元素（html）

document.body() ： 获取页面的body元素

（2） 通过element进行查询

element.getElementsByTagName() : 根据标签名获取元素中的指定的后代元素

注：方法跟document一样，仅范围不同

element.childNodes : 获取当前元素的所有子节点

element.children ： 获取当前元素的所有子元素

element.firstChild : 获取第一个子节点

element.firstElementChild : 获取第一个子元素

element.lastChild : 获取最后一个子节点

element.lastElementChild : 获取最后一个子元素

element.parentNode :获取当前元素的父元素

element.previousSibling : 获取前一个（兄弟）节点

element.previousElementSibling : 获取前一个（兄弟）元素

element.nextSibling : 获取后一个（兄弟）节点

element.nextElementSibling : 获取后一个（兄弟）元素

（3） 元素中的属性

  • 如何读取元素的属性：

元素.属性名

例：

ele.name

ele.value

ele.id

ele.className(唯一特殊)

classList 返回的是当前类所有class的列表，可以通过索引来获取具体的class

  • 如何设置：

元素.属性名 = 属性值

例：

ele.name = xx

ele.value = xx

ele.id = xx

ele.className = xx

  • 其他属性：

innerHTML 内部的HTML代码，带标签 innerText 内部的文本内容，不带标签

  • 读取一个标签内部的文本：

< span >哈哈< /span>

span.innerHTML

span.innerText

span.firstchild.nodeValue

span.textContent

  1. DOM修改（创建、删除、修改）

（1） 创建元素

  • document.createElement(标签名) :创建一个新的元素

  • document.createTextNode(文本内容) ： 创建一个新的文本节点

（2） 插入元素

  • 父节点.appendChild(子节点); 向父节点中插入一个子节点

  • 元素.insertAdjacentElement('位置',元素); 向元素的指定位置插入子元素

  • 元素.insertAdjacentHTML('位置', 'HTML代码'); 向元素的指定位置插入HTML代码

  • 元素.insertAdjacentTxet('位置', '文本内容'); 向元素指定的位置插入文本内容

位置需要传递一个字符串作为参数：

'beforebegin' 开始标签前，成为当前元素的前一个兄弟元素

'afterbegin' 开始标签后，成为当前元素的第一个子元素

'beforeend' 结束标签前，成为当前元素的最后一个子元素

'afterend' 结束标签后，成为当前元素的最后一个兄弟元素

  • 父节点.replaceChild(新节点,旧节点); 使用新节点替换旧节点

  • 父节点.insertBefore(新节点,旧节点); 将新节点插入到旧节点的前边

（3）复制节点

也是一种创建节点的方式。

  • 节点.cloneNode() 对节点进行浅复制（只复制节点本身）

  • 节点.cloneNode(true) 对节点进行深复制（复制节点本身及所有的后代节点）

      window.onload = function(){
      document.getElementById('btn01').onclick = function{
          let zzj = document.getElementById('zzj');
          let list1 = document.getElementById('list1');
      
          // cloneDode() 创建一个当前节点副本
          // cloneNode(true) 深复制
          let zzj2 = zzj.cloneNode(true);
      
          //修改id
          zzj2.id = 'zzj2';
          list.appendChild(zzj2);
      }

（4）删除元素

  • 子节点.parentNode.removeChild(子节点)

  • 子节点.remove() 老版本浏览器不兼容

5.this

根据函数的调用方式不同，this的值也不同。

  1. 以函数形式调用，this是window

  2. 以方法的形式调用，this是调用方法的对象

  3. 以构造函数的形式调用，this是新建的对象

  4. 以call和apply的形式调用，this是它们的第一个参数

  5. 箭头函数中的this由它的外层作用域决定

  6. 事件的回调函数中， this是绑定事件的对象

avatar
文章
阅读
粉丝