JS中获取元素方法

JS中有很多获取元素的方法

可以通过id，name，class等。

Id（id名）

document.getElementById()

//通过id进行获取
<div id="one">hello world!</div>
var element= document.getElementById("one");//括号内是元素的id名

返回值
元素的id应该是唯一的，如果元素存在则返回DOM的Element对象，如果未找到则返回null。

TagName（标签名）

document.getElementsByTagName()

//通过Name进行获取
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
var li_list = document.getElementsByTagName("li");

返回值
这里的name是指元素的标签名称（div）并非属性中的name值，返回的是符合name参数的元素的集合，好像是伪数组。

//通过Name进行获取
<ul id = "one">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

<ul id = "two">
	<li>4</li>
	<li>5</li>
	<li>6</li>
</ul>
var ul_two = document.getElementsById("two");
var ul_two_li = ul_two.getElementsByTagName("li");

如果存在多个符合标签名字的元素而你只想获取其中部分的，可以先通过getElementsById 获取包含它的父级元素当做document，然后再进行getElementsByTagName 获取。

ClassName（类名）

document.getElementByClassName()

//通过class进行获取
<div id="one" class = "box">hello world!</div>
<div id="two" class = "box">hello world!</div>
var element= document.getElementByClassName("box");//括号内是元素的class名

返回值
同样是返回一个符合classname的元素集合。

选择器

选择器很方便，不用使用特定的形式来选中元素，只需要使用对应的规则计算机即可明白你想使用什么方式来获取。

//通过class进行获取
<div id="one" class = "box">hello world!</div>
<div id="two" class = "box">hello world!</div>

id：# + id名（"#one"）
ClassName：. + 类名(".box")
TagName：标签名(“div”)

获取第一个元素

document.querySelector()

//通过class进行获取
<div id="one" class = "box">hello world!</div>
<div id="two" class = "box">hello world!</div>
var element= document.querySelector(".box");//获取第一个div
var element= document.querySelector("#two");//获取第二个div
var element= document.querySelector("div");//获取第一个div

获取第所有元素

document.querySelectorAll()

//通过class进行获取
<div id="one" class = "box">hello world!</div>
<div id="two" class = "box">hello world!</div>
var element= document.querySelector(".box");//两个div都获取
var element= document.querySelector("#two");//获取第二个div
var element= document.querySelector("div");//两个div都获取

初学JS小白一枚，有什么问题或者还有其他方法还请见谅和评论。