JS的DOM 概念以及操作

一、什么是 DOM?

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

二、DOM树

• 文档：一个页面就是一个文档，DOM 中使用 document 表示
• 元素：页面中的所有标签都是元素，DOM 中使用 element 表示
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用node 表示

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.3、获取当前元素的同级元素

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

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

3.4、获取当前元素的文本

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

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

3.5、获取当前节点的节点类型

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

3.6、设置样式

// 设置元素的样式时使用style
element.style.color = "#ffffff";

在学习Dom操作时候，这些方法需要牢记并熟练使用的。