概念
文档：document元素（element）：页面中所有的标签，即使元素也是节点节点（node）：页面中所有的内容，包括标签、属性（标签的属性）、文本(文字,换行,空格,回车))根元素:html标签节点
节点的属性:(可以使用标签–元素.（点）出来,可以使用属性节点.出来,文本节点.点出来)nodeType:节点的类型:1----标签,2—属性,3—文本nodeName:节点的名字:标签节点—大写的标签名字,属性节点—小写的属性名字,文本节点----#textnodeValue:节点的值:标签节点—null,属性节点—属性值,文本节点—文本内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</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> </ul> </div> <script> var ulObj=document.getElementById("uu"); console.log(ulObj.parentNode);//div console.log(ulObj.parentNode.parentNode);//body console.log(ulObj.parentNode.parentNode.parentNode);//html console.log(ulObj.parentNode.parentNode.parentNode.parentNode);//document console.log(ulObj.parentNode.parentNode.parentNode.parentNode.parentNode);//null // ul标签的父级节点 console.log(ulObj.parentNode);//dv // ul标签的父级元素 console.log(ulObj.parentElement);//dv，说明标签即使元素也是节点 //节点的个数比元素多 console.log(ulObj.childNodes); //NodeList(9) [text, li, text, li, text, li#three, text, li, text] console.log(ulObj.children); //HTMLCollection(4) [li, li, li#three, li, three: li#three] </script> </body> </html>获取元素和节点的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</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> </ul> </div> <script> var ulObj=document.getElementById("uu"); //父级节点 console.log(ulObj.parentNode); //父级元素 console.log(ulObj.parentElement); //子节点 console.log(ulObj.childNodes); //子元素 console.log(ulObj.children); //第一个子节点 console.log(ulObj.firstChild);//IE8中是第一个子元素 //第一个子元素 console.log(ulObj.firstElementChild);//IE8中不支持 //最后一个子节点 console.log(ulObj.lastChild);//IE8中是第一个子元素 //最后一个子元素 console.log(ulObj.lastElementChild);//IE8中不支持 //某个元素的前一个兄弟节点 console.log(my$("three").previousSibling); //某个元素的前一个兄弟元素 console.log(my$("three").previousElementSibling); //某个元素的后一个兄弟节点 console.log(my$("three").nextSibling); //某个元素的后一个兄弟元素 console.log(my$("three").nextElementSibling); // //第一个子节点 // console.log(ulObj.firstChild.innerText); // //最后一个子节点 // console.log(ulObj.lastChild.innerText); // //某个元素的前一个兄弟节点 // console.log(my$("three").previousSibling.innerText); // //某个元素的后一个兄弟节点 // console.log(my$("three").nextSibling.innerText); </script> </body> </html>总结: 凡是获取节点的代码在谷歌和火狐得到的都是 相关的节点 凡是获取元素的代码在谷歌和火狐得到的都是 相关的元素 从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持
