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

 

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

1、getElementById( )作用:用于获取一个基于唯一的ID的元素。

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


  •  

Hello

JavaScript中代码:


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

2、getElementsByTagName

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

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

代码:

HTML中代码:


  •  
  •  
  •  

hello

hi

i am fine

JavaScript中代码:


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

3、getElementsByName

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

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

代码:

HTML中代码:


  •  
  •  
 

hello

hi

JavaScript中代码:


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

4、getElementsByClassName

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

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

HTML中代码:


  •  
  •  

hello

hi

JavaScript中代码:


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

 

本文完〜

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,请读者仅作参考,并自行核实相关内容。如发现有害或侵权内容,请联系邮箱:jubao@pinlue.com,我们将在第一时间进行核实处理。

http://image98.pinlue.com/thumb/img_jpg/eXCSRjyNYcZkxL5zOia9CicdJC3CDNRWrlrfsiceibSibqz3FLsiax4AtCybXamgEkjaDgNI74ibp0oD8jv5M3aodaMDQ/0.jpeg
分享
评论
首页