一、DOM對象

1、什麽是HTML DOM

• HTML Document Object Model（文檔對象模型）
• HTML DOM 定義了訪問和操作HTML文檔的標準方法
• HTML DOM 把 HTML 文檔呈現為帶有元素、屬性和文本的樹結構（節點樹)

2、DOM樹

畫dom樹是為了展示文檔中各個對象之間的關系，用於對象的導航。

3、DOM節點

3.1 節點類型：

HTML 文檔中的每個成分都是一個節點。

DOM 是這樣規定的：
整個文檔是一個文檔節點 。（document）
每個 HTML 標簽是一個元素節點。 （element）
包含在 HTML 元素中的文本是文本節點。 （text）
每一個 HTML 屬性是一個屬性節點。（attribute）

3.2 節點關系

節點樹中的節點彼此擁有層級關系。
父(parent),子(child)和同胞(sibling)等術語用於描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。

• 在節點樹中，頂端節點被稱為根（root）
• 每個節點都有父節點、除了根（它沒有父節點）
• 一個節點可擁有任意數量的子
• 同胞是擁有相同父節點的節點

下面的圖片展示了節點樹的一部分，以及節點之間的關系：

訪問 HTML 元素（節點）,訪問 HTML 元素等同於訪問節點,我們能夠以不同的方式來訪問 HTML 元素。

3.3 節點查找

直接查找節點

document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)
document.getElementsByClassName(“name”)
 

<div id="div1">

    <div class="div2">i am div2</div>
    <div name="yuan">i am div2</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
</div>

<script>

   var div1=document.getElementById("div1");

////支持;
//   var ele= div1.getElementsByTagName("p");
 

//   alert(ele.length);
////支持
//   var ele2=div1.getElementsByClassName("div2");
//   alert(ele2.length);
////不支持
//   var ele3=div1.getElementById("div3");
//   alert(ele3.length);
////不支持
//   var ele4=div1.getElementsByName("yuan");
//   alert(ele4.length)

</script>

導航節點屬性

parentElement           // 父節點標簽元素

children                // 所有子標簽

firstElementChild       // 第一個子標簽元素

lastElementChild        // 最後一個子標簽元素

nextElementSibling      // 下一個兄弟標簽元素

previousElementSibling  // 上一個兄弟標簽元素

註意，js中沒有辦法找到所有的兄弟標簽！

3.4 節點操作

創建節點：

createElement(標簽名) ：創建一個指定名稱的元素。

例：var tag=document.createElement(“input")
tag.setAttribute(‘type‘,‘text‘);

添加節點：

追加一個子節點（作為最後的子節點）
somenode.appendChild(newnode)
 
把增加的節點放到某個節點的前邊
somenode.insertBefore(newnode,某個節點); 

刪除節點：

somenode.removeChild()：獲得要刪除的元素，通過父元素調用刪除

替換節點:

somenode.replaceChild(newnode, somechildnode);

節點屬性操作：

1、獲取文本節點的值：

　　innerText 獲取純文本，修改成標簽樣式也只會是文本

　　innerHTML 獲取節點下所有標簽及文本

2、attribute操作

elementNode.setAttribute(name,value)    

elementNode.getAttribute(屬性名)        <-------------->elementNode.屬性名(DHTML)

elementNode.removeAttribute(“屬性名”);

3、value獲取當前選中的value值

　　1.input

　　2.select（selectIndex）

　　3.textarea

4、innerHTML 給節點添加html代碼：
該方法不是w3c的標準，但是主流瀏覽器支持
tag.innerHTML = “<p>要顯示內容</p>”;

5、關於class的操作：

elementNode.className
elementNode.classList.add
elementNode.classList.remove

6、改變css樣式：

<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
                             .style.fontSize=48px

Day53：DOM對象（節點關系、查找、操作）