DOM操作（基礎版）

DOM是document Object Model的縮寫，簡稱文件物件模型。只要記住這是操作文件的就行了。

DOM基礎選擇器

1、getElementById(id); //獲取指定的id元素

2、getElementsByClassName(class); //通過class獲取元素，返回值是陣列

3、getElementsByTagName(p); //獲取相同標籤的節點列表，返回值是陣列

4、getElementsByName(name); //獲取相同元素的節點列表，返回陣列

⚠️注：不是所有的標籤都有name值。

⚠️注：空格和換行鍵是文字標籤

強大的selector

document.querySelectorAll();

var oD = document.querySelector(); oD.childNode //獲取當前元素節點的所有子節點，返回一個數組

oD.parentNode //獲取當前元素節點的父元素，返回一個元素

class選擇器返回的是陣列物件，如果要使用其中的元素，通過索引解析出來

selector會選擇第一個符合規則的元素，selectorAll返回一個數組

節點選擇器

（節點）關係選擇器：都是屬性，而不是方法 父選子

 omsg.children             //返回一個數組

子選父

 omsg.parentNode

第一個子

 omsg.firstElementChild

最後一個子

 omsg.lastElementChild

上一個兄弟

 omsg.previousElementSibling

下一個兄弟

 omsg.nextElementSibling

元素屬性節點的操作分類

屬性的操作：

1、作為屬性操作：

可見的操作：

• 內建：系統提供，按照物件的操作方法進行操作

  可獲取，可設定 對屬性進行操作

   console.log(obox.title);
   obox.title = "123321";
   console.log(obox.className);        //只能通過className,而不能通過class，因為class是個關鍵字

• 非內建：自定義，不可以通過物件的方法進行操作，通過專屬方法

  get/set/romove-Attribute(); 對自定義的屬性進行操作

  獲得、設定、溢位

  以上三種方法也可以操作內建物件，如果通過這三種方法操作class，直接寫class就可以，因為class在此時，是一個字串

   obox.getAttribute("class");

  不可見的操作：

  內建： 對內部內建屬性進行操作

  innerHTML

  nodeName

  nodeValue

  nodeType 

  obox.innerHTML;       //會返回標籤及內容
   obox.innerText;       //只返回文字的內容
   obox.tagName;         //只能返回，不能操作

  非內建：物件的操作，直接寫入物件內 對新增自定義的屬性進行操作

   obox.abc = "123456";
   console.log(obox.abc);
   ​

  可以只分為內建屬性和非內建屬性。除了已經定義在標籤內部的非內建屬性，其他的都按點呼叫。而標籤內部的非內建屬性使用get/set/romove-Attribute();呼叫。

2、作為屬性節點：（專用方法，與其他節點的方法不互通）

attributes 會返回一個數組

 <div class="box" a="10" b=20></div>
 var obox = document.querySeloector(".box");
 console.log(obox.attributes);
 //獲取屬性節點的節點的屬性和屬性值
 console.log(obox.attributes[0].nodeName);
 console.log(obox.attributes[0].nodeValue);
 ​

obox本身也就是元素節點

 obox.nodeName;        //節點名稱--文字是#text，
 obox.nodeValue;       //節點值--文字是值
 obox.nodeType;        //節點型別--屬性節點為2，元素節點為1，文字是3？？？
 ​

只要是節點，就是物件

 nodeName;     //名稱
 nodeValue;    //值
 nodeType;     //型別
 ​

節點屬性

偽陣列：假陣列

可以使用索引和長度遍歷，但是不能使用陣列的方法 ​ arguments也是偽陣列 ​ DOM選擇器返回的陣列也是偽陣列

真陣列：

可以使用索引和長度遍歷，但是可以使用陣列的方法

操作style

批量操作.cssText

DOM屬性基本操作（增/刪/改/查）

DOM元素的增加

建立：

 createElement();        //需要配合下面這個函式使用
 appendChild();          //將建立好的元素插入某個標籤內的最後

⚠️注：是插入到某個標籤內的最後

