温故知新——DOM操作之获取节点

最新推荐文章于 2022-08-09 10:22:52 发布

Raaabbit

最新推荐文章于 2022-08-09 10:22:52 发布

阅读量260

点赞数

分类专栏： DOM 文章标签： DOM

本文链接：https://blog.csdn.net/github_39457740/article/details/99699103

版权

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(

最低0.47元/天解锁文章

Raaabbit

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
温故知新——DOM操作之获取节点

浏览器读取 HTML 文件并进行解析之后，会生成一棵由 DOM 节点构成的树，我们可以对其中的节点进行操作基本的 DOM 节点操作包括节点的获取、创建、修改、插入和删除我们先写一段简单的 HTML 代码，<body> <header id="title" class="main-title"> <span class="text-heading"&g...
复制链接

扫一扫