一、什么是 DOM?
文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
二、 DOM树
- 文档：一个页面就是一个文档，DOM 中使用 document 表示
- 元素：页面中的
所有标签都是元素，DOM 中使用 element 表示 -
节点：网页中的
所有内容都是节点（标签、属性、文本、注释等），DOM 中使用node 表示
image.png
DOM把以上内容都看成对象
二、如何操作 DOM?
2.1、创建节点Node
- createElement - 创建元素
- createTextNode - 创建文本节点（元素）
// 创建一个html元素，这里以创建h3元素为例
document.createElement("h3")
// 创建一个文本节点；
document.createTextNode(String);
// 创建一个属性节点，这里以创建class属性为例
document.createAttribute("class");
2.2、增添节点
// 往element内部最后面添加一个节点，参数是节点类型
element.appendChild(Node);
// 在element内部中在existingNode前面插入newNode
elelment.insertBefore(newNode, existingNode);
2.3、删除节点
//删除当前节点下指定的子节点，删除成功返回该被删除的节点，否则返回null
element.removeChild(Node);
2.4、获取节点
- querySelector - 返回单个 Node，IE8+(含），如果匹配到多个结果，只返回第一个。
- querySelectorAll - 返回一个 NodeList ，IE8+(含）。
forms - 获取当前页面所有form，返回一个 HTMLCollection.- getElementById(id) - 获取带有指定 id 的节点（元素）
- getElementsByClassName - 获取带有指定类名的节点（元素），多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容
- getElementsByTagName - 根据标签名称获取元素， 表示查询所有标签，返回一个 HTMLCollection.
- 获取特殊元素（body，html）
- getElementsByName - 获取带有 name 属性的节点（元素），返回一个 NodeList
querySelector()
这个方法返回第一个匹配指定选择器的元素，它可以接收所有 CSS 样式选择器作为参数，即可以通过标签名、.类名或 #ID名 来选择元素。
// 类名查找
const check = document.querySelector(".check");
// id名查找
const again = document.querySelector("#again");
// 标签名查找
const p = document.querySelector("p");
querySelectorAll()
这个方法跟上一个方法类似，区别在于它返回的是包含所有匹配元素的数组。
const modals = document.querySelectorAll(".show-modal");
for (let i = 0; i < modals.length; i++) {
console.log(modals[i]);
}
getElementById()
通过 id 属性来选中元素。由于一个html文件中的id具有唯一性，所以该方法返回唯一匹配的元素。
// id名查找
const again = document.getElementById("again");
getElementsByClassName()
通过class属性来选择元素。返回匹配的元素数组。
// class名查找
const checkList = document.getElementsByClassName("check");
getElementsByTagName()
通过标签名来选择元素。返回匹配的元素数组。
// p标签查找，返回查找p标签元素数组
const pList = document.getElementsByTagName("p");
获取特殊元素（body，html）
document.documentElement; // 返回html元素对象
doucumnet.body; // 返回body元素对象
2.5、获取/设置元素的属性值：
// 括号传入属性名，返回对应属性的属性值
element.getAttribute(attributeName);
// 传入属性名及设置的值
element.setAttribute(attributeName, attributeValue);
三、DOM常用属性
3.1、parentNode获取当前元素的父节点
// 返回当前元素的父节点对象
element.parentNode;
3.2、获取当前元素的子节点
// 返回当前元素所有子元素节点对象，只返回HTML节点
element.chlidren;
// 返回当前元素多有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点）
element.chilidNodes;
// 返回当前元素的第一个子节点对象
element.firstChild;
// 返回当前元素的最后一个子节点对象
element.lastChild;
3.2、获取当前元素的同级元素
// 返回当前元素的下一个同级元素 没有就返回null
element.nextSibling;
// 返回当前元素上一个同级元素 没有就返回 null
element.previousSibling;
3.3、获取当前元素的文本
// 返回元素的所有文本，包括html代码
element.innerHTML;
// 返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码
element.innerText;
3.4、获取当前节点的节点类型
// 返回节点的类型,数字形式（1-12）
// 常见几个1：元素节点，2：属性节点，3：文本节点。
node.nodeType;
3.5、设置样式
// 设置元素的样式时使用style
element.style.color = "#ffffff";
在学习Dom操作时候，这些方法需要牢记并熟练使用的。
网友评论