常用DOM的API总结

515 阅读14分钟

1 DOM的定义

DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。
它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(比如增删内容)。

浏览器会根据 DOM 模型,将结构化文档(比如 HTML 和 XML)解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。
所有的节点和最终的树状结构,都有规范的对外接口。

一方面,DOM 操作是 JavaScript 最常见的任务,离开了 DOM,JavaScript 就无法控制网页。
另一方面,JavaScript 也是最常用于 DOM 操作的语言。

2 DOM的最小组成单位——节点(Node)

文档的树形结构(DOM 树),就是由各种不同类型的节点组成。
浏览器提供一个原生的节点对象Node,以下7种常用节点都继承Node,因此具有一些共同的属性和方法

类型 常量 NodeType值 描述
元素节点 Node.ELEMENT_NODE 1 一个 元素 节点,例如 <p><div>
属性节点 Node.ATTRIBUTE_NODE 2 一个属性节点
文本节点 Node.TEXT_NODE 3 Element 或者 Attr 中实际的  文字
注释节点 Node.COMMENT_NODE 8 一个 Comment 节点。
文档节点 Node.DOCUMENT_NODE 9 一个 Document 节点。
文档类型节点 Node.DOCUMENT_TYPE_NODE 10 描述文档类型的 DocumentType 节点。例如 <!DOCTYPE html>  就是用于 HTML5 的。
文档片段节点 Node.DOCUMENT_FRAGMENT_NODE 11 一个 DocumentFragment 节点

2.1 节点树

文档的第一层有两个节点,第一个是文档类型节点<!doctype html>),第二个是 HTML 网页的顶层容器标签<html>
<html>构成了树结构的根节点(root node),其他 HTML 标签节点都是它的下级节点。

image.png

2.2 Node属性

一张图介绍Node的属性:

Node.prototype.png

总结

对上面介绍的API进行总结:

Node.nodeName   //返回节点名称
Node.nodeType   //返回节点类型的常数值
Node.nodeValue  //返回Text或Comment节点的文本值
Node.textContent  //返回当前节点和它的所有后代节点的文本内容,可读写
Node.baseURI    //返回当前网页的绝对路径
Node.ownerDocument  //返回当前节点所在的顶层文档对象,即document
Node.nextSibling  //返回紧跟在当前节点后面的第一个兄弟节点
Node.previousSibling  //返回当前节点前面的、距离最近的一个兄弟节点
Node.parentNode   //返回当前节点的父节点
Node.parentElement  //返回当前节点的父Element节点
Node.childNodes   //返回当前节点的所有子节点
Node.firstChild  //返回当前节点的第一个子节点
Node.lastChild   //返回当前节点的最后一个子节点
Node.isconnecoted   //返回一个布尔值,表示当前节点是否在文档之中

2.3 Node方法

一张图介绍Node的方法:

Node方法.png

总结

对上面介绍的API进行总结:

Node.appendChild(node)   //向节点添加最后一个子节点
Node.hasChildNodes()   //返回布尔值,表示当前节点是否有子节点
Node.cloneNode(true);  // 默认为false(克隆节点), true(克隆节点及其属性,以及后代)
Node.insertBefore(newNode,oldNode)  // 在指定子节点之前插入新的子节点
Node.removeChild(node)   //删除节点,在要删除节点的父节点上操作
Node.replaceChild(newChild,oldChild)  //替换节点
Node.contains(node)  //返回一个布尔值,表示参数节点是否为当前节点的后代节点。
Node.compareDocumentPosition(node)   //返回一个7个比特位的二进制值,表示参数节点和当前节点的关系
Node.isEqualNode(node)  //返回布尔值,用于检查两个节点是否相等。所谓相等的节点,指的是两个节点的类型相同、属性相同、子节点相同。
Node.isSameNode(node)  //返回一个布尔值,表示两个节点是否为同一个节点。
Node.normalize()   //用于清理当前节点内部的所有Text节点。它会去除空的文本节点,并且将毗邻的文本节点合并成一个。
Node.getRootNode()  //返回当前节点所在文档的根节点document,与ownerDocument属性的作用相同。

3 NodeList接口

3.1 介绍

NodeList实例是一个类似数组的对象,它的成员是节点对象。
通过以下方法可以得到NodeList实例:

  • Node.childNodes
  • document.querySelectorAll()等节点搜索方法

举例:

document.body.childNodes instanceof NodeList // true


