一、前言
1、元素和节点的区别
2、总结获取元素的方式
3、总结获取节点的方式
二、主要内容
1、结点和元素的区别
（1）一些常见基本概念：
文档：document
元素：页面中所有的标签
结点：页面中所有的内容包括（标签，属性，文本（文字，空格，换行，回车））
根元素：html标签
（2）节点属性
nodeType:表示节的类型： 1-------表示是标签， 2-------属性， 3-------文本
nodeName:节点的名字： 标签------大写的标签名字， 属性-----小写的属性名， 文本-----#text
nodeValue: 节点的值：标签节点----null, 属性节点-----属性值， 文本节点------文本内容
（3）获取节点和元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="dv">哦哦
<span>这是div中的第一个span标签</span>
<p>这是div中的第二个元素,第一个p标签</p>
<ul id="uu">
<li>1</li>
<li>2</li>
<li id="three">3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type="text/javascript">
var ulObj=document.getElementById("uu");
var liObj=document.getElementById("three");
//父级节点====><div id='dv'>
console.log(ulObj.parentNode)
//父级元素====><div id='dv'>
console.log(ulObj.parentElement)
//子节点====》NodeList(11) [text, li, text, li, text, li#three, text, li, text, li, text]
console.log(ulObj.childNodes)
//子元素===>HTMLCollection(5) [li, li, li#three, li, li, three: li#three]
console.log(ulObj.children) //第一个子节点====>#text----------------------------在IE8中是第一个子元素<li>1</li>
console.log(ulObj.firstChild)
//第一个子元素====>li-------------------------------IE8中不支持
console.log(ulObj.firstElementChild)
//最后一个子节点==>
console.log(ulObj.lastChild);//------------------------IE8中是第一个子元素
//最后一个子元素
console.log(ulObj.lastElementChild);//-----------------IE8中不支持
//获取某个元素前一个兄弟节点
console.log(liObj.previousSibling)
//获取前一个兄弟元素
console.log(liObj.previousElementSibling)
//某个元素的后一个兄弟节点
console.log(my$("three").nextSibling);
//某个元素的后一个兄弟元素
console.log(my$("three").nextElementSibling);
</script>
</body>
</html>
（4）获取元素
/*
*
* （1）根据id属性的值获取元素,返回来的是一个元素对象
* document.getElementById("id属性的值");
*
* （2）根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.getElementsByTagName("标签名字");
*
* 下面的几个,有的浏览器不支持
*
*（3） 根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.getElementsByName("name属性的值")
*（4）根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.getElementsByClassName("类样式的名字")
*（5）根据选择器获取元素,返回来的是一个元素对象-------------IE8以下不支持
* document.querySelector("选择器的名字");
*
*（6）根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.querySelectorAll("选择器的名字")
*
*
* */
（5）获取第一个元素和最后一个的兼容性写法
function getFirstElementChild(element) {
if(element.firstElementChild){//支持
return element.firstElementChild;
}else{
var node=element.firstChild;//获取第一个节点，万一ie中为第一个元素
while (node&&node.nodeType!=1){//火狐和谷歌中获取到第一个节点是标签，就取他的兄弟节点
node=node.nextSibling;
}
return node;
}
}
//获取任意一个父级元素的最后一个子级元素
function getLastElementChild(element) {
if(element.lastElementChild){//true--->支持
return element.lastElementChild;
}else{
var node=element.lastChild;//第一个节点
while (node&&node.nodeType!=1){
node=node.previousSibling;
}
return node;
}
}
三、总结