JS基础-DOM获取和操作节点

这是我的学习笔记，学的时候记录，后续方便查找复习。

一、获取元素节点

通过document对象调用。

1、getElementById()
	根据 id 属性获取 一个 元素节点对象；
	
2、getElementByTagName()
	根据 标签名 获取 一组 元素节点对象；
	
3、getElementByName()
	根据 name 属性获取 一组 元素节点对象；
	
PS:
	getElementsByClassName()
	根据 class 属性获取一组元素节点，但不支持IE8及以下的浏览器；

这里有一个例子：

<ul>
	<li id="bj"> 北京 </li>
	<li> 上海 </li>
	<li> 东京 </li>
	<li> 首尔 </li>
</ul>

<Button id="btn"> 按钮 </Button>

// 为id=btn的按钮绑定一个单机响应函数
var btn = document.getElementById("btn");

btn.onclick = function(){

	// 查找所有li节点,将返回的元素封装到一个 类数组 对象中
	var lis = document.getElementByTagName("li");
	alert(lis.length);  // 4
	
	// 查看所有li
	for(var i=0; i < lis.length; i++){
	
		// 通过innerHtml属性可以获取到元素内部的HTML代码
		alert(lis[i].innerHtml); // 北京 上海 东京 首尔
	}
}

若需要读取元素节点属性，则：元素.属性名

eg: 元素.id  元素.name  元素.value

注意：
// class 属性不能采用元素.属性名这种方式;
// 对于自结束标签 innerHtml 属性没有意义；eg: <input />

二、获取元素节点的子节点

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

方法：
1、getElementByTagName()
	返回当前节点的指定标签名后代节点；
	
属性：
1、childNodes
	表示当前节点的所有子节点；
	
2、firstChild
	表示当前节点的第一个子节点；
	
3、lastChild
	表示当前节点的最后一个子节点；

同样的一个例子：

<ul id="city">
	<li id="bj"> 北京 </li>
	<li> 上海 </li>
	<li> 东京 </li>
	<li> 首尔 </li>
</ul>

<Button id="btn"> 按钮 </Button>

// 为id=btn的按钮绑定一个单机响应函数
var btn = document.getElementById("btn");

btn.onclick = function(){

	// 获取id = sh的节点
	var city= document.getElementById("city");
	
	// 获取city的所有子节点
    var cns = city.childNodes;  // 会包括文本节点在内的所有节点
    alert(cns.length);  // 9；包括了 ul 和 li 之间的空白（文本节点）
	
	// 获取city的所有子元素
    var cns2 = city.children;
    alert(cns2.length);  // 4
    
	// 获取city的第一个子节点（包括空白节点）
    var fir= city.firstChild;
    alert(fir);  //  ；空白节点
    // alert(fir.innerHtml);  // 若去掉中间的空白，则返回的是北京
    
    
    // 获取city的第一个子元素（IE8及以下不支持firstElementChild）
	fir =  city.firstElementChild;
   
   
   var fc = city.firstChild;
   alert(fc.nodeValue);  // 
}

三、获取父节点和兄弟节点

通过具体的节点调用。

属性：
1、parentNode
	表示当前节点的父节点；
	
2、previousSibling
	表示当前节点的前一个兄弟节点；
	
3、nextSibling
	表示当前节点的后一个兄弟节点；

还是这样的一个例子：

<ul id="city">
	<li id="bj"> 北京 </li>
	<li id="sh"> 上海 </li>
	<li> 东京 </li>
	<li> 首尔 </li>
</ul>

<Button id="btn"> 按钮 </Button>

var btn = document.getElementById("btn");

btn.onclick = function(){
	// 获取id = sh的节点
	var sh= document.getElementById("sh");

	// 返回sh的父节点
	var pn = sh.parentNode;
	alert(pn.innerHtml);  //  ul的文本就是一群li  
	 					 /**
							<li id="bj"> 北京 </li>
							<li id="sh"> 上海 </li>
							<li> 东京 </li>
							<li> 首尔 </li>
						 **/
						 
	// innerText 属性 获取元素内部的文本内容，但会自动去掉html标签
	alert(pn.innerText);  /**
							 北京 
							 上海 
							 东京
						     首尔
						  **/
	
	// 获取sh的前一个兄弟节点（也能获取到空白的文本）
	var pn2 = sh.previousSibling;
	// 获取sh的前一个兄弟元素 
	var pn3 = sh.previousElementSibling;
	alert(pn3.innerText); // 北京
	
	
}

四、补充

获取根标签的补充：

// 获取body、html根标签、页面所有元素
var body = document.body;
var html = document.documentElement;
var all = dociment.all;

querySelector() 根据css选择器查询

1、document.querySelector()
	-  需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象；
	-  虽然IE8中没有getElementsByClassName()，但是可以使用querySelector()代替；
	-  使用该方法会返回唯一的一个元素，如果满足的有多个，只返回第一个；

2、document.querySelectorAll()
	-  和querySelector()使用方法类似，不同的是将符合条件的元素封装到一个数组中返回；
	-  即使符合条件的元素只有一个，他也会返回数组；

以下是用法例子：

 // 获取class = box1 下的div元素
 var div = document.querySelector(".box1 div"); 

 // 获取class = box1的元素，有多个也只返回第一个
 var box1= document.querySelector(".box1");  

 // 获取所有class = box1的元素，封装到数组里
 box1 = document.querySelectorAll(".box1");  

 // 获取id = box2的元素，封装到数组里,一个也封装
 box1 = document.querySelectorAll("#box2"); 

持续更新

这里只是DOM基本操作的认识与了解，后面若有相关的继续更新。