注意:

  • NodeList实例很像数组,可以使用length属性和forEach方法。但是,它不是数组,不能使用poppush之类数组特有的方法。
  • 只有Node.childNodes返回的是一个动态集合,其他的 NodeList 都是静态集合。
  • 如果NodeList实例要使用数组方法,可以将其转为真正的数组。

举例:

var children = document.body.childNodes;
var nodeArr = Array.prototype.slice.call(children);
//也可以为
var nodeArr = Array.from(children);

3.2 NodeList方法

一张图介绍NodeList的方法:

NodeList方法.png

总结

对上面介绍的API进行总结:

Node.length   //返回 NodeList 实例包含的节点数量
Node.forEach(fn,this)   //用于遍历 NodeList 的所有成员
Node.item(index) // 接受一个整数值作为参数,表示成员的位置,返回该位置上的成员
Node.keys()  //返回键名的遍历器
Node.values()   //返回键值的遍历器
Node.entries()  //返回的遍历器同时包含键名和键值的信息

4 HTMLCollection 接口

4.1 介绍

HTMLCollection是一个节点对象的集合,只能包含元素节点(element),不能包含其他类型的节点。
它的返回值是一个类似数组的对象,但是与NodeList接口不同,HTMLCollection没有forEach方法,只能使用for循环遍历。

注意:

  • HTMLCollection实例都是动态集合,节点的变化会实时反映在集合中。
  • 如果元素节点有idname属性,那么HTMLCollection实例上面,可以使用id属性或name属性引用该节点元素。如果没有对应的节点,则返回null

举例:

// HTML 代码如下
// <img id="pic" src="http://example.com/foo.jpg">
var pic = document.getElementById('pic');
document.images.pic === pic // true

上例中,document.images是一个HTMLCollection实例,可以通过<img>元素的id属性值,从HTMLCollection实例上取到这个元素。

4.2 HTMLCollection方法

一张图介绍HTMLCollection的方法:

HTMLCollection方法.png

总结

对上面介绍的API进行总结:

Node.length   //返回HTMLCollection实例包含的成员数量
Node.item(index) // 接受一个整数值作为参数,表示成员的位置,返回该位置上的成员
Node.namedItem(string)   //参数是一个字符串,表示id属性或name属性的值,返回对应的元素节点

5 ParentNode 接口,ChildNode 接口

5.1 ParentNode 接口

如果当前节点是父节点,就会混入了(mixin)ParentNode接口。
由于只有元素节点(element)、文档节点(document)和文档片段节点(documentFragment)拥有子节点,因此只有这三类节点会拥有ParentNode接口。

5.2 ChildNode 接口

如果一个节点有父节点,那么该节点就拥有了ChildNode接口。

5.3 相关属性及方法

ParentNode 接口,ChildNode 接口.png

总结

对上面介绍的API进行总结:

//parentNode接口
Node.children  //返回指定节点的所有Element子节点
Node.firstElementChild  //返回当前节点的第一个Element子节点
Node.lastElementChild   //返回当前节点的最后一个Element子节点
Node.childElementCount  //返回当前节点所有Element子节点的数目
Node.append()  //为当前节点追加一个或多个子节点,位置是最后一个元素子节点的后面。
Node.prepend()   //为当前节点追加一个或多个子节点,位置是第一个元素子节点的前面。

//ChildNode接口
Node.remove()  //用于从父节点移除当前节点
Node.before()  //用于在当前节点的前面,插入一个或多个同级节点。两者拥有相同的父节点。
Node.after()   //用于在当前节点的后面,插入一个或多个同级节点,两者拥有相同的父节点。
Node.replaceWith()  //使用参数节点,替换当前节点

6 Document 节点

6.1 介绍

document节点对象代表整个文档,每张网页都有自己的document对象。
window.document属性就指向这个对象。
只要浏览器开始载入 HTML 文档,该对象就存在了,可以直接使用。

document对象有不同的办法可以获取。

  • 正常的网页,直接使用documentwindow.document
  • iframe框架里面的网页,使用iframe节点的contentDocument属性。
  • Ajax 操作返回的文档,使用XMLHttpRequest对象的responseXML属性。
  • 内部节点的ownerDocument属性。

6.2 Document 属性

Document属性.png

总结

对上面介绍的API进行总结:

