一、什麽是HTML DOM

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

二、DOM樹

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

三、DOM節點

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

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

其中，document與element節點是重點。

2.節點關系

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

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

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

3.節點查找

有兩種方式：

　　方式一：直接查找節點（這是一個查找方法）

//     節點查找(節點也就是一個個的標簽)
        document.getElementById(‘idname‘);//按照id查找，拿到的是一個標簽對象
        document.getElementsByClassName(‘classname‘);//按照class標簽去找，得到的是一個數組裏存放的標簽
        document.getElementsByTagName(‘tagname‘);//通過標簽名去找，拿到的也是一個數組
        var a = document.getElementsByName(‘yuan‘); //按照name屬性去找,拿到的也是一個數組
 

        console.log(a);

// /    ==2.========================
    var ele = document.getElementById(‘div1‘);
    console.log(ele.length);//返回undified

    var ele2 = document.getElementById(‘div3‘);
    console.log(ele2.length);//返回undified

    var ele3 = document.getElementsByClassName(‘div2‘);
    console.log(ele3.length); //返回1

    var ele4 = document.getElementsByTagName(‘p‘);
    console.log(ele4.length) ;//返回1

    var ele5 = document.getElementsByName(‘haiyan‘);
    console.log(ele5.length); //返回1

//====3.=============================
id和name的不支持
   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)

length屬性

上述的length：返回的是標簽的個數，，一個是在局部下的，，，一個是在全局下的（document.~~~）

方式二：導航查找節點：通過某一個標簽的位置去查找另一個標簽（這是一個導航屬性）

‘‘‘

parentElement           // 父節點標簽元素

children                // 所有子標簽

firstElementChild       // 第一個子標簽元素

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

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

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

‘‘‘

//    方式二：導航查找
//<div id =‘div1‘>
//     <div class="div2" name = ‘haiyan‘>lallala</div>
//     <div name="haiyan">lkkaakkka</div>
//     <div id =‘div3‘>aaaaaaaaaaaaaa</div>
//    <p>hrllo</p>
//</div>
//註意：1.如果是數組的話後面切記getElementsByClassName(‘div2‘)[0]
//        2.查找元素的那些方法Elements加了s的打印的就是數組
//    1，==================
    var ele = document.getElementsByClassName(‘div2‘)[0];
    var ele1= ele.parentElement;
    console.log(ele1)  ;//找div2標簽的父親
//    2.===============
    var ele = document.getElementById(‘div1‘);
    var ele1 = ele.children;
    console.log(ele1) ; //找到div1下的所有的子標簽
//    3.===================
    var ele = document.getElementById(‘div1‘);
    var ele1 = ele.firstElementChild;
    console.log(ele1);  //找到div1下的第一個子標簽的元素
//    4.==================
    var ele = document.getElementById(‘div1‘);
    var ele1 = ele.lastElementChild;
    console.log(ele1);  //找到div1下的最後一個子標簽的元素
//    5.===============
    var ele = document.getElementsByName(‘haiyan‘)[0];
    var ele1 = ele.nextElementSibling;
    console.log(ele1) ; //下一個兄弟標簽元素
//    6.===============
    var ele = document.getElementsByName(‘haiyan‘)[0];
    var ele1 = ele.previousElementSibling;
    console.log(ele1)  //上一個兄弟標簽元素

測試

4.節點操作

1.創建節點

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

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

2.添加節點

追加一個子節點（作為最後的子節點）

somenode.appendChild(newnode)
 

把增加的節點放到某個節點的前邊

somenode.insertBefore(newnode,某個節點);

3.刪除節點

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

4.替換節點

somenode.replaceChild(newnode, 某個節點);

5.節點屬性操作

　　1.獲取文本節點的值：innerText innerHTML

　　　innerText:不管你是賦值還是取值，只能識別純文本

    innerHtml:既可以識別純文本，也可以識別標簽

//    文本屬性
//  1.innerText:不管你是賦值還是取值，只能識別純文本
        var a1 = document.getElementsByClassName(‘c2‘)[0];
//        console.log(a1);
        //取值操作
        console.log(a1.innerText); //你好嗎/
        console.log(a1.innerHTML); //你好嗎/
        //賦值操作
        a1.innerText=‘Egon‘;
        a1.innerHTML=‘<a href="">hello</a>‘;
//  2.innerHtml:既可以識別純文本，也可以識別標簽
        var b1 = document.getElementsByClassName(‘c2‘)[1];
//        console.log(b1);
        //取值操作
        console.log(b1.innerText);
        console.log(b1.innerHTML);
        //賦值操作
        b1.innerText = ‘lala‘;
        b1.innerHTML = ‘<input type="text">‘;

2.屬性（attribute）操作：

 elementNode.setAttribute(name,value)    
 elementNode.getAttribute(屬性名)        <-------------->elementNode.屬性名(DHTML)
 elementNode.removeAttribute(“屬性名”);

泛指所有的屬性,getAttribute 可以操作其他的，但是不可以操作class

<body><div class="c1" id="d1">DIV</div>
<script>
    var ele = document.getElementsByClassName(‘c1‘)[0];
    ele.id=‘d2‘;//修改id
    console.log(ele);

//取屬性值 :
//    方式一
    console.log(ele.getAttribute(‘id‘));
//    方式二
    console.log(ele.id);
/ 屬性賦值
//    方式一
    ele.setAttribute(‘id‘,‘d3‘);
    console.log(ele);
//    方式二
    ele.id = ‘d3‘;
    console.log(ele);

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

　　 1.input
　　 2.select （selectedIndex）
　　3.textarea

四、DOM Event(事件)

1.事件類型

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素獲得焦點。               練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange       域的內容被改變。             應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並松開。
onkeyup        某個鍵盤按鍵被松開。

onload         一張頁面或一幅圖像完成加載。

onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。
onmouseleave   鼠標從元素離開

onselect       文本被選中。
onsubmit       確認按鈕被點擊

2.綁定事件方式

方式一:

<!--綁定事件的方式一-->
<div onclick="foo(this)">div</div>
<div class="c1">div2</div>
<script>
    function foo(self) {
        console.log(self); //<div onclick="foo(this)" style="color: red;">
        self.style.color = ‘red‘;
    }

方式二:

//方式二
//    事件的綁定方式2：標簽對象.on事件 = function (){}
     var ele=document.getElementsByClassName("c1")[0];
     ele.onclick=function () {
        console.log(this); // this 代指： 當前觸發時間的標簽對象；
        this.style.fontSize="30px"
    };

js04-DOM對象一