使用方法：

 <div class="box" a="10" b=20 id="box" title="divTitle">
       <p>這是一個測試文字...</p>
       <span>ssss</span>
       <span>aaaa</span>
 </div>
 var obox = document.getElementById("box");
 var e = document.createElement("input");
 e.value = "name";
 obox.appendChild(e);

刪除：

 obox.removeChild(e);            //刪除obox內的e元素
 obox.remover();                 //直接刪除當前元素

修改：

var a = obox.lastElementChild;
 a.outerHTML = "<p>" + a.innerHTML + "</p>";

非行內樣式的操作

 getcomputedStyle(obox,false)            //獲取樣式，只能獲取不能設定
 getcomputedStyle(obox,false).background;

獲取非行內樣式（相容問題）   

 function getStyle(obj,attr){             //獲取非行間樣式，obj是物件，attr是值
         if(obj.currentStyle){                //針對ie獲取非行間樣式
             return obj.currentStyle[attr];
         }else{
             return getComputedStyle(obj,false)[attr];   //針對非ie
         };
     };

獲取元素尺寸類樣式

事件

<div class="box"> 
 </div>
 var obox = document.querySelector(".box");
 ​
 obox.onclick = function(){
   console.log(1);
 }

事件源：obox，觸發事件的源頭

 e.target

事件型別：onclick，通過什麼行為觸發

事件處理函式：function，觸發這個行為時，要做的事情

事件的分類：

onmouseleave和onmouseenter不支援事件冒泡

表單事件分類：

頁面事件分類

事件物件：類似於一個祕書，在本次實踐過程中，記錄事件發生的所有資訊

預設不顯示，需要手動獲取

只在事件中存在，開始前及結束後，都不存在

獲取事件物件

event獲取方法

 window.event;         //IE中
 eve                   //直接獲取

相容方法

 function fn(eve){
   var e = eve || window.event;
 }

⚠️注：event需要逐層傳遞，不要漏掉外部的function

event的使用

 e.button;               //返回按下滑鼠按鍵的返回值，左0，中1，右2
 e.clientX;
 e.clientY;              //檢測相對於瀏覽器的位置
 e.pageX;
 e.pageY;                //檢測相對於文件的位置
 e.screenX;
 e.screenY;              //檢測相對於螢幕的位置
 e.offsetX;
 e.offsetY;              //檢測相對於元素左上角的位置

冒泡事件：會依次向上觸發所有父級的相同事件，如果中間沒有父級，則繼續向上觸發

### 鍵盤事件

事件源：document

事件物件

獲得事件物件：event

獲得事件物件相容

 var e = eve || window.event;

獲得keycode

 var keyC = eve.keyCode || eve.which

事件流

三個階段：

• 冒泡階段：從裡向外

• 目標（當前事件）階段

• 捕獲階段：從外向內

只有事件監聽才可以進入捕獲，目標狀態不區分捕獲和冒泡

瀏覽器預設冒泡

obox.addEventListener("click",function(){},flase);

第三個值預設為false

事件委託

將多個相同元素的相同事件，新增到頁面上現存的共同的父元素，利用事件冒泡，配合事件源，找到真正點選的元素

 oul.onclick = function(eve){
              var e = eve || window.event;
              var target = e.target || e.srcElement;
              if(target.nodeName == "LI"){
                  console.log(target.innerHTML);
              }
          }

優勢

1. 節省效能

2. 可一個頁面上暫時不存在的元素繫結事件

缺點

1. this不夠精準

事件委託的封裝，可以使用this

var oul = document.querySelector("ul");
     var oli = document.getElementsByTagName("li");
     oul.onclick = fn(oli,function(){
       console.log(this);
       console.log(this.innerHTML)
     })
     function fn(child,callback){
       return function(eve){
         var e = eve || window.event;
         var target = e.target || e.srcElement;
         for(var i = 0;i<child.length;i++){
           if(target == child[i]){
             callback.bind(target)();
           }
         }
       }
     }