前端技术学习路线图-初阶-浏览器-DOM

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

1. 通过JS设置/修改标签元素属性，比如通过src更换图片。
2. 常见的属性比如：href、title、src等。
3. 语法：

元素对象.属性 = 值

例：
// 1. 获取图片元素
const img = document.querySelector('img')
// 2. 修改图片对象的属性   对象.属性 = 值
img.src = './images/2.webp'

DOM Modify

对象.innerText属性：

1. 将文本内容添加/更新到任意标签位置。
2. 显示纯文本，不解析标签。

div.innerText = '文字内容'

例：
const box = document.querySelector('.box')
console.log(box.innerText)  // 获取文字内容
box.innerText = '我是一个盒子' // 修改文字内容

对象.innerHTML属性

1. 将文本内容添加/更新到任意标签位置。
2. 会解析标签，多标签建议使用模板字符串。

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'

注意：

1. 修改样式通过style属性引出，权重比较高。
2. 如果属性有-连接符，需要转换为小驼峰命名法。
3. 赋值的时候，需要的时候不要忘记加CSS单位。
4. 修改的是行内样式。

Coordinates、Element Scrolling

事件名称	触发方式
load	加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
DOMContentLoaded	DOM完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
scroll	滚动条在滚动的时候持续触发的事件

DOM Events

HTML 事件的例子：

• 当用户点击鼠标时
• 当网页加载后
• 当图像加载后
• 当鼠标移至元素上时
• 当输入字段被改变时
• 当 HTML 表单被提交时
• 当用户敲击按键时

鼠标事件

事件名称	触发方式
click	鼠标点击
mouseenter	鼠标经过
mouseleave	鼠标离开

焦点事件

事件名称	触发方式
focus	获得焦点
blur	失去焦点

键盘事件

事件名称	触发方式
Keydown	键盘按下触发
Keyup	键盘抬起触发

输入框事件

事件名称	触发方式
input	用户输入触发
change	输入框内容改变触发