什么是DOM及DOM操作？
什么是 DOM ?
DOM(⽂档对象模型)是针对于xml但是扩展⽤于html的应⽤程序编程接⼝，定义了访问和操作html的⽂档的标准。
W3C⽂档对象模型是中⽴于平台和语⾔之间的接⼝，它允许程序和脚本动态的访问和更新⽂档的内容、结构、样式。总之HTML是关于如何获取、修改、添加和删除HTML元素的标准。
DOM 分层节点
DOM的分层节点⼀般被称作是DOM树，树中的所有节点都可以通过脚本语⾔例如js进⾏访问，所有HTMlL元素节点都可以被创建、添加或者删除。
在DOM分层节点中，页⾯就是⽤分层节点图表⽰的。
整个⽂档是⼀个⽂档节点，就想是树的根⼀样。
jquery是什么有什么作用每个HTML元素都是元素节点。
HTML元素内的⽂本就是⽂本节点。
每个HTML属性时属性节点。
当咱们访问⼀个web页⾯时，浏览器会解析每个HTML元素，创建了HTML⽂档的虚拟结构，并将其保存在内存中。接着，HTML页⾯被转换成树状结构，每个HTML元素成为⼀个叶⼦节点，连接到⽗分⽀。
考虑以下 Html 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<title>A super simple title!</title>
</head>
<body>
<h1>A super simple web page!</h1>
</body>
</html>
在这个结构的顶部有⼀个document，也称为根元素，它包含另⼀个元素：html。 html元素包含⼀个head，⽽ head ⼜有⼀个title。然后body 包含⼀个h1。每个HTML元素都由特定类型（也称为接⼝）表⽰，并且可能包含⽂本或其他嵌套元素：
document (HTMLDocument)
|
| --> html (HTMLHtmlElement)
|
| --> head (HtmlHeadElement)
|      |
|      | --> title (HtmlTitleElement)
|                | --> text: "A super simple title!"
|
| --> body (HtmlBodyElement)
|      |
|      | --> h1 (HTMLHeadingElement)
|              | --> text: "A super simple web page!"
每个HTML元素都来⾃Element，但其中很⼤⼀部分都是专⽤的。咱们可以检查原型以查元素所属的“种类”。例如，h1元素是HTMLHeadingElement：
document.querySelector('h1').__proto__
// Output: HTMLHeadingElement
⽽HTMLHeadingElement则是HTMLElement的后代:
document.querySelector('h1').__proto__.__proto__
// Output: HTMLElement
此时（特别是初学者）可能会对document和window之间的区别产⽣⼀些混淆。接下来看看它们有何不同！
document 和 window 之间的区别
简单来说，document是window的⼀个对象属性。window 对象表⽰浏览器中打开的窗⼝。如果⽂档包含框架（frame 或 iframe 标签），浏
览器会为 HTML ⽂档创建⼀个 window 对象，并为每个框架创建⼀个额外的 window 对象。所有的全局函数和对象都属于 window 对象的属性和⽅法。
区别:
1. window 指窗体。document指页⾯。document是window的⼀个⼦对象。
2. ⽤户不能改变 document.location(因为这是当前显⽰⽂档的位置)。但是，可以改变window.location(⽤其它⽂档取代当前⽂
档)window.location本⾝也是⼀个对象,⽽document.location不是对象。
document接⼝有许多实⽤⽅法，⽐如querySelector()，它是⽤于查给定页⾯内HTML元素的⽅法：
document.querySelector('h1');
window表⽰当前的浏览器，下⾯代码与上⾯等价：
window.document.querySelector('h1');
当然，更常见的是⽤第⼀种⽅式。
window是⼀个全局对象，可以从浏览器中运⾏的任何js代码直接访问。 window暴露了很多属性和⽅法，如：
window.alert('Hello world'); // Shows an alert
window.setTimeout(callback, 3000); // Delay execution
window.fetch(someUrl); // make XHR requests
window.open(); // Opens a new tab
window.location; // Browser location
window.history; // Browser history
window.navigator; // The actual user agent
window.document; // The current page
因为这些属性和⽅法也是全局的，所以也可以这样访问它们
alert('Hello world'); // Shows an alert
setTimeout(callback, 3000); // Delay execution
fetch(someUrl); // make XHR requests
open(); // Opens a new tab
location; // Browser location
history; // Browser history
navigator; // The actual user agent
document;// The current page
其中有些咱们都已经很熟悉了，如setTimeout() 的⽅法。例如，当咱们想要得知当前⽤户的浏览器语⾔时，window.navigator就⾮常有⽤：
if (window.navigator) {
var lang = window.navigator.language;
if (lang === "en-US") {
// show something
}
if (lang === "it-IT") {
// show something else
}
}
DOM 常⽤⽅法
获取节点
// 通过id号来获取元素，返回⼀个元素对象
// 通过name属性获取id号，返回元素对象数组
// 通过class来获取元素，返回元素对象数组
// 通过标签名获取元素，返回元素对象数组
获取/设置元素的属性值：
// 括号传⼊属性名，返回对应属性的属性值
// 传⼊属性名及设置的值
element.setAttribute(attributeName,attributeValue)
创建节点Node
// 创建⼀个html元素，这⾥以创建h3元素为例
// 创建⼀个⽂本节点；
// 创建⼀个属性节点，这⾥以创建class属性为例
增添节点
// 往element内部最后⾯添加⼀个节点，参数是节点类型
element.appendChild(Node);
// 在element内部的中在existingNode前⾯插⼊newNode
elelment.insertBefore(newNode,existingNode);
删除节点
//删除当前节点下指定的⼦节点，删除成功返回该被删除的节点，否则返回veChild(Node)
DOM常⽤属性
获取当前元素的⽗节点
// 返回当前元素的⽗节点对象
element.parentNode
获取当前元素的⼦节点
// 返回当前元素所有⼦元素节点对象，只返回HTML节点
element.chlidren
// 返回当前元素多有⼦节点，包括⽂本，HTML，属性节点。（回车也会当做⼀个节点）element.chilidNodes
// 返回当前元素的第⼀个⼦节点对象
element.firstChild
// 返回当前元素的最后⼀个⼦节点对象
element.lastChild
获取当前元素的同级元素
// 返回当前元素的下⼀个同级元素没有就返回null
// 返回当前元素上⼀个同级元素没有就返回 null
element.previousSibling
获取当前元素的⽂本
// 返回元素的所有⽂本，包括html代码
element.innerHTML
// 返回当前元素的⾃⾝及⼦代所有⽂本值，只是⽂本内容，不包括html代码element.innerText
获取当前节点的节点类型
// 返回节点的类型，数字形式（1-12）
// 常见⼏个1：元素节点，2：属性节点，3：⽂本节点。
设置样式
// 设置元素的样式时使⽤style
lor=“#eea”;
DOM 操作
DOM中的每个HTML元素也是⼀个节点，可以像这样查节点：
document.querySelector('h1').nodeType;
上⾯会返回1，它是Element类型的节点的标识符，还可以检查节点名称：
document.querySelector('h1').nodeName;
"H1"
上⾯的⽰例返回⼤写的节点名。但是需要理解的最重要的概念是，咱们主要使⽤DOM中的两种类型的节点：
元素节点
⽂本节点
创建元素节点，可以通过 createElement⽅法：
var heading = ateElement('h1');
创建⽂本节点，可能通过 createTextNode ⽅法：
var text = ateTextNode('Hello world');
接着将两个节点组合在⼀起，然后添加到 body 上：
var heading = ateElement('h1');
var text = ateTextNoe('Hello world');
heading.appendChild(text);
document.body.appendChild(heading)
在学习Dom操作时候，这些⽅法需要牢记并熟练使⽤的。
⽬前像咱们⽤这种⽅式创建和操作元素，是属于命令式DOM操作。现代前端库通过⽀持声明性⽅法来解决这个问题，如 JQuery，咱们可以声明需要什么HTML元素，其它就由库来完成。
DOM 操作和 jQuery
⼤部分可能会想，咱们直接使⽤ JQ 不就⾏了，为啥还要⽤如createElement这些原⽣的⽅法，多费劲。
请注意jQuery正在渐渐消失。Bootstrap 5将把它从依赖项中删除，还有很多项⽬也在删除它。这背后有⼀个合理的原因：原⽣DOM API提供了⼤量像JQ这样操作DOM的简便⽅法，⾜以替代jQuery⼀些常⽤的DOM操作。
如果只是想进⾏简单的交互和操作，请使⽤普通的JS。咱们甚⾄可以创建⾃⼰的迷你框架来抽象最常见的操作：创建元素、追加、创建⽂本。
总结
DOM是浏览器创建并保留在内存中的⽹页的虚拟副本。创建、修改、删除 HTML 元素，这些属于 “DOM 操作”。在过去即使对于更简单的任务，咱们也要依赖于 jQuery，但今天原⽣ API 已经互相兼容并且⾜够成熟⾜以替代 jQuery 了。
jQuery不会很快消失，但是每个JS开发⼈员都必须知道如何使⽤原⽣API操作DOM。这样做有很多原因，额外的库增加了JS应⽤程序的加载时间和⼤⼩，更不⽤说DOM操作在技术⾯试也经常出现。
操作 DOM 最常⽤的⽅法是 ateElement() ⽤于创建新的 HTML 元素，ateTextNode() ⽤于在 DOM 内创建⽂本节点。需要注意的是 .appendChild() ⽤于将新的 HTML 元素或⽂本节点附加到现有元素。
虽然很好的了解本机 API 是很好的，但是现代前端库也提供了⽆可置疑的好处。尽管⽤“原⽣” JS 去构建⼤型JS 程序确实是可⾏的，但有时Angular、react、vue可以提供很多帮助。仅使⽤ JavaScript 来处理更简单的原型和中⼩型应⽤也是明智之举。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。