DOM编程（1）选择器

---

一、DOM对象模型

DOM对象全称是Document Object Model，当页面加载时，浏览器就会会创建页面文档模型，它是window五大对象之一。
一个html文档是由DOM树构成。
DOM树如下：

二、选择器

1.元素选择器

(1) id 选择器

语法： var 元素对象=document.getElementById(“id名”);

代码如下（示例）：

<div id="F">
通过id选择器选择元素
</div>

<script type="text/javascript">
     var div=document.getElementById("F");
</script>

运行结果如下：

(2) 标签 选择器

语法： var 元素对象=document. getElementsByTagName (“标签名”);

注意：这个标签 选择器 获取是以数组形式返回的，访问其中的元素可以以数组下标访问

代码如下（示例）：

<div>
			通过标签选择器选择元素1
		</div>
		<div>
			通过标签选择器选择元素2
		</div>
		<script type="text/javascript">
			var div=document.getElementsByTagName("div")
			console.log(div);
		</script>

运行效果如下：

(3) class 选择器

语法： var 元素对象名 = document.getElementsByClassName(“类名”);

注意：这个class 选择器 获取是以数组形式返回的，访问其中的元素可以以数组下标访问

<div class="div">
			通过标签选择器选择元素1
		</div>
		<div class="div">
			通过标签选择器选择元素2
		</div>
		<script type="text/javascript">
			var div = document.getElementsByClassName("div");
			console.log(div);
		</script>

运行效果如下：

(4) name 选择器

语法： var 元素对象名 = document.getElementsByName(“name”);
注意：这个name 选择器一般用于获取input元素 同样该选择器获取是以数组形式返回的，访问其中的元素可以以数组下标访问

<form action="" method="">
			<input type="text" name="userName" id="" value="" />
		</form>
		<script type="text/javascript">
			var div = document.getElementsByName("userName");
			console.log(div);
		</script>

运行结果如下：

(5) CSS 筛选器

var 元素对象名= document.querySelector();

方法	描述
querySelector(“标签名”)	通过标签名筛选元素
querySelector(".class名")	通过类名筛选元素
querySelector(".#id名")	通过id筛选元素

示例：

<div>
			标签选择器
		</div>
		<div class="a">
			类名选择器
		</div>
		<div id="b">
			id选择器
		</div>
		<script type="text/javascript">
			var div = document.querySelector("div");
			var a=document.querySelector(".a");
			var b=document.querySelector("#b");
			console.log(div);
			console.log(a);
			console.log(b);

运行结果如下：

注意：querySelector()方法只能获取一个元素对象

想要获取多个元素可以使用以下筛选器

var 元素对象名= document.querySelectorAll();

方法	描述
querySelectorAll(“标签名”)	通过标签名筛选元素
querySelectorAll(".class名")	通过类名筛选元素
querySelectorAll(".#id名")	通过id筛选元素

示例：

<div>
			标签选择器
		</div>
		<div class="a">
			类名选择器
		</div>
		<div id="b">
			id选择器
		</div>
		<script type="text/javascript">
			var div = document.querySelectorAll("div");
			var a=document.querySelectorAll(".a");
			var b=document.querySelectorAll("#b");
			console.log(div);
			console.log(a);
			console.log(b);
		</script>

运行结果如下

注意：querySelectorAll()返回的是一个数组元素，可以通过下标访问元素

更多css选择器用法参考：css选择器

(6) 获取特殊元素

方法	描述
document.body;	获取 body
document.documentElement	获取 html

2.节点/元素 选择器

注意：换行符、空白也算是节点

(1) 子节点选择器

方法	说明	返回组值
node.parentNode	访问父节点	单个值
node.childNodes	子节点集合	数组
node.firstChild.	第一个子节点	单个值
node.lastChild	最后一个子节点	单个值
node.previousSibling	前一个兄弟节点	单个值
node.nextSibling	后一个兄弟节点	单个值

(2) 节点属性

属性名	描述
NodeType	节点类型，返回1-12
NodeName	节点名
NodeValue	节点值

节点类型一共有12种
1：元素节点
2：属性节点
3：文本节点
其它标识请参考：节点类型

	<ul>
			<li></li>
			<li></li>
		</ul>
		<script type="text/javascript">
			var div = document.querySelector("ul").firstChild;//获取到的是换行符
			console.log("节点类型"+div.nodeType);
			console.log("节点名字"+div.nodeName);
			console.log("节点值"+div.nodeValue)
		</script>
		

运行结果如下

(3) 节点元素获取

方法	说明	返回组值
element.parentElement	访问父元素	单个值
element.children	子元素集合	数组
element.firtElementChild.	第一个子元素	单个值
element.lastElementChild	最后一个子元素	单个值
element.prexiousElementSibling	前一个兄弟元素	单个值
element.nextElementSibling	后一个兄弟元素	单个值

3.获取元素属性

语法：元素对象.属性名   //该方法只针对行内属性

代码如下：

总结

注意 空格、制表符都算是节点元素