DOM获取元素

概述
对于一个页面，如果想要对页面中的某个元素进行操作，就必须通过一定的方式获取所需元素，这样才能对其进行相应的操作。 在JavaScript中，引用获取元素方法的语法格式如下： document.方法名称(元素名称);
1.直接获取元素
1.根据元素id获取元素： document.getElementById("id名称"); 2.根据标签名获取元素组： document.getElementsByTagName("标签名称"); 3.根据类名获取元素组： document.getElementsByClassName("类名称"); 4.通过name获取元素组： document.getElementsByName("名称"); 5.根据CSS选择器名获取元素（只取第一个）： document.querySelector("选择器名称"); 6.根据CSS选择器名获取元素组： document.querySelectorAll("选择器名称");

元素1

元素2

元素3

元素4

	
<p id="ele1" class="p_class">元素1</p>
<span>元素2</span><br>
<p name="p_ele3" class="p_class">元素3</p>
<p class="p_class">元素4</p>			
		

	
console.info(document);
console.info(document.getElementById("ele1"));				//根据id获取元素
console.info(document.getElementsByTagName("span"));		//根据标签名获取元素
console.info(document.getElementsByClassName("p_class"));	//根据类名获取元素
console.info(document.getElementsByName("p_ele3"));			//根据名字获取元素
console.info(document.querySelector(".p_class"));		//使用CSS选择器获得单个
console.info(document.querySelectorAll(".p_class"));	//使用CSS选择器获得所有
2.间接获取元素
1.获取子元素 (1)获取所有子元素：.children (2)获取第一个子元素：.firstElementChild (3)获取最后一个子元素：.lastElementChild 2.获取父元素 (1)获取父元素：.parentElement 3.获取兄弟元素 (1)获取前一个兄弟：.previousElementSibling (2)获取后一个兄弟：.nextElementSibling
老大
老二的孩子
老三
老四
老五
	
<p id="ele1" class="p_class">元素1</p>
<span>元素2</span><br>
<p name="p_ele3" class="p_class">元素3</p>
<p class="p_class">元素4</p>			
		

	
var me_ele = document.getElementById("me");
console.log(me_ele.parentElement.children);
console.log(me_ele.parentElement.children[3]);
console.log(me_ele.firstElementChild);
console.log(me_ele.lastElementChild);
console.log(me_ele.parentElement);
console.log(me_ele.previousElementSibling);
console.log(me_ele.nextElementSibling);
console.log(me_ele.nextElementSibling.nextElementSibling);
3.事件获取元素
1.获取触发事件的元素： event.target 2.获取绑定事件的元素： event.currentTarget
*【 点击试试 】* 
	
<div id="event_test">
	<span>*【</span>
	<span>点击试试</span>
	<span>】*</span>
</div>		
		

	
var event_test = document.getElementById("event_test");
event_test.addEventListener("click",function(event){
	console_title(3,"事件获取元素");
	console_sub_title("event.target");
	console.log(event.target);
	console_sub_title("event.currentTarget")
	console.log(event.currentTarget);
})
4.表单元素获取
1.根据表单名获取表单： document.表单名称; 2.根据表单控件名获取控件： 表单对象.控件名称; 

	
<form action="userinfo.php" method="get" name="userinfo_form">
	<p>
		<label for="username">用户名：</label>
		<input type="text" id="username" />
	</p>
	<p>
		<label for="pwd">密&nbsp;&nbsp;&nbsp;码：</label>
		<input type="password" id="pwd" />
	</p>
	<input type="submit" value="登录" />
</form>			
		

	
console.info(document.userinfo_form);		//根据表单名直接获取表单
console.info(document.userinfo_form.pwd);	//根据表单中的控件名获取控件
console.info(document.getElementsByName("userinfo_form")[0]);			//根据名字获取元素
console.info(document.querySelector("[name='userinfo_form'] >p"));		//使用CSS选择器获得单个
console.info(document.querySelectorAll("[name='userinfo_form'] >p"));