JS中的元素节点

1.元素节点

获取元素节点的子节点：

通过具体的元素节点调用：

1.getElementsByTagName()方法

• 返回当前节点的指定标签后代节点

2.childNodes属性

• 表示当前节点的所有子节点，就是返回所有子节点

  				/*
  									 * childNodes属性会获取包括文本节点在呢的所有节点
  									 * 根据DOM标签标签间空白也会当成文本节点
  									 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
  									 * 	所以该属性在IE8中会返回4个子元素而其他浏览器是9个
  									 */
  

childNodes属性会获取包括文本节点在呢的所有节点

3.firstChild属性

• 表示当前节点的第一个子节点，就是返回第一子节点

4.lastChild属性

• 表示当前节点的最后一个子节点，就是返回最后一个子节点

element.childNodes	返回元素的一个子节点的数组
element.children	返回元素的子元素的集合

注意是：由于childNodes会将空格及空行也当成子节点【当成文本】，所以会造成一些麻烦，解决方案是使用children返回所有子元素

				/*
				 * children属性可以获取当前元素的所有子元素
				 */

element.firstElementChild	返回元素的第一个子元素
element.firstChild	返回元素的第一个子节点

				//firstElementChild获取当前元素的第一个子元素
				/*
				 * firstElementChild不支持IE8及以下的浏览器，
				 * 	如果需要兼容他们尽量不要使用
				 */
				
				fir = phone.firstElementChild;

element.lastChild	返回最后一个子节点
element.lastElementChild	返回指定元素的最后一个子元素

				//为id为btn04的按钮绑定一个单击响应函数
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
					
					//获取id为city的元素
					var city = document.getElementById("city");
					
					//查找#city下所有li节点
					var lis = city.getElementsByTagName("li");
					
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
					
				};
				
				//为id为btn05的按钮绑定一个单击响应函数
				var btn05 = document.getElementById("btn05");
				btn05.onclick = function(){
					//获取id为city的节点
					var city = document.getElementById("city");
					//返回#city的所有子节点
					/*
					 * childNodes属性会获取包括文本节点在呢的所有节点
					 * 根据DOM标签标签间空白也会当成文本节点
					 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
					 * 	所以该属性在IE8中会返回4个子元素而其他浏览器是9个
					 */
					var cns = city.childNodes;
					
					//alert(cns.length);
					
					/*for(var i=0 ; i<cns.length ; i++){
						alert(cns[i]);
					}*/
					
					/*
					 * children属性可以获取当前元素的所有子元素
					 */
					var cns2 = city.children;
					alert(cns2.length);
				};
				
				//为id为btn06的按钮绑定一个单击响应函数
				var btn06 = document.getElementById("btn06");
				btn06.onclick = function(){
					//获取id为phone的元素
					var phone = document.getElementById("phone");
					//返回#phone的第一个子节点
					//phone.childNodes[0];
					//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
					var fir = phone.firstChild;
					
					//firstElementChild获取当前元素的第一个子元素
					/*
					 * firstElementChild不支持IE8及以下的浏览器，
					 * 	如果需要兼容他们尽量不要使用
					 */
					//fir = phone.firstElementChild;
					
					alert(fir);
				};
				

2.获取父节点和兄弟节点

通过具体的节点调用：

1.parentNode属性

• 表示当前节点的父节点

2.previousSibling属性

• 表示当前节点的前一个兄弟节点

3.nextSibling属性

• 表示当前节点的后一个兄弟节点

获取节点	描述
element.parentNode	返回元素的父节点，由于是返回父节点，所以不会返回空文本，不像元素节点一样，注意这个属性不会获取到空文本节点的

				/*
				 * innerText
				 * 	- 该属性可以获取到元素内部的文本内容
				 * 	- 它和innerHTML类似，不同的是它会自动将html去除
				 */

			//返回#bj的父节点
			// 第一步：为`btn07`绑定单击事件
			var btn07 = document.getElementById("btn07");
			btn07.onclick = function () {
				// 第二步：获取`bj`对象
				var bj = document.getElementById("bj");
				// 第三步：获取父节点
				var parentNode = bj.parentNode;
				// 第四步：打印
				alert(parentNode.innerHTML);
				/**
				 * innerHTML是获取元素
				 * innerText是获取节点的文本
				 */
				alert(parentNode.innerText);
			};

获取前一个元素节点：

