基础系列-DOM

参考阅读:

MDN

《JavaScript 高级程序设计-第四版》- 第15章

DOM(文档对象模型)

dom 是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。

节点层次

dom 可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。

节点分为几种不同的类型,每种类型分别表示文档中不同的信息及标记。

每个节点都拥有各自的特点、数据和方法,另外也与其他节点存在某种关系。

节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构。

文档节点是每个文档的根节点。<html>元素是文档元素,文档元素是文档的最外层元素,文档中其他所有元素都包含在文档元素中。

Node类型

DOM1级定义了一个Node接口,改接口将由DOM中的所有节点类型实现。

JavaScript 中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法。

每个节点都有一个nodeType属性,用于表明节点的类型。

以下接口都从 Node 继承其方法和属性:

Document, Element, Attr, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction (en-US), DocumentFragment, DocumentType, Notation, Entity, EntityReference

在方法和属性不相关的特定情况下,这些接口可能返回 null。它们可能会抛出异常 - 例如,当将子节点添加到不允许子节点存在的节点时。

类数组NodeList 是实时的活动对象,是一直变化的。

属性

parentNode

childNodes

nodeName:对于元素而言,始终等于元素的标签名

nodeValue:对于元素而言,始终为null

previousSibling

nextSibling

firstChild

lastChild

ownerDocument:是一个指向代表整个文档的文档节点的指针。

方法

hasChildNodes()

appendChild()

insertBefore():如果参照节点是null,则和appendChild()结果相同

replaceChild():要插入的节点和要替换的节点

removeChild():要移除的节点

cloneNode():传入布尔值,表示深拷贝还是浅拷贝。深拷贝则会拷贝子元素,浅拷贝只会拷贝当前元素。

normalize():标准化文本节点,如果是空文本节点则删除,如果是两个相邻的同胞节点则合并为一个文本节点。

Document 类型

继承 Node 类型。

Document 类型是 JavaScript 中表示文档节点的类型。

文档对象 document 是 HTMLDocument 的实例,表示整个 HTML 页面。(HTMLDocument 继承 Document)

document 是 window 对象的属性,因此是一个全局对象。

<html>元素获取:document.documentElement 或 document.childNodes[0] 或 document.firstChild

<body>元素获取:document.body

Document 类型是只读的,只能有一个 Element 类型的子节点,即<html>

属性:

URL

domain

referrer

anchors:获取文档中所有带 name 属性的 <a> 元素

forms:获取文档中所有 <form> 元素

images:获取文档中所有 <img> 元素

links:获取文档中所有带 href 属性的 <a> 元素

implementation:提供了与浏览器 DOM 实现相关的信息和能力

classList:返回一个类数组 DOMTokenList 的实例,可以便捷增删改切换 className。

方法:

getElementById

getElementsByTagName,返回类数组HTMLCollection对象。取得文档所有对象可以使用通配符 * ,getElementsByTagName(*)

HTMLCollection 对象有namedItem() 通过 name 属性获取某一项的引用,也可以使用数字索引或字符串索引,数字索引会调用 item(),字符串索引会调用namedItem()

getElementsByName

write,写入文本

writeIn,写入文本后会自动追加一个换行符

open,打开网页输出流

close,关闭网页输出流

querySelector:接受 CSS 选择器参数,返回匹配改模式的第一个后代元素,如果没有匹配项则返回null。会从document(文档)开始搜索

querySelectorAll

getElementsByClassName:返回匹配一个类或多个类的 NodeList。

Element 类型

Element 类型继承 Node 类型。

Element 表示 XML 或 HTML 元素,对外暴露出访问元素标签名、子节点和属性的能力。

可以通过 nodeName 或 tagName 属性来获取元素的标签名。

所有 HTML 元素都通过 HTMLElement 类型表示,包括其直接实例和间接实例。所有HTML元素都是HTMLElement 或其子类型的实例。

HTMLElement 直接继承 Element 并增加了一些属性。

属性

id

title

lang

dir

className

attributes:属性包含一个类数组 NamedNodeMap 实例

NamedNodeMap 对象包含下列方法:

getNamedItem(name),返回 nodeName 属性等于 name 的节点

removeNamedItem(name),删除 nodeName 属性等于 name 的节点

setNamedItem(node),向列表中添加 attr node 节点,以其 nodeName 为索引。创建属性节点:document.createAttribute()

方法

getAttribute

setAttribute

removeAttribute

属性名不区分大小写

querySelector:接受 CSS 选择器参数,返回匹配改模式的第一个后代元素,如果没有匹配项则返回null。会从当前Element的后台开始搜索。

querySelectorAll:返回一个 NodeList 静态实例。

matches:接受一个CSS选择符参数,如果元素匹配则该选择器返回 true,否则返回 false。

find - 浏览器未实现

findAll - 浏览器未实现

面试题:

HTMLElement、Element、Node 之间的关系