js04-DOM對象一

標籤：除了   tee   nts   全域   dna   類型   seo   ace   before   

一、什麼是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對象一