element.previousSibling	返回某个元素紧接之前元素，也可能获取到文本节点
element.previousElementSibling	返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。

			//返回#android的前一个兄弟节点
			// 第一步：为btn08绑定单击事件
			var btn08 = document.getElementById("btn08");
			btn08.onclick = function () {
				// 第二步：获取`android`对象
				var android = document.getElementById("android");
				// 第三步：获取兄弟节点
				var previousSibling = android.previousSibling;// 该属性可能获取到空白文本节点
				var previousElementSibling = android.previousElementSibling;// 该属性获取元素节点
				// 第四步：打印
				alert(previousSibling.innerHTML);
				alert(previousElementSibling);
			};

获取下一个元素节点：

element.nextSibling	返回该元素紧跟的一个节点，也可能获取到文本节点
element.nextElementSibling	返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。

			//返回#android的前一个兄弟节点
			// 第一步：为btn08绑定单击事件
			var btn08 = document.getElementById("btn08");
			btn08.onclick = function () {
				// 第二步：获取`android`对象
				var android = document.getElementById("android");
				// 第三步：获取兄弟节点
				var previousSibling = android.previousSibling;// 该属性可能获取到空白文本节点
				var previousElementSibling = android.previousElementSibling;// 该属性获取元素节点
				// 第四步：打印
				alert(previousSibling.innerHTML);
				alert(previousElementSibling);
			};

			//读取#username的value属性值
			// 第一步：为`btn09`绑定单击事件
			var btn09 = document.getElementById("btn09");
			btn09.onclick = function () {
				// 第二步：获取`username`对象
				var username = document.getElementById("username");
				// 第三步：获取`value`属性值
				var value = username.value;
				alert(value);
			};


			//设置#username的value属性值
			var btn10 = document.getElementById("btn10");
			btn10.onclick = function () {
				var username = document.getElementById("username");

				username.value = "您好，海康!";

			};

			//返回#bj的文本值
			var btn11 = document.getElementById("btn11");

			btn11.onclick = function () {
				var bj = document.getElementById("bj");
				// 方式一：
				var innerHTML = bj.innerHTML;
				console.log(innerHTML);
				// 方式二：
				var innerText = bj.innerText;
				console.log(innerText);
				// 方式三：重点理解方式三
				var firstChild = bj.firstChild;
				var nodeValue = firstChild.nodeValue;
				console.log(nodeValue);
			};

