總結(jié)DOM中的節(jié)點和關(guān)系屬性

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 20:19:18

總結(jié)DOM中的節(jié)點和關(guān)系屬性

總結(jié)DOM中的節(jié)點和關(guān)系屬性:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1"> <h1>培訓(xùn)課程</h1> <ul> <

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀總結(jié)DOM中的節(jié)點和關(guān)系屬性:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1"> <h1>培訓(xùn)課程</h1> <ul> <

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
 <div id="div1">
 <h1>培訓(xùn)課程</h1>
 <ul>
 <li>html+css</li>
 <li>javascript</li>
 <li>正式課</li>
 <li>移動端課程</li>
 <li>node.js正式課</li>
 </ul>
 </div>
 <script>//獲取關(guān)系的屬性var oDiv = document.getElementById("div1");
 console.log(oDiv.childNodes);//獲取所有的子節(jié)點console.log(oDiv.children);//獲取所有的元素子節(jié)點</script>
</body>
</html>

節(jié)點:Node 一個頁面中的標(biāo)簽、文字、注釋。。都是節(jié)點

childNodes：獲取所有的子節(jié)點

children:獲取所有的元素子節(jié)點

parentNode:獲取父親節(jié)點

previousSibling:獲取上一個哥哥節(jié)點

nextSibling:獲取下一個弟弟節(jié)點

firstChild：獲取所有的子節(jié)點中的第一個

lastChild：獲取所有子節(jié)點中的最后一個

在js中需要我們掌握的節(jié)點類型:

　　　　　　　　　　　　　　nodeType nodeName nodeValue

　　元素節(jié)點(元素標(biāo)簽) 1 大寫的標(biāo)簽名 null

　　文本節(jié)點（文字）　　　　　　3 　　　　　　#text　　　　　　　　　文字內(nèi)容

　　注釋節(jié)點（注釋）　　　　　　8　　　　　　#comment　　　　　　　注釋內(nèi)容

　　document　　　　　　　　　9　　　　　　#document　　　　　　　null

　　注意：在標(biāo)準(zhǔn)瀏覽器下，我們把space空格和Enter回車都當(dāng)作我們的文本節(jié)點

　　方法：模擬我們的children方法，實現(xiàn)獲取指定元素下的元素子節(jié)點　　

 / * getMyChildren:獲取制定元素下的所有的元素節(jié)點 * @parameter： 
　　* ele:我們要獲取誰下面的，就把誰傳過來
　　　　　　　tagName:獲取元素的類型
 * @return:
 * 我們最后獲取的元素子節(jié)點
 * by xxxxxxxxx
 * */function getMyChildren(ele,tagName){var ary = [],nodes = ele.childNodes;for(var i = 0;i<nodes.length;i++){var cur = nodes[i];if(cur.nodeType===1){
　　　　　　　　　　　　if(tagName){
　　　　　　　　　　　　　　if(cur.nodeName.toLowerCase===tagName.toLowerCase){
　　　　　　　　　　　　　　　　ary.push(cur)
　　　　　　　　　　　　　　}
　
　　　　　　　　　　　　}else{

 　　　　　　　　　　　　ary.push(cur);

　　　　　　　　　　　　}
 
 }
 }return ary;

 }

獲取一個元素的上一個哥哥元素子節(jié)點　

 pre =(pre && pre.nodeType!==1=

獲取一個元素的所有的哥哥元素節(jié)點

 function prevAll(ele){var pre = ele.previousSibling,ary = [];while(pre){if(pre,nodeType===1){
 ary.unshift(pre);
 }
 pre = pre.previousSibling;
 }return ary;
 }

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

總結(jié)DOM中的節(jié)點和關(guān)系屬性

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽：中的關(guān)系屬性

熱門焦點

總結(jié)DOM中的節(jié)點和關(guān)系屬性

總結(jié)DOM中的節(jié)點和關(guān)系屬性

總結(jié)DOM中的節(jié)點和關(guān)系屬性

最新推薦

猜你喜歡

熱門推薦