简述4种JavaScript中获取HTML元素的方式

开课吧开课吧锤锤2021-07-22 11:46

在很多前端开发项目中,操作中必须获取元素进行操作,如tab标签、全屏切换、自动滚动等效果都需要通过获取节点元素来实现。接下来,我们将看到几种JavaScript获取html元素的方法。  

JavaScript中获取HTML元素的方式

1、getElementById()  

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

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

代码:  

HTML中代码:  

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

JavaScript中代码:  

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

2、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”变为红色字体

3、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”

4、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”

以上就是开课吧广场小编为大家整理发布的“简述4种JavaScript中获取HTML元素的方式”一文,更多Web教程相关内容尽在开课吧Web教程频道。

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享