【Web APIs】DOM 文档对象模型 ② ( 根据标签名获取 DOM 元素 - getElementsByTagName 函数 | 获取指定标签下的 DOM 元素 )

已于 2024-06-18 11:28:52 修改
阅读量4.1k 收藏 9
点赞数 5
分类专栏： JavaScript 文章标签： 前端 java javascript DOM 文档对象模型 Element HTMLCollection
于 2024-06-18 11:28:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shulianghan/article/details/139753844
版权

文章目录


本博客相关参考文档 :





一、获取 DOM 元素



1、根据标签名获取 DOM 元素 - getElementsByTagName 函数


调用 Document.getElementsByTagName 函数 或 Element.getElementsByTagName 函数 , 可以获取 指定标签名称 的 若干 Element 对象集合 ;

  • 调用 Document 的函数 , 获取的是 整个文档的 指定标签名称 的元素 ;
  • 调用 Element 的函数 , 获取的是 Element 容器下的 指定标签名称 的元素 ;

getElementsByTagName 函数语法如下 :

var elements = document.getElementsByTagName(name);
  • name 参数 : 标签名字符串 , 如 : 要获取 <div> 标签 , 传入 "div" 参数 ;
  • elements 返回值 : 返回的结果是 封装有若干 Element 对象的 HTMLCollection 对象 ;
    • 该对象中的 DOM 元素顺序是按照 DOM 树的 DOM 元素 发现顺序 进行排列的 ;
    • HTMLCollection 对象是一个 " 伪数组 " , 有数组长度 , 也可以使用索引下标访问 , 但是没有数组的 push、pop 等数组函数 ;

代码示例 :

        // 注意 : HTML 文档加载顺序是从上到下加载 
        // 这里要先加载标签 , 然后加载 JavaScript 脚本
        var elements = document.getElementsByTagName("div");

        // 控制台打印获取结果
        console.log(elements);

参考文档 :


完整代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>

</head>

<body>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <script>
        // 注意 : HTML 文档加载顺序是从上到下加载 
        // 这里要先加载标签 , 然后加载 JavaScript 脚本
        var elements = document.getElementsByTagName("div");

        // 控制台打印获取结果
        console.log(elements);
    </script>
</body>

</html>

执行结果 : 调用 document.getElementsByTagName 函数获取 网页中的 3 哥 div 元素 , 打印结果如下 :

在这里插入图片描述


2、HTMLCollection 遍历及使用


在上面的章节 , 通过 调用 Document 或 Element 的 getElementsByTagName 函数 , 可以获取到 封装了多个 Element DOM 元素的 HTMLCollection 对象 ;

HTMLCollection 对象是 时刻 动态改变的 , 如果 HTML 文档结构发生了改变 , HTMLCollection 对象会进行自动更新 , 如果要操作 HTMLCollection 对象 , 建议先创建副本 , 然后再进行操作 ;

HTMLCollection 是个伪数组对象 , 可以 使用 数组下标的方式获取其中的 Element 元素 , 可以通过该 Element 元素修改标签内容 ;

        var elements = document.getElementsByTagName("div");

        // 遍历 HTMLCollection 中封装的 DOM 元素
        for (var i = 0; i < elements.length; i++) {
            // 打印 DOM 元素
            console.log(elements[i]);

            // 改变 DOM 元素
            elements[i].innerHTML = "你好";
        }

HTMLCollection 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection


完整代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>

</head>

<body>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <script>
        // 注意 : HTML 文档加载顺序是从上到下加载 
        // 这里要先加载标签 , 然后加载 JavaScript 脚本
        var elements = document.getElementsByTagName("div");
        // 控制台打印获取结果
        console.log(elements);

        // 遍历 HTMLCollection 中封装的 DOM 元素
        for (var i = 0; i < elements.length; i++) {
            // 打印 DOM 元素
            console.log(elements[i]);

            // 改变 DOM 元素
            elements[i].innerHTML = "你好";
        }
    </script>
</body>

</html>

执行结果 :

在这里插入图片描述


3、获取指定标签下的 DOM 元素 - getElementsByTagName 函数


上面的示例中都是获取 Document 文档下面的所有 标签名称 对应的 Element 元素 , 如果指向获取某一个指定标签下的 DOM 元素 , 则需要如下步骤 :

  • 首先 , 通过 调用 document.getElementById 函数 , 获取指定标签对应的 Element 元素 ;
  • 然后 , 通过 调用 element.getElementsByTagName 函数 , 获取 Element 元素下的所有 指定类型的标签 ;

代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>

</head>

<body>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>

    <div id="nav">
        <div>Hello2</div>
        <div>Hello2</div>
        <div>Hello2</div>
    </div>

    <script>
        // 注意 : HTML 文档加载顺序是从上到下加载 
        // 这里要先加载标签 , 然后加载 JavaScript 脚本

        // 只获取 nav 下的 div
        // 先通过 id 获取 Element
        var element = document.getElementById('nav');

        // 获取 nav 下的 div , 其它的 div 不获取 ★
        elements = element.getElementsByTagName("div");

        // 控制台打印获取结果
        console.log(elements);

        // 遍历 HTMLCollection 中封装的 DOM 元素
        for (var i = 0; i < elements.length; i++) {
            // 打印 DOM 元素
            console.log(elements[i]);

            // 改变 DOM 元素
            elements[i].innerHTML = "你好";
        }
    </script>
</body>

</html>

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