//快捷方式属性
document.defaultView //返回document对象所属的window对象
document.doctype   //返回文档类型节点
document.documentElement  //返回当前文档的根节点
document.body   //返回当前文档的<body>节点
document.head   //返回当前文档的<head>节点
document.activeElement  //返回当前文档中获得焦点的那个元素
document.fullscreenElement  //返回当前以全屏状态展示的 DOM 元素

//节点集合属性
document.links  //返回当前文档的所有a元素
document.forms  //返回页面中所有表单元素
document.images  //返回页面中所有图片元素
document.embeds  //返回网页中所有嵌入对象
document.scripts  //返回当前文档的所有脚本
document.styleSheets  //返回当前网页的所有样式表

//文档静态信息属性
document.documentURI  //表示当前文档的网址
document.URL  //返回当前文档的网址
document.domain  //返回当前文档的域名
document.lastModified  //返回当前文档最后修改的时间
document.location  //返回location对象,提供当前文档的URL信息
document.referrer  //返回当前文档的访问来源
document.title    //返回当前文档的标题
document.compatMode  //返回浏览器处理文档的模式
document.characterSet  //返回渲染当前文档的字符集,比如UTF-8、ISO-8859-1

//文档状态属性
document.readyState  //返回当前文档的状态
document.hidden  //返回一个布尔值,表示当前页面是否可见
document.visibilityState  //返回文档的可见状态

//其他属性
document.cookie   //用来操作Cookie
document.designMode  //控制当前文档是否可编辑,可读写
document.currentScript  //返回当前脚本所在的那个 DOM 节点,即<script>元素的 DOM 节点
document.implementation  //返回一个DOMImplementation对象

6.3 Document 方法

Document 方法.png

总结

对上面介绍的API进行总结:

//快捷方式属性
document.defaultView //返回document对象所属的window对象
document.doctype   //返回文档类型节点
document.documentElement  //返回当前文档的根节点
document.body   //返回当前文档的<body>节点
document.head   //返回当前文档的<head>节点
document.activeElement  //返回当前文档中获得焦点的那个元素
document.fullscreenElement  //返回当前以全屏状态展示的 DOM 元素

//节点集合属性
document.links  //返回当前文档的所有a元素
document.forms  //返回页面中所有表单元素
document.images  //返回页面中所有图片元素
document.embeds  //返回网页中所有嵌入对象
document.scripts  //返回当前文档的所有脚本
document.styleSheets  //返回当前网页的所有样式表

//文档静态信息属性
document.documentURI  //表示当前文档的网址
document.URL  //返回当前文档的网址
document.domain  //返回当前文档的域名
document.lastModified  //返回当前文档最后修改的时间
document.location  //返回location对象,提供当前文档的URL信息
document.referrer  //返回当前文档的访问来源
document.title    //返回当前文档的标题
document.compatMode  //返回浏览器处理文档的模式
document.characterSet  //返回渲染当前文档的字符集,比如UTF-8、ISO-8859-1

//文档状态属性
document.readyState  //返回当前文档的状态
document.hidden  //返回一个布尔值,表示当前页面是否可见
document.visibilityState  //返回文档的可见状态

//其他属性
document.cookie   //用来操作Cookie
document.designMode  //控制当前文档是否可编辑,可读写
document.currentScript  //返回当前脚本所在的那个 DOM 节点,即<script>元素的 DOM 节点
document.implementation  //返回一个DOMImplementation对象

7 Element 节点

7.1 介绍

每一个 HTML 元素,在 DOM 树上都会转化成一个Element节点对象(以下简称元素节点)。
元素节点不是一种对象,而是一组对象,这些对象除了继承Element的属性和方法,还有各自构造函数的属性和方法。

7.2 Element属性

Element属性.png

总结

对上面介绍的API进行总结:

//元素特性相关属性
Element.id  //返回指定元素的id属性,可读写
Element.tagName  //返回指定元素的大写标签名
Element.dir //用于读写当前元素的文字方向
Element.accessKey  //用于读写分配给当前元素的快捷键
Element.draggble //返回一个布尔值,表示当前元素是否可拖动
Element.lang //返回当前元素的语言设置。该属性可读写
Elemnt.tabIndex //返回一个整数,表示当前元素在 Tab 键遍历时的顺序。该属性可读写。 	
Element.title  //用来读写当前元素的 HTML 属性title
Element.attributes  //返回当前元素节点的所有属性节点
Element.className  //返回当前元素的class属性,可读写
Element.classList  //返回当前元素节点的所有class集合
Element.innerHTML   //返回该元素包含的HTML代码,可读写
Element.outerHTML  //返回指定元素节点的所有HTML代码,包括它自身和包含的的所有子元素,可读写
Element.dataset   //返回元素节点中所有的data-*属性

