梳理DOM中常用方法和属性

2020-08-14 本文已影响0人深度剖析JavaScript

首先来看什么是DOM

DOM是Document Object Model的缩写，中文叫文档对象模型。它定义了一系列表示和修改文档所需的方法，这些方法可以用来更方便的操作html和xml的所有元素、以及间接的操作CSS样式。因此有人称DOM是html以及xml的标准编程接口

DOM对象为宿主对象，有各个浏览器厂商定义。因此会有兼容问题

在页面被加载时，浏览器会自动构建对应的DOM树

下面来梳理DOM中常用方法和属性

一、document获取元素

document是代表整个文档的对象模型，为了了解清楚我将其原型链打印出来了

通过ID获取
document.getElementById() //IE8及以下不兼容
通过标签名获取（兼容性很好）
document.getElementsByTagName()
通过标签中的属性name获取
document.getElementsByName() //只有部分标签可生效(比如：表单、img、iframe)
通过类名获取
document.getElementsByClassname() //IE8及以下不兼容
通过任意CSS选择符获取
document.querySelector()和document.querySelectorAll(); //IE8以下不兼容，而且是非实时的。

二、通过已知节点遍历节点树（兼容性都很好）
想讲一下节点，DOM中节点有分很多：包括元素节点、属性节点、文本节点、注释节点和document以及DocumentFragment等

节点常用的4个属性
1. nodeName 获取节点名，只能读
2. nodeValue 获取节点值，即节点的文本内容；部分节点才有（如text节点或者comment）。可读可写
不同节点对应不同的nodeType值，比如常见的：

元素节点：1
属性节点：2
文本节点：3
注释节点：8
document：9
DocumentFragment：11

3. nodeType 获取节点类型对应的数值，只能读
4. attribute 获取元素节点属性的集合

节点都有一个常用的方法：hasChildNodes()
用于判断节点下还有没有子节点，有返回true，没有返回false
node.hasChildNodes();

介绍完节点，回到话题：如何通过已知节点遍历节点树

三、基于当前元素节点遍历元素节点树

一、创建节点

创建元素节点
document.createElement("div")；//创建div标签
创建文本节点
document.createTextNode("aaa");//创建内容为aaa的文本节点返回
创建注释节点
document.createComment("content") //创建一个注释节点返回
创建属性节点
document.createAttribute()
创建一个 documentFragment 节点:
或者说是用来创建文档碎片节点,用来创建一个虚拟的节点对象
document.createDocumentFragment()

二、插入节点

parent.replaceChild(new,origin)
将某一个子节点替换为另一个，第一个参数：要插入的新元素，第二个：将要被替换的老元素

cloneNode(true/false)
当参数为true：表示复制当前节点及其所以子节点
当参数为false：仅复制当前节点，不复制子节点