JavaScript学习之document对象-获取元素方法

林林一928

已于 2024-05-12 13:44:07 修改

阅读量1.2k

点赞数 21

分类专栏： JavaScript 文章标签： javascript 开发语言前端

于 2024-04-16 18:09:03 首次发布

本文链接：https://blog.csdn.net/m0_73765584/article/details/137830031

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

根据CSS选择器来获取DOM元素

document.querySelector()

document.querySelector方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null

语法：

document.querySelector('css选择器')

参数：

包含一个或多个有效的CSS选择器字符串

返回值：

CSS选择器匹配的第一个元素

eg1: 简单html示例

要求：将获取类名为 "box" 的第一个元素，背景颜色设置为蓝色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 10px;
            text-align: center;
            line-height: 200px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
</body>
</html>

eg:

document.querySelectorAll()

document.querySelectorAll方法与querySelector用法类似，区别是返回一个NodeList对象，包含所有匹配给定选择器的节点。

语法：

document.querySelectorAll('css选择器')

参数：

包含一个或多个有效的CSS选择器字符串

返回值：

CSS选择器匹配的NodeList对象集合

eg:

注意事项：

document.querySelectorAll('.box') 返回的是一个 NodeList 对象，它包含所有类名为 "box" 的元素。因此，box 是一个元素数组，而不是单个元素。尝试访问 box.style 会导致错误，因为 NodeList 对象没有 style 属性。

eg2:将类名为 "box" 的第一个元素，背景改色

其他获取DOM元素方法

document.getElementsByTagName()

document.getElementsByTagName方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象（HTMLCollection实例），可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集

eg:

如果传入 * ，就可以返回文档中所有 HTML 元素

var allElements = document.getElementsByTagName('*');

eg:

document.getElementsByClassName()

document.getElementsByClassName方法返回一个类似数组的对象（HTMLCollection实例），包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中（指定的class属性名）

var elements = document.getElementsByClassName(names);

由于class是保留字，所以 JavaScript 一律使用className表示 CSS 的class

参数可以是多个class，它们之间使用空格分隔

var elements = document.getElementsByClassName('foo bar');

document. getElementsByName()

document.getElementsByName方法用于选择拥有name属性的 HTML 元素（比如<form>、<radio>、<img>等），返回一个类似数组的的对象（NodeList实例），因为name属性相同的元素可能不止一个（指定的name属性名）

// 表单为 <form name="linlin"></form>
var forms = document.getElementsByName('linlin');

document.getElementById()

document.getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null（指定的id属性名）

var elem = document.getElementById('para1');

注意，该方法的参数是大小写敏感的。比如，如果某个节点的id属性是main，那么document.getElementById('Main')将返回null

林林一928

关注

21
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
3
评论
JavaScript学习之document对象-获取元素方法

讲述document对象获取元素的方法：document.querySelector()， document.querySelectorAll()， document.getElementsByTagName()，document.getElementsByClassName()， document. getElementsByName()， document.getElementById()
复制链接

扫一扫