韩曙亮
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[DOM]获取元素：根据ID、标签名、HTML5新增的方法、特殊元素获取
「 虚幻私塾」
09-11 2357
目录*+++
Web APIs-Dom获取&属性操作（理论+实战篇）-获取随机图片案例资料
最新发布
04-23
Web APIs-Dom获取&属性操作（理论+实战篇）-获取随机图片案例资料
JavaScript——DOM
m0_56783154的博客
03-05 419
目录JavaScript——DOM1. DOM简介1.1 什么是DOM1.2 DOM树2. 获取元素2.1 如何获取元素 JavaScript——DOM 1. DOM简介 1.1 什么是DOM 1.2 DOM树 2. 获取元素 2.1 如何获取元素 根据 ID 获取 通过getElementById方法 根据标签名获取 通过getElementByTagName方法 1. 该函数返回的是 获取的元素对象的集合，以伪数组的形式存储 2. 如果页面中只有一个元素，返回的还是伪元素的形式 3. 如果
通过document对象的方法获取标签对象
weixin_57219176的博客
09-05 1596
通过document对象的方法获取标签对象
DOM----获取文档中的元素
e286878553的博客
07-02 485
知识点：        两个名词：1）、元素（Element）：指的是页面中的标签对象----容器。                        2）、节点（Node）：指的是页面中的标签、文本、属性----表示dom树上所有的节点。◇◇◇◇获取文档中的元素Ⅰ◇◇◇注：直接通过document获取的三种方式，只能获取元素        方式一：document.getElementById();...
Javascript DOM知识点
超级罗伯特的博客
05-25 363
1. 基本数据类型和引用数据类型的区别？ 存储位置 存储的内容 存储的值和值相互之间 基本数据类型的变量: 栈内存 值 基本数据类型的变量和基本数据类型的变量之间相互不影响 引用数据类型的变量: 堆内存 地址 引用数据类型的变量和引用数据类型的变量公用一个地址，一个值变化，另外一个也会变化 ...
DOM获取元素
wuxingwuyou的博客
04-25 747
DOM获取元素 1、通过标签名、类名、id、name (1) 通过id获取元素 是唯一的 var atOP=document.getElementById('top') (2)通过class名获取元素 一个或多个 HTMLCollection 集合 类似于为数组 伪数 var aHeader=document.getElementsByClassName('header') (3)通过标签名获取元素 一个或多个 var aText=document.getElementsByName('span') (
jsdom：各种Web标准JavaScript实现，用于Node.js
02-03
您将获得一个JSDOM对象，该对象具有许多有用的属性，尤其是window ： const dom = new JSDOM ( `<!DOCTYPE html><p>Hello world</p>` ) ; console . log ( dom . window . document . querySelector ( "p" ) . ...
PointerJS | 高效地通过DOM元素捕获鼠标
04-11
在JavaScript编程中，DOM（Document Object Model）元素与鼠标的交互是客户端开发...参考提供的资源，如"PointerJS-Mouse-Capturing-DOM-Elements-Efficiently.pdf"和"下载链接.txt"，将有助于进一步掌握这些技术细节。
idomizer:一个HTML模板解析器，用于编译增量dom渲染工厂
05-14
script src =" https://ajax.googleapis.com/ajax/libs/incrementaldom/0.6.0/incremental-dom-min.js " > </ script >< script src =" https://unpkg.com/idomizer/dist/idomizer.min.js " > </...
document.getElementsByTagName()方法的返回值
热门推荐
xyjikl
12-12 1万+
document.getelementsbytagname()方法的返回值 /* document.getelementsbytagname()方法的返回值中取出某个特定的元素。一开始以为它的返回值是一个数组，结果，大错特错。它返回的是一个 dom 对象，可以遍历，有 length 属性，但不是数组。 证据在这里： html code     window.onload = functi
document.getElementsByTagName()返回值
风凉zz的博客
01-15 1万+
常见问题 document.getElementsByTagName()返回值样式是[…,…,…]，很多人误以为是数组，进而对它调用数组方法如sort()，但是这样会报错:TypeError:xxx.sort is not a function，因为返回值其实是一个伪数组，像函数的arguments也是伪数组。 返回值 &amp;amp;amp;amp;amp;lt;body&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;d
js 学习，document.getElementsByTagName
一日三省
04-12 2461
比较以下两个方法的区别，js是解释性语言，而document.getElementsByTagName也是动态的获取目标的长度，方法一是一个死循环，如果获取对象的方法换成方法二中的方式，就不会出现死循环了。。。。 方法一： var append = document.getElementById("append");      append.addEventListener("click"
getElementsByTagName
xyjikl
12-09 805
前些日子，碰到过一个比较麻烦的问题。想从 document.getElementsByTagName()方法的返回值中取出某个特定的元素。一开始以为它的返回值是一个数组，结果，大错特错。它返回的是一个 DOM 对象，可以遍历，有 length 属性，但不是数组。 证据在这里： XML/HTML code ? 1 2 3 4 5
document.getElementsByTagName 用法
weixin_34072458的博客
06-25 1985
2019独角兽企业重金招聘Python工程师标准>>> ...
DOM获取HTML中的元素
qq_43245746的博客
01-07 270
&amp;lt;div&amp;gt;`&amp;lt;/div&amp;gt; &amp;lt;div&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;div&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;div id=&quot;box&quot;&amp;gt;&amp;lt;/div&amp;gt;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值