dom(文档对象模型)是web文档的编程接口,它将html或xml文档的结构表示为对象树。借助dom,开发者可以使用javascript与网页交互并操作网页内容。html dom允许javascript更改html元素的内容、属性和样式。

在HTML页面中查找和访问HTML元素的方法:
- 通过ID查找: 例如,ID为"intro"的元素:
const element = document.getElementById("intro");
-
通过标签名查找: 例如,查找所有
标签:
const elements = document.getElementsByTagName("p");
- 通过类名查找: 例如,类名为"intro"的元素:
const elements = document.getElementsByClassName("intro");
-
使用CSS选择器查找:
querySelectorAll()方法可以查找匹配指定CSS选择器的所有HTML元素。例如,查找类名为"intro"的标签:
const elements = document.querySelectorAll("p.intro");
- 通过HTML集合遍历查找:
DOM中的所有内容都是节点,包括元素、文本和属性。
-
元素节点: 代表HTML或XML元素,例如:、
、等。 例如:Hello, world!
- 文本节点: 代表元素内的文本内容。在上面的例子中,“Hello, world!”就是一个文本节点。
创建新的HTML元素(节点):
立即学习“Java免费学习笔记(深入)”;
-
创建元素: 使用
document.createElement()方法创建HTML元素。 -
创建文本节点: 使用
document.createTextNode()方法创建文本节点。 -
将文本添加到元素: 使用
appendChild()方法将文本节点添加到新创建的元素。 -
将元素添加到文档: 使用
appendChild()方法将新创建的元素添加到文档中的某个父元素(例如,)。
示例:
更改HTML样式:
语法:
document.getElementById(id).style.property = newStyle;示例:
Payilagam
(图片描述:点击前后的样式变化)










