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

web前端开发

共 1401字,需浏览 3分钟

 ·

2021-03-11 17:25


对于许多前端开发项目来说,获取元素进行操作是必不可少的,例如tab标签,全屏切换,自动滚播等效果都需要通过获取节点元素来实现。下面我们来看一下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”




本文完〜



浏览 33
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报