×

学习getElementById()、getElementsByTagName、getElementsByClassName和getElementsByName

作者:andy0012020.03.04来源:Web前端之家浏览:2232评论:1
关键词:htmljs

JavaScript获取HTML元素的方式大概有四种:getElementById()、getElementsByTagName、getElementsByClassName和getElementsByName,来一起学习下。

getElementById()

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

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

代码:

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

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

getElementsByTagName

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

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

代码:

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

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

 getElementsByName

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

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

代码:

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

getElementsByClassName

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

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

代码:

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

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


温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/jssizho2038402938430948.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2020 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.6 Valyria