一、前言
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; } }
三、总结