javascript(17)dom节点获取

		获取节点的三种方法:
		getElementById()
		通过元素的id来获取元素节点
		getElementsByTagName()
		通过元素的标签名来获取节点，获取的节点是一个集合，可以使用数组的方法来获取单个的节点如：节点对象[0]
		getElementsByName()
		通过元素的属性名来获取节点，获取的节点是一个列表，也可以使用数组的方法或获取单个节点:节点对象[0]

			window.onload=function(){
				//通过元素的name属性来获取元素节点，返回的是一个数组
				/*可以通过不同的索引来引用不同的元素节点.
				对于元素节点的属性可以直接通过.来调用
				比如sex.name,sex.value,sex.id,但是不能使用sex.class*/
				var sex=document.getElementsByName("sex");
				console.log("通过getElementsByName获取sex:"+sex[0].value);
				var liByTag=document.getElementsByTagName("li");
//				通过innerHTML来获取节点内的文本内容
				console.log("通过getElementByTagId获取li节点："+liByTag[0].innerHTML);
				var but01=document.getElementById("but01");
				console.log("通过getElementById获取button节点:"+but01.innerHTML);
				};
				

所有的代码都必须在window.onload(){};中
这保证了js代码在页面加载完整个文档和元素之后运行代码

body部分

		<input type="checkbox" name="sex" value="男">男
		<input type="checkbox" name="sex" value="女">女
		<ul>
			<li>第一个li节点</li>
			<li>第二个li节点</li>
		</ul>
		<button id="but01">点击按钮</button>

执行结果：
页面内容：

控制台输出：

节点对象的属性:
   获取子节点:
      获取所有的子节点,包括空白的文本节点.IE8以及以下浏览器不会显示空白文本节点:
                                    childNodes
获取第一个子节点:
                                    firstChild
获取所有的元素子节点:
                                    children
获取第一个元素子节点:
IE8不行吼
                                    firstElementChild
                                    lastElementChild
获取兄弟节点,父节点:
获取父节点:
                                    parentNode
获取前一个兄弟节点:
                                    previousSibling
获取后一个兄弟节点:
                                    nextSibling
获取前一个元素兄弟节点:
                                    previousElementSibling

		window.onload=function(){
				var uList=document.getElementById("uList");
				var childNodes=uList.childNodes;
				//第一个节点是空白的文本节点
				console.log("childNodes[0]:"+childNodes[0]);
				console.log("childNodes[0]内部的内容:"+childNodes[0].innerHTML);
				console.log("childNodes[1]:"+childNodes[1]);
				console.log("childNodes[1]内部的内容:"+childNodes[1].innerHTML);
				//E8以及以下浏览器不能使用该属性
				console.log("uList.firstElementChild内部的内容："+uList.firstElementChild.innerHTML);
				
				var children=uList.children;
				console.log('children[0].innerHTML:'+children[0].innerHTML);
				
				console.log("children[0].parentNode.id:"+children[0].parentNode.id);
				
				console.log('children[0].nextElementSibling.innerHTML:'+children[0].nextElementSibling.innerHTML);
				
				console.log('children[0].nextSibling:'+children[0].nextSibling);
				
				console.log("childNodes[3].previousSibling.innerHTML:"+childNodes[4].previousSibling.innerHTML);
				};
						

其他浏览器：

IE8以及以下不能使用firstElementChild

注意：当使用children获取节点的所有元素节点的时候，如果对于children的元素使用nextSibing属性的时候，会出现文本节点。因为每一个children中的元素都是元素节点。