JavaScript—DOM的获取

简介: HTML中的Element对象可以通过Document对象获取,而Document对象是通过window对象获取。Document对象中提供了以下获取Element元素对象的函数。//alert(divs.length);//输出数组的长度。//返回一个数组,数组中存储的是div元素对象。

@[TOC]

获取 DOM 节点

HTML 中的 Element 对象可以通过 Document 对象获取,而 Document 对象是通过 window 对象获取。
Document 对象中提供了以下获取 Element 元素对象的函数

getElementById() :根据id属性值获取,返回单个Element对象
getElementsByTagName() :根据标签名称获取,返回Element对象数组
getElementsByName() :根据name属性值获取,返回Element对象数组
getElementsByClassName() :根据class属性值获取,返回Element对象数组
querySelector() 返回文档中与指定选择器或选择器组匹配的第一个 html 元素 Element 。 如果找不到匹配项,则返回 null 。
querySelectorAll 返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。

1.getElementById() 根据 id 属性值获取元素对象,返回单个对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <div id="id">学习学习</div>
    
    <script>
        var res = document.getElementById("id");
        window.alert(res);
    </script>
    
</body>

</html>

结果:
在这里插入图片描述

2.getElementsByTagName() 根据标签名称获取所有的 div 元素对象

    
    <script>
        var divs = document.getElementsByTagName("div"); // 返回一个数组,数组中存储的是 div 元素对象
        // alert(divs.length); //输出 数组的长度
        //遍历数组
        for (let i = 0; i < divs.length; i++) {
          alert(divs[i]);
        }
    </script>
    

3.getElementsByName:根据name属性值获取,返回Element对象数组


    <body>
        <input type="checkbox" name="hobby"> 电影
        <input type="checkbox" name="hobby"> 旅游
        <input type="checkbox" name="hobby"> 游戏

        <script>
    
        var hobbys = document.getElementsByName("hobby");
        
        for (let i = 0; i < hobbys.length; i++) {
            alert(hobbys[i]);
        }
    </script>
    </body>
    

4. getElementsByClassName:根据class属性值获取,返回Element对象数组


    <body>
            <div class="cls">小腾</div> <br>
            <div class="cls">学习前端</div> <br>
            <p class="cls">加油</p>

        <script>
    
        var hobbys = document.getElementsByName("hobby");
        
        for (let i = 0; i < hobbys.length; i++) {
            alert(hobbys[i]);
        }
    </script>
    </body>
    

5.querySelector() 返回文档中与指定选择器或选择器组匹配的第一个 html 元素 Element 。


<body>
    <div class="list"> 我可以被改变 </div>
    <br>
    <script>
        
       var listEle = document.querySelector('.list');
       listEle.innerHTML =  "nihao";
    </script>
</body>

如果显示应该显示 我应该被改变 不过经过操作,已经被改成了:
在这里插入图片描述

6.querySelectorAll 返回与指定的选择器组匹配的文档中的元素列表

<body>

    <ul>
        <li>GOOD1</li>
        <li>GOOD2</li>
        <li>GOOD3</li>
        <li>GOOD4</li>

    </ul>


    <script>
        var lis = document.querySelectorAll('li');

        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
    </script>
</body>

在这里插入图片描述

相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
50 5
|
1月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
2月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
86 4
|
3月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
25 5
|
3月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
40 4
|
3月前
|
JavaScript 前端开发 索引
你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList
该文章详细解释了JavaScript中HTMLCollection和NodeList这两种DOM集合类型的特性、使用方法及其区别,并通过实例代码展示了如何操作这两种集合来选取和遍历DOM元素。
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
28 5
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
31 2