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

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

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

總結(jié)DOM中的節(jié)點(diǎn)和關(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> <

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀總結(jié)DOM中的節(jié)點(diǎn)和關(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>移動(dòng)端課程</li>
 <li>node.js正式課</li>
 </ul>
 </div>
 <script>//獲取關(guān)系的屬性var oDiv = document.getElementById("div1");
 console.log(oDiv.childNodes);//獲取所有的子節(jié)點(diǎn)console.log(oDiv.children);//獲取所有的元素子節(jié)點(diǎn)</script>
</body>
</html>

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

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

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

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

previousSibling:獲取上一個(gè)哥哥節(jié)點(diǎn)

nextSibling:獲取下一個(gè)弟弟節(jié)點(diǎn)

firstChild：獲取所有的子節(jié)點(diǎn)中的第一個(gè)

lastChild：獲取所有子節(jié)點(diǎn)中的最后一個(gè)

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

　　　　　　　　　　　　　　nodeType nodeName nodeValue

　　元素節(jié)點(diǎn)(元素標(biāo)簽) 1 大寫(xiě)的標(biāo)簽名 null

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

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

　　document　　　　　　　　　9　　　　　　#document　　　　　　　null

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

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

 / * getMyChildren:獲取制定元素下的所有的元素節(jié)點(diǎn) * @parameter： 
　　* ele:我們要獲取誰(shuí)下面的，就把誰(shuí)傳過(guò)來(lái)
　　　　　　　tagName:獲取元素的類型
 * @return:
 * 我們最后獲取的元素子節(jié)點(diǎn)
 * 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;

 }

獲取一個(gè)元素的上一個(gè)哥哥元素子節(jié)點(diǎn)　

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

獲取一個(gè)元素的所有的哥哥元素節(jié)點(diǎn)

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

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

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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

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

熱門焦點(diǎn)

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

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

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

最新推薦

猜你喜歡

熱門推薦