【WEB】基础回顾：什么是DOM和DOM的基本操作

原文链接

译文链接

什么是DOM？

---

DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口，定义了访问和操作HTML的文档的标准。

W3C文档对象模型是中立于平台和语言之间的接口，它允许程序和脚本动态的访问和更新文档的内容、结构、样式。总之HTML是关于如何获取、修改、添加和删除HTML元素的标准。

DOM分层节点

---

DOM分层节点一般称作DOM树，节点都能被JS访问，能被创建、删除和添加。

DOM树的特点：

• 整个文档是一个DOM树
• 每个元素都是一个节点
• 元素内的文本也是一个节点
• 每个元素属性是属性节点

访问页面时，浏览器会解析每个HTML元素，创建HTML文档的虚拟结构，并将其保存在内存中。HTML页面会被转换成树结构，每个HTML元素会成为叶子节点，连接到父分支。

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不是对象。

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

DOM常用方法

---

// 通过id号来获取元素，返回一个元素对象
document.getElementById(idName)

// 通过name属性获取id号，返回元素对象数组 
document.getElementsByName(name)

// 通过class来获取元素，返回元素对象数组
document.getElementsByClassName(className)

// 通过标签名获取元素，返回元素对象数组
document.getElementsByTagName(tagName)

// 括号传入属性名，返回对应属性的属性值
element.getAttribute(attributeName)

// 传入属性名及设置的值
element.setAttribute(attributeName,attributeValue)

// 创建一个html元素，这里以创建h3元素为例
document.createElement("h3")

// 创建一个文本节点；
document.createTextNode(String);

// 创建一个属性节点，这里以创建class属性为例
document.createAttribute("class");

// 往element内部最后面添加一个节点，参数是节点类型
element.appendChild(Node);

// 在element内部的中在existingNode前面插入newNode
elelment.insertBefore(newNode,existingNode);

//删除当前节点下指定的子节点，删除成功返回该被删除的节点，否则返回null
element.removeChild(Node)

// 返回当前元素的父节点对象
element.parentNode

// 返回当前元素所有子元素节点对象，只返回HTML节点
element.chlidren

// 返回当前元素多有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点）
element.chilidNodes

// 返回当前元素的第一个子节点对象
element.firstChild

// 返回当前元素的最后一个子节点对象
element.lastChild

// 返回当前元素的下一个同级元素 没有就返回null
element.nextSibling

// 返回当前元素上一个同级元素 没有就返回 null
element.previousSibling

// 返回元素的所有文本，包括html代码
element.innerHTML

// 返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码
element.innerText

// 返回节点的类型,数字形式（1-12）
// 常见几个1：元素节点，2：属性节点，3：文本节点。
element.nodeType

// 设置元素的样式时使用style
element.style.color=“#eea”;