DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作
针对节点进行操作的第一步当然就是获取节点,目前已经衍生出了很多获取节点的方案
我们先写一段简单的 HTML 代码,
<body>
<header id="title" class="main-title">
<span class="text-heading">Hello,</span>
<span class="text-heading name">Raaabbit</span>
</header>
</body>
后面的代码就基于上面的 demo 展开
针对节点进行操作的第一步当然就是获取节点,目前已经衍生出了很多获取节点的方案
通过元素选择器获取
元素选择器相关的内容可以参考我的博客,CSS选择器一节
这种方法主要在于通过元素的 id、class 和标签名获取元素,常用以下三个方法:
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
⚠️注意: 这些方法既可以用于HTML文档对象,也可以用于element元素对象
下面分别进行详细介绍:
getElementById
let title = document.getElementById('title');
按照规范在 HTML 中,id 是唯一的,所以通过这样的方式可以获得唯一的元素,事实上若浏览器中出现多个id名的情况,CSS样式对所有该id名的元素都生效,但这个方法仅对第一个出现该id名的元素生效
getElementsByClassName
let textHeadings = document.getElementsByClassName(