JavaScript進擊之路（1）
阿新 • • 發佈：2019-02-19
一、DOM學習
1.5個常用的DOM方法（getElementById、getElementsByTagName、getElementsByClassName、getAttribute、setAttribute）
2.D為document（文件）；O為object（物件）劃分3種分別包含使用者自行定義的物件、內建物件如Array,Math等、宿主物件由瀏覽器提供的物件；M為model（模型）
3.DOM可以抽象的理解為一棵樹，用parent（父）、child（子）、sibling（兄弟）來描述各個元素節點之間的關係。
4.節點（node）包含元素節點（element node）如<body>、<li>等元素、文字節點（被包含在元素節點之內）、屬性節點（對元素做出更加詳細的描述）如title的內容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>buy Something</title> </head> <body> <h1>What to buy</h1> <p title = "topic" id = "nodelem"> Don't forget to buy this stuff</p> <ul id = "buySomeThing"> <li>book</li> <li class = "sale">food</li> <li class = "sale">dog</li> </ul> </body> </html>
獲取元素3個方法：
1.getElementById 獲取並返回一個與給定id屬性的元素節點物件
document.getElementById("buySomething");2.getElementsByTagName 返回一個物件陣列，每個物件對應文件中給定標籤的一個元素
document.getElementsByTagName("li");還可以通過萬用字元獲取該文件中所有的元素（獲取當前文件中的所有元素物件）var element = document.getElementsByTagName("li"); for(var i=0;i<element.length;i++){ alert(element.[i]); }
alert(document.getElementsByTagName("*").length);document.getElementsByCalssName("sale");獲取和設定屬性
1.getAttribute 獲取元素物件的屬性
var element = document.getElementsByTagName("p");
for(var k = 0;k<element.length;k++){
alert(element[k].getAttribute("title"));
}2.setAttribute 對元素節點的屬性做修改
將上例中的title屬性topic 修改為onepiece
var element = document.getElementsByTagName("p");
for(var k = 0;k<element.length;k++){
element[k].setAttribute("title","onepiece");
alert(element[k].getAttribute("title"));
}擴充套件DOM屬性
1.childNodes可以獲取任何一個元素的所有子元素
var bodychild = document.getElementsByTagName("body").[0];
alert(bodychild.childNodes.length);*元素節點的nodeType的屬性值為1；
*文字節點的nodeType的屬性值為2；
*屬性節點的nodeType的屬性值為3；
3.nodeValue獲得/設定文字節點的內容
var nodelem = document.getElementById("nodelem");
alert(nodelem.nodeValue);alert(nodelem.childNodes[0].nodeValue);修改文字節點的文字內容則如：
nodelem.childNodes[0].nodeValue = "Buy some storybooks";