//元素状态的相关属性
Element.hidden //返回一个布尔值,表示当前元素的hidden属性,用来控制当前元素是否可见。该属性可读写
Element.contentEditable //返回一个字符串,表示是否设置了contenteditable属性
Element.iscontentEditable //返回一布尔值,表示是否设置了contenteditable属性,只读

//尺寸属性
Element.clientHeight   //返回元素节点可见部分的高度
Element.clientWidth   //返回元素节点可见部分的宽度
Element.clientLeft   //返回元素节点左边框的宽度
Element.clientTop   //返回元素节点顶部边框的宽度
Element.scrollHeight  //返回元素节点的总高度
Element.scrollWidth  //返回元素节点的总宽度
Element.scrollLeft   //返回元素节点的水平滚动条向右滚动的像素数值,通过设置这个属性可以改变元素的滚动位置
Element.scrollTop   //返回元素节点的垂直滚动向下滚动的像素数值
Element.offsetParent  //返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素
Element.offsetHeight   //返回元素的垂直高度(包含border,padding)
Element.offsetWidth    //返回元素的水平宽度(包含border,padding)
Element.offsetLeft    //返回当前元素左上角相对于Element.offsetParent节点的垂直偏移
Element.offsetTop   //返回水平位移
Element.style  //返回元素节点的行内样式

//节点相关属性
Element.children   //包括当前元素节点的所有子元素
Element.childElementCount   //返回当前元素节点包含的子HTML元素节点的个数
Element.firstElementChild  //返回当前节点的第一个Element子节点  
Element.lastElementChild   //返回当前节点的最后一个Element子节点  
Element.nextElementSibling  //返回当前元素节点的下一个兄弟HTML元素节点
Element.previousElementSibling  //返回当前元素节点的前一个兄弟HTML节点

7.3 Element方法

Element方法.png

总结

对上面介绍的API进行总结:

//属性方法
Element.getAttribute():读取指定属性  
Element.getAttributeNames():返回当前元素的所有属性名
Element.setAttribute():设置指定属性  
Element.hasAttribute():返回一个布尔值,表示当前元素节点是否有指定的属性  
Element.hasAttributes():当前元素是否有属性
Element.removeAttribute():移除指定属性

//查找方法
Element.querySelector()   //接受 CSS 选择器作为参数,返回父元素的第一个匹配的子元素
Element.querySelectorAll() //接受 CSS 选择器作为参数,返回一个NodeList实例,包含所有匹配的子元素
Element.getElementsByTagName()  //返回一个HTMLCollection实例,成员是当前节点的所有匹配指定标签名的子元素节点
Element.getElementsByClassName()  //返回一个HTMLCollection实例,成员是当前元素节点的所有具有指定 class 的子元素节点
Element.closest() //接受一个 CSS 选择器作为参数,返回匹配该选择器的、最接近当前节点的一个祖先节点(包括当前节点本身)

//事件方法
Element.addEventListener():添加事件的回调函数  
Element.removeEventListener():移除事件监听函数  
Element.dispatchEvent():触发事件

//其他
Element.matches() //返回一个布尔值,表示当前元素是否匹配给定的 CSS 选择器
Element.scrollIntoView()   //滚动当前元素,进入浏览器的可见区域
Element.getBoundingClientRect()  //返回一个对象,包含top,left,right,bottom,width,height
Element.getClientRects()   //返回当前元素在页面上形参的所有矩形

//解析HTML字符串,然后将生成的节点插入DOM树的指定位置
Element.insertAdjacentHTML(where, htmlString); 
Element.insertAdjacentHTML('beforeBegin', htmlString); // 在该元素前插入  
Element.insertAdjacentHTML('afterBegin', htmlString); // 在该元素第一个子元素前插入 
Element.insertAdjacentHTML('beforeEnd', htmlString); // 在该元素最后一个子元素后面插入 
Element.insertAdjacentHTML('afterEnd', htmlString); // 在该元素后插入

Element.remove()  //用于将当前元素节点从DOM中移除
Element.focus()   //用于将当前页面的焦点,转移到指定元素上
Element.blur()  //用于将焦点从当前元素移除