【Web APIs】DOM 文档对象模型 ③ ( 根据类名获取 DOM 元素 - getElementsByClassName 函数

【Web APIs】DOM 文档对象模型 ③ ( 根据类名获取 DOM 元素 - getElementsByClassName 函数 | 代码示例 )

CSDN 2024-07-20 09:03:07 阅读 67

文章目录

一、根据类名获取 DOM 元素1、根据类名获取 DOM 元素 - getElementsByClassName 函数2、代码示例 - 获取文档中指定类名的 DOM 元素3、代码示例 - 获取 Element 元素下指定类名的 DOM 元素

本博客相关参考文档 :

WebAPIs 参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/APIgetElementById 函数参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementByIdElement 对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/ElementgetElementsByTagName 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByTagNameHTMLCollection 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollectiongetElementsByClassName 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByClassName

一、根据类名获取 DOM 元素

1、根据类名获取 DOM 元素 - getElementsByClassName 函数

根据类名获取 DOM 元素 , 需要使用 HTML5 新增的方法 , Document.getElementsByClassName 函数获取 ;

HTML5 必须是 IE9.0 以上的版本才能使用 ;注意兼容性 : 如果要开发的网页需要兼容老版本的浏览器 , 如 : IE 678 版本 , 则不能使用该方法 ;

Document.getElementsByClassName 函数是获取文档中所有指定类名的 DOM 元素 , 得到的结果是 HTMLCollection 伪数组对象 , 其中封装了若干 Element 对象 ;

<code>var elements = document.getElementsByClassName(className);

Element.getElementsByClassName 函数是获取 Element 元素下的所有指定类名的 DOM 元素 , 返回结果也是 HTMLCollection 对象 ;

var elements = rootElement.getElementsByClassName(className);

相关参考文档 :

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

2、代码示例 - 获取文档中指定类名的 DOM 元素

在下面的代码中 , 直接调用了 document.getElementsByClassName("box") 函数 , 可以获取整个网页中所有类名为 'box' 的 DOM 元素 ;

代码示例 :

<!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">code>

<meta http-equiv="X-UA-Compatible" content="ie=edge">code>

<title>JavaScript</title>

<style></style>

</head>

<body>

<div class='box'>Hello</div>code>

<div>Hello</div>

<div id="nav">code>

<div>Hello2</div>

<div class='box'>Hello2</div>code>

</div>

<script>

// 注意 : HTML 文档加载顺序是从上到下加载

// 这里要先加载标签 , 然后加载 JavaScript 脚本

// 获取 nav 下的 class 类名为 box 的元素 , 其它的元素不获取 ★

var elements = document.getElementsByClassName("box");

// 控制台打印获取结果

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、代码示例 - 获取 Element 元素下指定类名的 DOM 元素`

  
在下面的代码中 ,
 
先通过调用 Document.getElementById 函数 , 获取 元素 id 为 nav 的 DOM 元素 ;
 <code>var element = document.getElementById('nav');
 
然后通过调用上述 Element 元素的 getElementsByClassName 函数 , 获取元素下的 class 类名为 box 的元素 ;
 
elements = element.getElementsByClassName("box");
 
 
代码示例 :
 
<!DOCTYPE html>
<html lang="en">code>
<head>
 <meta charset="UTF-8">code>
 <!-- 设置 meta 视口标签 -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">code>
 <meta http-equiv="X-UA-Compatible" content="ie=edge">code>
 <title>JavaScript</title>
 <style></style>
</head>
<body>
 <div class='box'>Hello</div>code>
 <div class='box'>Hello</div>code>
 <div>Hello</div>
 <div id="nav">code>
 <div>Hello2</div>
 <div class='box'>Hello2</div>code>
 <div class='box'>Hello2</div>code>
 </div>
 <script>
 // 注意 : HTML 文档加载顺序是从上到下加载 
 // 这里要先加载标签 , 然后加载 JavaScript 脚本
 // 只获取 nav 下的 class 类名为 box 的元素
 // 先通过 id 获取 Element
 var element = document.getElementById('nav');
 // 获取 nav 下的 class 类名为 box 的元素 , 其它的 元素 不获取 ★
 var elements = element.getElementsByClassName("box");
 // 控制台打印获取结果
 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>
 
执行结果 :

 
 
   上一篇： vue 前端读取Excel文件并解析 
  下一篇： 【前端素材】推荐优质橙色在线超市购物商城设计Super Market平台模板（附源码） 
  本文标签 
  【Web APIs】DOM 文档对象模型 ③ ( 根据类名获取 DOM 元素 - getElementsByClassName 函数 | 代码示例 )    
 
  
  声明
  本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
 如有涉及侵权，请联系本站进行删除
 转载本站原创文章，请注明来源及作者。