Js中获取HTML元素的方式有哪些？

对于许多前端开发项目来说，获取元素进行操作是必不可少的，例如tab标签，全屏切换，自动滚播等效果都需要通过获取节点元素来实现。下面我们来看一下JavaScript获取HTML元素的方式。

JavaScript中获取HTML元素的方式：

getElementById()

作用：用于获取一个基于唯一的ID的元素。

用法：getelementById(),接受一个你要获取的id参数，如果找到相应的元素则返回该元素，如果找不到就返回null。

代码：

HTML中代码：

<div id =”mydiv”>Hello</div>

JavaScript中代码：

var mydiv = document.getElementById(“mydiv”);      //获取<div>元素

getElementsByTagName

作用：用于获取对应标签的所有对象

用法：getElementsByTag(),接受一个你要获取的标签的参数，返回含零或多个元素的NodeList（节点列表，与数组类似）

代码：

HTML中代码：

<p>hello</p>
<p>hi</p>
<p>i am fine</p>

JavaScript中代码：

 var array = document.getElementsByTagName(“p”);           //获取p的元素节点列表
 P[0].style.color =”red”                      //”hello”变为红色字体

getElementsByName

作用：用于获取对应name名的所有元素

用法：getElementsByName(),接受一个你要获得name名的参数，返回含零或多个元素的NodeList（节点列表，与数组类似）

代码：

HTML中代码：

 <p name=”lid”>hello</p>
 <p name=”lid”>hi</p>

JavaScript中代码：

 var name = document.getElementsByName(“lid”);  //获取name为lid所有元素节点
 Name[0];            //”hello”

getElementsByClassName

作用：用于获取对应class名的所有元素

用法：getElementsByClassName(),接受一个你要获得class名的参数，返回含零或多个元素的NodeList（节点列表，与数组类似）

HTML中代码：

<p class=”lid”>hello</p>
<p class=”lid”>hi</p>

JavaScript中代码：

var name = document.getElementsByClassName(“lid”);   //获取name为lid所有元素节点
Name[0];            //”hello”

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_7940