總結DOM中的節點和關系屬性

來源：懂視網責編：小采時間：2020-11-27 20:19:18

總結DOM中的節點和關系屬性

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

推薦度：

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

導讀總結DOM中的節點和關系屬性:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1"> <h1>培訓課程</h1> <ul> <

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

節點:Node 一個頁面中的標簽、文字、注釋。。都是節點

childNodes：獲取所有的子節點

children:獲取所有的元素子節點

parentNode:獲取父親節點

previousSibling:獲取上一個哥哥節點

nextSibling:獲取下一個弟弟節點

firstChild：獲取所有的子節點中的第一個

lastChild：獲取所有子節點中的最后一個

在js中需要我們掌握的節點類型:

　　　　　　　　　　　　　　nodeType nodeName nodeValue

　　元素節點(元素標簽) 1 大寫的標簽名 null

　　文本節點（文字）　　　　　　3 　　　　　　#text　　　　　　　　　文字內容

　　注釋節點（注釋）　　　　　　8　　　　　　#comment　　　　　　　注釋內容

　　document　　　　　　　　　9　　　　　　#document　　　　　　　null

　　注意：在標準瀏覽器下，我們把space空格和Enter回車都當作我們的文本節點

　　方法：模擬我們的children方法，實現獲取指定元素下的元素子節點　　

 / * getMyChildren:獲取制定元素下的所有的元素節點 * @parameter： 
　　* ele:我們要獲取誰下面的，就把誰傳過來
　　　　　　　tagName:獲取元素的類型
 * @return:
 * 我們最后獲取的元素子節點
 * 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;

 }

獲取一個元素的上一個哥哥元素子節點　

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

獲取一個元素的所有的哥哥元素節點

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

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

總結DOM中的節點和關系屬性

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

推薦度：

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

標簽：中的關系屬性

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

總結DOM中的節點和關系屬性

總結DOM中的節點和關系屬性

總結DOM中的節點和關系屬性

最新推薦

猜你喜歡

熱門推薦