全选练习：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
<script type="text/javascript">

	window.onload = function(){
		
		
		//获取四个多选框items
		var items = document.getElementsByName("items");
		//获取全选/全不选的多选框
		var checkedAllBox = document.getElementById("checkedAllBox");
		
		/*
		 * 全选按钮
		 * 	- 点击按钮以后，四个多选框全都被选中
		 */
		
		//1.#checkedAllBtn
		//为id为checkedAllBtn的按钮绑定一个单击响应函数
		var checkedAllBtn = document.getElementById("checkedAllBtn");
		checkedAllBtn.onclick = function(){
			
			
			//遍历items
			for(var i=0 ; i<items.length ; i++){
				
				//通过多选框的checked属性可以来获取或设置多选框的选中状态
				//alert(items[i].checked);
				
				//设置四个多选框变成选中状态
				items[i].checked = true;
			}
			
			//将全选/全不选设置为选中
			checkedAllBox.checked = true;
			
			
		};
		
		/*
		 * 全不选按钮
		 * 	- 点击按钮以后，四个多选框都变成没选中的状态
		 */
		//2.#checkedNoBtn
		//为id为checkedNoBtn的按钮绑定一个单击响应函数
		var checkedNoBtn = document.getElementById("checkedNoBtn");
		checkedNoBtn.onclick = function(){
			
			for(var i=0; i<items.length ; i++){
				//将四个多选框设置为没选中的状态
				items[i].checked = false;
			}
			
			//将全选/全不选设置为不选中
			checkedAllBox.checked = false;
			
		};
		
		/*
		 * 反选按钮
		 * 	- 点击按钮以后，选中的变成没选中，没选中的变成选中
		 */
		//3.#checkedRevBtn
		var checkedRevBtn = document.getElementById("checkedRevBtn");
		checkedRevBtn.onclick = function(){
			
			//将checkedAllBox设置为选中状态
			checkedAllBox.checked = true;
			
			for(var i=0; i<items.length ; i++){
				
				//判断多选框状态
				/*if(items[i].checked){
					//证明多选框已选中，则设置为没选中状态
					items[i].checked = false;
				}else{
					//证明多选框没选中，则设置为选中状态
					items[i].checked = true;
				}*/
				
				items[i].checked = !items[i].checked;
				
				//判断四个多选框是否全选
				//只要有一个没选中则就不是全选
				if(!items[i].checked){
					//一旦进入判断，则证明不是全选状态
					//将checkedAllBox设置为没选中状态
					checkedAllBox.checked = false;
				}
			}
			
			//在反选时也需要判断四个多选框是否全都选中
			
			
			
		};
		
		/*
		 * 提交按钮：
		 * 	- 点击按钮以后，将所有选中的多选框的value属性值弹出
		 */
		//4.#sendBtn
		//为sendBtn绑定单击响应函数
		var sendBtn = document.getElementById("sendBtn");
		sendBtn.onclick = function(){
			//遍历items
			for(var i=0 ; i<items.length ; i++){
				//判断多选框是否选中
				if(items[i].checked){
					alert(items[i].value);
				}
			}
		};
		
		
		//5.#checkedAllBox
		/*
		 * 全选/全不选 多选框
		 * 	- 当它选中时，其余的也选中，当它取消时其余的也取消
		 * 
		 * 在事件的响应函数中，响应函数是给谁绑定的this就是谁
		 */
		//为checkedAllBox绑定单击响应函数
		checkedAllBox.onclick = function(){
			
			//alert(this === checkedAllBox);
			
			//设置多选框的选中状态
			for(var i=0; i <items.length ; i++){
				items[i].checked = this.checked;
			}
			
		};
		
		//6.items
		/*
		 * 如果四个多选框全都选中，则checkedAllBox也应该选中
		 * 如果四个多选框没都选中，则checkedAllBox也不应该选中
		 */
		
		//为四个多选框分别绑定点击响应函数
		for(var i=0 ; i<items.length ; i++){
			items[i].onclick = function(){
				
				//将checkedAllBox设置为选中状态
				checkedAllBox.checked = true;
				
				for(var j=0 ; j<items.length ; j++){
					//判断四个多选框是否全选
					//只要有一个没选中则就不是全选
					if(!items[j].checked){
						//一旦进入判断，则证明不是全选状态
						//将checkedAllBox设置为没选中状态
						checkedAllBox.checked = false;
						//一旦进入判断，则已经得出结果，不用再继续执行循环
						break;
					}
					
				}
				
				
				
			};
		}
		
		
	};
	
</script>
</head>
<body>

	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
		
		<br />
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br />
		<input type="button" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>
</body>
</html>

3.DOM查询的其他方法【非常重点】

获取元素	描述
document.body	返回文档的body元素

获取根节点	描述
document.documentElement	返回文档的根节点
document.all	返回页面中所有的元素

document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

注意是：querySelector()和querySeletorAll()可以传入css中相关的选择器，与css中的css选择器使用一样，这两个方法非常重要

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取body标签
				//var body = document.getElementsByTagName("body")[0];
				
				/*
				 * 在document中有一个属性body，它保存的是body的引用
				 */
				var body = document.body;
				
				/*
				 * document.documentElement保存的是html根标签
				 */
				var html = document.documentElement;
				
				//console.log(html);
				
				/*
				 * document.all代表页面中所有的元素
				 */
				var all = document.all;
				
				//console.log(all.length);
				
				/*for(var i=0 ; i<all.length ; i++){
					console.log(all[i]);
				}*/
				
				//all = document.getElementsByTagName("*");
				//console.log(all.length);
				
				
				/*
				 * 根据元素的class属性值查询一组元素节点对象
				 * getElementsByClassName()可以根据class属性值获取一组元素节点对象，
				 * 	但是该方法不支持IE8及以下的浏览器
				 */
				//var box1 = document.getElementsByClassName("box1");
				//console.log(box1.length);
				
				//获取页面中的所有的div
				//var divs = document.getElementsByTagName("div");
				
				//获取class为box1中的所有的div
				//.box1 div
				/*
				 * document.querySelector()
				 * 	- 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
				 * 	- 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
				 * 	- 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
				 */
				var div = document.querySelector(".box1 div");
				
				var box1 = document.querySelector(".box1")
				
				//console.log(div.innerHTML);
				//console.log(box1.innerHTML);
				
				/*
				 * document.querySelectorAll()
				 * 	- 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
				 * 	- 即使符合条件的元素只有一个，它也会返回数组
				 */
				box1 = document.querySelectorAll(".box1");
				box1 = document.querySelectorAll("#box2");
				console.log(box1);
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="box2"></div>	
		<div class="box1">
			我是第一个box1	 
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		
		<div></div>
	</body>
</html>