本文介绍了JavaScript中的DOM对象，包括getElementById、getElementsByTagName、getElementsByClassName和querySelector方法。接着讲解了属性操作，特别是布尔属性的使用。在BOM Node对象部分，详细阐述了如何创建、增加、修改和删除节点，以及innerHTML和innerText的差异。最后，文章探讨了事件处理，包括各种事件类型、注册事件的方式（如DOM 0级和DOM 2级事件）以及常见的鼠标和键盘事件。
文章目录
1.DOM对象
HTML文档是一种树状的结构化文档、各标记之间是一种树状的层次关系。
<!DOCTYPE html>
<html>
<head>
<body>
<p>hello world</p>
</body>
</head>
</html>
**文档节点：**整个html文档就是一个文档节点。 document
**元素节点：**所有标签都是一个元素节点。 element
**文本节点：**标签中的文字则是文本节点(回车，空格也是文本节点) Text
**属性节点：**标签的属性是属性节点。 Attribute
1.1.getElementById() 通过id选择元素，返回节点对象
<!DOCTYPE html>
<html>
<head>
<body>
<p id="pid">hello world</p>
</body>
<script>
let element = document.getElementById("pid");
</script>
</head>
</html>
1.2.getElementsByTagName() 通过标签名选择元素，返回数组
<!DOCTYPE html>
<html>
<head>
<body>
<p>hello world</p>
<p>hello h5</p>
<p>hello java</p>
</body>
<script>
let elements = document.getElementsByTagName("p");
console.log(elements);//返回3个节点对象数组
</script>
</head>
</html>
1.3.getElementsByClassName(类名) 通过类名选择元素，返回数组
<!DOCTYPE html>
<html>
<head>
<body>
<p class="pclass">hello world</p>
<p>hello h5</p>
<p class="pclass">hello java</p>
</body>
<script>
let elements = document.getElementsByClassName("pclass");
console.log(elements);//返回2个节点对象数组
</script>
</head>
</html>
1.4.querySelector()选择器访问
<!DOCTYPE html>
<html>
<head>
<body>
<p class="pclass">hello world</p>
<p id = "pid">hello h5</p>
</body>
最低0.47元/天 解锁文章
扫一扫
1606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
