JavaScript DOM
什么是 DOM
- 在
Web 开发中，DOM 通常和 JavaScript 一起使用。
- 当网页被加载时，浏览器会创建页面的文档对象模型，也就是
DOM，全称 Document Object Model。
- 每个
HTML 或 XML 文档都可以被看作一棵文档树。
- 文档树是整个文档层次结构的表示。
- 文档节点是整个文档树的根节点。
DOM 为这棵文档树提供了编程接口，开发者可以使用 JavaScript 来操作页面结构。
节点树理解
- 整个页面可以理解成一棵树。
- 根节点通常是
<html>。
- 根节点下面通常分为
<head> 和 <body>。
- 再往下会有标题、链接、文本、属性等不同节点。
常见 DOM 获取方式
通过 ID 获取元素
1
| document.getElementById("box1");
|
通过 class 获取元素
1
| document.getElementsByClassName("box2");
|
- 返回
HTMLCollection 集合。
- 可能有多个元素，通常需要通过下标访问。
通过标签名获取元素
1
| document.getElementsByTagName("div");
|
- 也返回
HTMLCollection 集合。
- 可能匹配到多个同名标签。
常见 DOM 操作
修改元素内容
1
2
| element_id.innerHTML = "<a href=\"#\">跳转链接</a>";
element_class.innerText = "<a href=\"#\">跳转链接</a>";
|
innerHTML 可以解析 HTML 标签。innerText 只会把内容当成普通文本处理。
修改元素样式
1
2
| element_tag.style.color = "red";
element_tag.style.fontSize = "20px";
|
DOM 事件绑定
DOM 属性绑定
1
2
3
| button_element.onclick = function() {
alert("Dom事件绑定成功！");
}
|
addEventListener 绑定
1
| button_element.addEventListener("click", click_event);
|
addEventListener 是更常见也更灵活的方式。
课堂完整示例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS_DOM</title>
</head>
<body>
<div id="box1">这是一个ID选择器标签</div>
<div class="box2">这是一个class选择器标签1</div>
<div>这是一个普通div标签</div>
<button>点击我！</button>
<script>
var element_id = document.getElementById("box1");
console.log(element_id);
var element_class = document.getElementsByClassName("box2")[0];
console.log(element_class);
var element_tag = document.getElementsByTagName("div")[2];
console.log(element_tag);
element_id.innerHTML = "<a href=\"#\">跳转链接</a>";
element_class.innerText = "<a href=\"#\">跳转链接</a>";
element_tag.style.color = "red";
element_tag.style.fontSize = "20px";
var button_element = document.getElementsByTagName("button")[0];
console.log(button_element);
button_element.addEventListener("click", click_event);
function click_event() {
alert("事件addEventListener触发按键！");
}
</script>
</body>
</html>
|
知识点总结
DOM 是浏览器把页面组织成的文档对象模型。JavaScript 可以通过 DOM 来获取、修改和操作页面元素。- 常见元素获取方法有
getElementById、getElementsByClassName 和 getElementsByTagName。
- 常见 DOM 操作包括改内容、改样式和绑定事件。
复习表达
DOM 是浏览器为网页提供的文档对象模型，开发者可以通过 JavaScript 操作页面中的元素。常见操作包括通过 id、class 或标签名获取元素，使用 innerHTML、innerText 修改内容，使用 style 修改样式，以及通过 onclick 或 addEventListener 绑定事件。
