JavaScript—DOM的获取

程序员大腾

已于 2022-11-10 19:32:03 修改

阅读量423

点赞数 5

分类专栏： HTML/CSS/JavaScript 文章标签： javascript 前端 html

于 2022-07-20 19:56:23 首次发布

本文链接：https://blog.csdn.net/weixin_45909221/article/details/125876148

版权

HTML/CSS/JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章目录

获取 DOM 节点

获取 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>

在这里插入图片描述

程序员大腾

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript—DOM的获取

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

扫一扫

专栏目录