JavaScript-DOM-document对象访问元素(补充篇)

最新推荐文章于 2024-07-20 23:54:17 发布

十二啊

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量260

点赞数

分类专栏：十二的 Javascript 之路文章标签： javascript 前端

十二

本文链接：https://blog.csdn.net/qq_42543177/article/details/124410548

版权

十二的 Javascript 之路专栏收录该内容

22 篇文章 0 订阅

订阅专栏

JavaScript-DOM-document对象访问元素(补充篇)

之前介绍了三种常用的document对象访问元素的方法。这篇介绍一下其他的方法。

1、getElementsByClassName()

描述：
通过选择器名来获取元素对象集,返回一个HTMLCollection对象，可通过[]或item()访问列表元素
示例：

document.getElementsByClassName('div');

2、querySelector()

描述：
返回指定 CSS 选择器的第一个元素, 可以是类选择、id选择、组合选择等等
示例：

document.querySelector('.demo div');

3、querySelectorAll()

描述：
返回指定 CSS 选择器的一个NodeList对象, 可以是类选择、id选择、组合选择等等
示例：

document.querySelectorAll('input');

4、获取焦点元素

html5新增DOM焦点管理功能，使用document.activeElement属性可以引用当前获得焦点的元素，元素获取焦点的方式包括：页面加载，用户输入（如按tab键）和在脚本中调用focus()方法。可以用document.hasFocus()方法可以判断当前文档是否获得了焦点。

亲自试一试

上面的4种方法都包含在下面例子中了，试一试吧！

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>DOM-其他元素对象获取方法示例</title>
    <script>
        window.onload = function () {
            // getElementsByClassName()通过选择器名来获取元素对象集,返回HTMLCollection
            let demo = document.getElementsByClassName('demo');
            console.log(demo);
            // querySelector()返回指定 CSS 选择器的一个元素, 可以是类选择、id选择等等
            let demochild = document.querySelector('.demo div');
            // querySelectorAll()返回指定 CSS 选择器的所有元素，一个NodeList对象
            let inputone = document.querySelectorAll('input')[0];
            // 获取焦点事件
            inputone.onfocus = function () {
            	// html5新增DOM焦点管理功能，使用document.activeElement属性可以引用当前获得焦点的元素
                document.activeElement.style.backgroundColor = 'rgb(225, 231, 150)';
                // document.hasFocus()方法可以判断当前 文档 是否获得了焦点
                console.log(document.hasFocus());
            }
            // 失去焦点事件
            inputone.onblur = function () {
                this.style.backgroundColor = 'rgb(147, 220, 230)';
            }
        }
    </script>
</head>

<body>
    <div class="demo">
        <div>我是第一个div的第一个div节点</div>
    </div>

    <input type="text">
</body>

</html>