js學習
以後堅持一日一更，和大家分享我每天學習的成果及經驗，讓想要學習的小夥伴少走彎路。
好久不見，大家有沒有想我啊，雖然過年，但是我也沒閒着，複習了一下之前學的內容
https://pan.baidu.com/s/1l3I7yDGSve361MPbYJx2Pw，這個鏈接是我在寒假的時候做的思維導圖，有興趣的可以去下載(雖然還有ajax部分沒有做)。
DOM其實就是JavaScript讓HTML網頁動起來的接口
DOM節點：HTML中每個元素都是一個節點，文本屬性是元素節點的子節點
HTML文檔中的所有節點構成一棵DOM樹，文本節點和屬性節點就是這棵樹上的果子，
元素節點就是樹枝，操作時，順枝摘果子，要先取得元素節點，才能取到元素節點下面的子節點
DOM對象常用的方法：
getElmentById("id名")返回指定id名的元素節點getElmentsByTagName("標籤名")返回帶有指定標籤名的所有元素節點列表（以數組形式存儲）getElmentsByClassName("class名")返回帶有制定class名的所有元素節點列表（以數組的形式存儲）getElmentsByName("name名")返回帶有指定name的所有元素節點列表（以數組的形式存儲）appendChild()把新的子節點添加到指定節點removeChild()刪除子節點replaceChild()替換子節點cloneNode()克隆，複製子節點insertBefore()在指定子節點前面插入新的子節點createElment()創建屬性節點createTextNode()創建文本節點getAttribute()返回指定屬性值setAttribute()把指定屬性設置或修改爲指定值
DOM節點分爲三類:元素節點，屬性節點，文本節點
①getElmentById(“id名”)
var XXX = document.getElementById(“id”);
getElmentById(“id名”)：取得元素的id，若找到則返回該元素，若不存在則返回null
②getElmentsByTagName(“標籤名”)
var XXX = document.getElementsByTagName(“div”);
getElmentsByTagName(“標籤名”)：根據標籤名獲取元素
③getElmentsByClassName(“class名”)
var XXX= document.getElementsByClassName(“cont”);
getElmentsByClassName(“class名”)：根據class名獲取元素
④getElmentsByName(“name名”)
var XXX = document.getElementsByName(“btn”)[0];
getElmentsByName(“name名”)：根據name獲取元素
總結：getElementsByName(“btn”)[0]–返回的都是數組，後面的[0]就是指明下標，getElmentById(“id名”)後不可加[0],因爲id是唯一的
<body>
<div id="div1">div01</div>
<div id="div2">div02</div>
<p id="p_center">這是一個p標籤</p>
<h4 class="p1">這是一個h4標籤</h4>
<p class="p1">這是一個有class名的p標籤</p>
<button name="btn">這是一個按鈕</button>
<script>
//注意js代碼位置
var div = document.getElementById("div1");
//獲取id名爲div1的元素節點，以及元素節點下的文本節點和屬性節點
console.log(div);
var div2 = document.getElementById("div1");
//getElementById()，如果出現id重名，那麼只能取到第一個
console.log(div2);
var div3 = document.getElementsByTagName("div");
console.log(div3);
for(var i = 0; i < div3.length; i++) {
console.log(div3[i]);
div3[i].onclick = function() {
alert("點擊了一下！");
}
}
var classname = document.getElementsByClassName("p1");//獲取class名爲p1的所有元素節點的集合，是數組
console.log(classname);
for (var i = 0;i < classname.length;i++) {
//遍歷數組
console.log(classname[i]);
classname[i].onclick = function(){//給數組中的每一項添加點擊事件
console.log("p1");
}
}
var name1 = document.getElementsByName("btn")[0];
//獲取所有name屬性值爲btn的元素節點的集合，如果只有一個name屬性，那麼就直接改用下標的形式更爲方便
console.log(name1);
name1.onclick = function(){
alert("ok");
}
</script>
</body>