js之DOM對象屬性操作

一、什么是HTML  DOM

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

二、DOM樹

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

三、DOM節點

1.節點類型

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);

length屬性

// /    ==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：返回的是標簽的個數，，一個是在局部下的，，，一個是在全局下的（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  

4.關於class的操作：

//   class屬性=============
     var ele = document.getElementsByClassName('c1')[0];
     console.log(ele.className); //打印類的名字
     
     ele.classList.add('hide');
     console.log(ele); //<div class="c1 hide" id="d1">

     ele.classList.remove('hide');//吧添加的remove移除了
     console.log(ele) 

5.改變css樣式：

<p id="p2">Hello world!</p>

document.getElementById("p2").style.color="blue";

                             .style.fontSize=48px

四、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"
    };

3.事件介紹

4.事件傳播