DOM
DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML 文档交互的 API。DOM 是载入到浏览器中的文档模型,以节点树的形式来表现文档,每个节点代表文档的构成部分(例如:页面元素、字符串或注释等等)。
DOM 是万维网上使用最为广泛的 API 之一,因为它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建,移动或修改。事件监听器可以被添加到节点上并在给定事件发生时触发。
DOM 并不是天生就被规范好了的,它是浏览器开始实现JavaScript时才出现的。这个传统的 DOM 有时会被称为 DOM 0。现在,WHATWG 维护 DOM 现存标准。
DOM Tree
DOM 是文档对象化模型(Document Object Model)的简称。DOM Tree 是指通过 DOM 将 HTML 页面进行解析,并生成的 HTML tree 树状结构和对应访问方法。
DOM Node
Node 对象
Node 对象是整个 DOM 的主要数据类型。
节点对象代表文档树中的一个单独的节点。
节点可以是元素节点、属性节点、文本节点,或者也可以是“节点类型”那一节中所介绍的任何一种节点。
请注意,虽然所有的对象均能继承用于处理父节点和子节点的属性和方法,但是并不是所有的对象都拥有父节点或子节点。例如,文本节点不能拥有子节点,所以向类似的节点添加子节点就会导致 DOM 错误。
Node 对象的属性
属性 | 描述 |
---|---|
baseURI | 返回节点的绝对基准 URI。 |
childNodes | 返回节点到子节点的节点列表。 |
firstChild | 返回节点的首个子节点。 |
lastChild | 返回节点的最后一个子节点。 |
localName | 返回节点的本地名称。 |
namespaceURI | 返回节点的命名空间 URI。 |
nextSibling | 返回节点之后紧跟的同级节点。 |
nodeName | 返回节点的名称,根据其类型。 |
nodeType | 返回节点的类型。 |
nodeValue | 设置或返回节点的值,根据其类型。 |
ownerDocument | 返回节点的根元素(document 对象)。 |
parentNode | 返回节点的父节点。 |
prefix | 设置或返回节点的命名空间前缀。 |
previousSibling | 返回节点之前紧跟的同级节点。 |
textContent | 设置或返回节点及其后代的文本内容。 |
text | 返回节点及其后代的文本(IE 独有的属性)。 |
xml | 返回节点及其后代的 XML(IE 独有的属性)。 |
Node 对象的方法
方法 | 描述 |
---|---|
appendChild() | 向节点的子节点列表的结尾添加新的子节点。 |
cloneNode() | 复制节点。 |
compareDocumentPosition() | 对比两个节点的文档位置。 |
getFeature(feature,version) | 返回一个 DOM 对象,此对象可执行带有指定特性和版本的专门的 API。 |
getUserData(key) | 返回与此节点上的某个键相关联的对象。此对象必须首先通过使用相同的键来调用 setUserData 被设置到此节点。 |
hasAttributes() | 判断当前节点是否拥有属性。 |
hasChildNodes() | 判断当前节点是否拥有子节点。 |
insertBefore() | 在指定的子节点前插入新的子节点。 |
isDefaultNamespace(URI) | 返回指定的命名空间 URI 是否为默认。 |
isEqualNode() | 检查两个节点是否相等。 |
isSameNode() | 检查两个节点是否是相同的节点。 |
isSupported() | 返回当前节点是否支持某个特性。 |
lookupNamespaceURI() | 返回匹配指定前缀的命名空间 URI。 |
lookupPrefix() | 返回匹配指定命名空间 URI 的前缀。 |
normalize() | 合并相邻的Text节点并删除空的Text节点。 |
removeChild() | 删除(并返回)当前节点的指定子节点。 |
replaceChild() | 用新节点替换一个子节点。 |
selectNodes() | 用一个 XPath 表达式查询选择节点。 |
selectSingleNode() | 查找和 XPath 查询匹配的一个节点。 |
transformNode() | 使用 XSLT 把一个节点转换为一个字符串。 |
transformNodeToObject() | 使用 XSLT 把一个节点转换为一个文档。 |
setUserData(key,data,handler) | 把对象关联到节点上的一个键上。 |
DOM Query
document.querySelector()
文档对象模型Document
引用的 querySelector()
方法返回文档中与指定选择器或选择器组匹配的第一个 Element
对象。如果找不到匹配项,则返回null
。
element = document.querySelector(selectors);
selectors
:包含一个或多个要匹配的选择器的 DOM 字符串DOMString。该字符串必须是有效的 CSS 选择器字符串;如果不是,则引发SYNTAX_ERR异常。
document.querySelectorAll()
返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList
。
elementList = parentNode.querySelectorAll(selectors);
selectors
:一个 DOMString 包含一个或多个匹配的选择器。这个字符串必须是一个合法的 CSS selector 如果不是,会抛出一个 SyntaxError 错误。
document.getElementById()
Document
的方法 getElementById()
返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特定元素的方法。
如果需要查找到那些没有 ID 的元素,你可以考虑通过 CSS 选择器使用 querySelector()
。
getElementById(id)
id
:所要查找的元素的 ID。ID 是大小写敏感的字符串,且在文档中是唯一的;应只有一个元素具有任何给定的 ID。
document.getElementsByClassName()
返回一个包含了所有指定类名的子元素的类数组对象。当在 document 对象上调用时,会搜索整个 DOM 文档,包含根节点。你也可以在任意元素上调用getElementsByClassName()
方法,它将返回的是以当前元素为根节点,所有指定类名的子元素。
var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);
- elements 是一个实时
集合
,包含了找到的所有元素。 - names 是一个字符串,表示要匹配的类名列表;类名通过空格分隔
- getElementsByClassName 可以在任何元素上调用,不仅仅是 document。调用这个方法的元素将作为本次查找的根元素。
document.getElementsByTagName()
返回一个包括所有给定标签名称的元素的 HTML 集合HTMLCollection
。整个文件结构都会被搜索,包括根节点。返回的 HTML 集合
是动态的,意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用 document.getElementsByTagName()
。
var elements = document.getElementsByTagName(name);
elements
是一个由发现的元素出现在树中的顺序构成的动态的 HTML 集合HTMLCollection
(但是看下面的提示) 。name
是一个代表元素的名称的字符串。特殊字符 “*” 代表了所有元素。
DOM Properties
- 通过JS设置/修改标签元素属性,比如通过src更换图片。
- 常见的属性比如:href、title、src等。
- 语法:
元素对象.属性 = 值
例:
// 1. 获取图片元素
const img = document.querySelector('img')
// 2. 修改图片对象的属性 对象.属性 = 值
img.src = './images/2.webp'
DOM Modify
对象.innerText属性:
- 将文本内容添加/更新到任意标签位置。
- 显示纯文本,不解析标签。
div.innerText = '文字内容'
例:
const box = document.querySelector('.box')
console.log(box.innerText) // 获取文字内容
box.innerText = '我是一个盒子' // 修改文字内容
对象.innerHTML属性
- 将文本内容添加/更新到任意标签位置。
- 会解析标签,多标签建议使用模板字符串。
div.innerHTML = '文字内容'
例:
const box = document.querySelector('.box')
console.log(box.innerHTML) // 获取标签内容
box.innerHTML = '<strong>我要更换</strong>' // 设置标签内容
Styles
语法:
对象.style.样式属性 = '值'
例:
// 1. 获取元素
const box = document.querySelector('.box')
//2. 修改样式属性 对象.style.样式属性 = '值' 别忘了跟单位
box.style.width = '300px'
// 多组单词的采取 小驼峰命名法
box.style.backgroundColor = 'hotpink'
box.style.border = '2px solid blue'
box.style.borderTop = '2px solid red'
注意:
- 修改样式通过
style
属性引出,权重比较高。 - 如果属性有-连接符,需要转换为
小驼峰
命名法。 - 赋值的时候,需要的时候不要忘记加
CSS单位
。 修改的是行内样式
。
Coordinates、Element Scrolling
事件名称 | 触发方式 |
---|---|
load | 加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件 |
DOMContentLoaded | DOM完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像等完全加载 |
scroll | 滚动条在滚动的时候持续触发的事件 |
DOM Events
HTML 事件的例子:
- 当用户点击鼠标时
- 当网页加载后
- 当图像加载后
- 当鼠标移至元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户敲击按键时
鼠标事件
事件名称 | 触发方式 |
---|---|
click | 鼠标点击 |
mouseenter | 鼠标经过 |
mouseleave | 鼠标离开 |
焦点事件
事件名称 | 触发方式 |
---|---|
focus | 获得焦点 |
blur | 失去焦点 |
键盘事件
事件名称 | 触发方式 |
---|---|
Keydown | 键盘按下触发 |
Keyup | 键盘抬起触发 |
输入框事件
事件名称 | 触发方式 |
---|---|
input | 用户输入触发 |
change | 输入框内容改变触发 |