大前端基礎~DOM

x + y = z x+y=z x+y=z

一、自定義屬性操作

1、獲取自定義屬性

使用getAttribute(attr)獲取自定義屬性，使用對象打點的方式獲取自有屬性。例：

//元素
<div id="person" age="10" sex="男">我是皮特</div>

//JS
<script>
  var person = document.getElementById("person");
  // 固有屬性可以直接打點調用
  var id = person.id;
  //自定義屬性獲取：getAttribute()
  var age = person.getAttribute("age");
  console.log(age); // 10
  console.log(id); //
</script>

getAttribute(attr)也可調用自有屬性。例：

var idAttr = person.getAttribute("id");
console.log(idAttr); // person

2、刪除自定義屬性

使用removeAttribute()刪除自定義屬性。例：

  //刪除自定義屬性
  person.removeAttribute("sex");
  console.log(person); // <div id="person" age="10" weight="50">我是皮特</div>

3、添加自定義屬性

使用setAttribute(attr,value)設置自定義屬性。例：

  //設置自定義屬性
  person.setAttribute("weight",50);
  console.log(person); // <div id="person" age="10" sex="男" weight="50">我是皮特</div>

傳遞的屬性名不需要進行屬性名的修改，例如賦值給class，attr=class，無需駝峯className。

person.setAttribute("class", "testClassName");
console.log(person) // <div id="person" age="10" weight="50" class="testClassName">我是皮特</div>

二、style樣式操作

• 使用 style 屬性方式設置的樣式顯示在標籤行內。
• element.style 屬性的值，是所有行內樣式組成的一個樣式對象。
• 樣式對象可以繼續點語法調用或更改 css 的行內樣式屬性，例如 width、height 等屬性。
• 注意1：類似 background-color 這種複合屬性的單一屬性寫法，是由多個單詞組成的，要修改爲駝峯命名方式書寫 backgroundColor。
• 注意2：通過樣式屬性設置寬高、位置的屬性類型是字符串，需要加上 px 等單位。

三、節點操作

  //創建節點
  var node = document.createElement("div")
  node.innerHTML = "hello45";
  // append追加節點
  document.body.append(node);

  //獲取子元素數組 children
  var node = document.getElementsByClassName("divList")[0];
  var children = node.children;
  console.log(children);

四、節點類型

// 元素節點
  var testNode = document.getElementById("test");
  console.log(testNode.nodeType); // 1

  // 屬性節點獲取
  var idNode = testNode.getAttributeNode("id");
  console.dir(idNode); // nodeType:2  nodeValue:"test"  nodeName:"id"
  //修改屬性節點，也會直接作用到標籤之上
  idNode.value = "demo";

  //獲取子節點
  var node = testNode.childNodes;
  console.log(node[0].nodeType); // 3
  //修改文本節點的值，也會直接作用到標籤之上
  node[0].nodeValue = '12313123123'

五、兄弟元素節點

  var p = my$("p3");
  console.log(p)
  //獲取兄弟節點的前一個
  console.log(p.previousSibling)
  //獲取兄弟節點的下一個
  console.log(p.nextSibling);
  //獲取上一個節點元素
  console.log(p.previousElementSibling)
  //獲取下一個節點元素 
  console.log(p.nextElementSibling)

六、節點的創建、添加

  //創建元素節點
  var div = document.createElement("div");
  console.dir(div);

  //創建屬性節點
  var myClass = document.createAttribute("class");
  console.dir(myClass);

  //創建文本節點
  var text = document.createTextNode("hello");
  console.dir(text)

//將文本節點添加到元素內部
  var div = my$("div1");
  div.append(text); 

  /*
  * DOM原有節點也可以傳給appendChild當參數，做了兩個步驟
  * 1、將節點從原始位置移除
  * 2、添加到新的指定位置
  * 原因：內存中這個原有節點只有一個，渲染的時候只能有一個位置
  */
  var p2 = my$("p2");
  div.appendChild(p2);

6.1 節點常用操作

• parentNode.appendChild(child)：將一個節點添加到指定父節點的子節點列表末尾。
• parentNode.replaceChild(newChild, oldChild)：用指定的節點替換當前節點的一個子節點，並返回被替換掉的節點。
• parentNode.insertBefore(newNode, referenceNode)：在參考節點之前插入一個擁有指定父節點的子節點，referenceNode 必須設置，如果 referenceElement 爲 null 則 newNode將被插入到子節點的末尾。
• parentNode.removeChild(child)：移除當前節點的一個子節點。這個子節點必須存在於當前節點中。

6.2 節點拷貝

  //淺拷貝
  var c1 = test.cloneNode(false);
  console.log(c1);

  //深拷貝（元素內部的節點也拷貝）
  var c2 = test.cloneNode(true);
  console.log(c2);

6.3 判斷是否有子節點的是那種方式

  var test = my$("test");
  console.log(test.hasChildNodes()) // true
  console.log(test.firstChild != null)// true
  console.log(test.childNodes.length > 0) // true

七、元素多事件監聽綁定

7.1 addEventListener

使用addEventListener進行事件的添加，添加的事件會逐個進行執行（事件排隊）。

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

 //DOM級事件
  clickMe.onclick = function(){
   
   
    alert(1)
  }

  //DOM 2級事件綁定方式
  /*不支持ie9以下的瀏覽器*/
  clickMe.addEventListener("click",function(){
   
   
    alert(1);
  })
  clickMe.addEventListener("click",function(){
   
   
    alert(2);
  })

7.2 attachEvent

使用進行事件監聽，注意，事件類型的字符串需要加“on”

 /*支持ie10及以下瀏覽器*/
  clickMe.attachEvent("onclick",function(){
   
   
    alert(1);
  })
  clickMe.attachEvent("onclick",function(){
   
   
    alert(2);
  })

7.3 註冊事件的兼容寫法

 // 調用
  addEvent(clickMe, "click", function(){
   
   
    alert(1);
  })

  function addEvent(ele, type, fn){
   
   
    //ie9以上瀏覽器使用addEventListener
    //IE9以下瀏覽器使用attachEvent
    if(ele.addEventListener){
   
   
      ele.addEventListener(type, fn);
    }else if(ele.attachEvent){
   
   
      ele.attachEvent("on" + type, fn);
    }
  }

7.4 事件解綁封裝

• removeEvent
• detachEvent

function removeEvent(ele, type, fn){
   
   
    if(ele.removeEventListener){
   
   
      ele.removeEventListener(type, fn);
    }else if(ele.detachEvent){
   
   
      ele.detachEvent("on" + type, fn);
    }
  }

7.5 DOM事件流冒泡和捕獲

//第三個參數如果爲true，則是事件捕獲
//false:事件冒泡
box1.addEventListener("click", function(){
   
   
    console.log("box1")
}, true);
box2.addEventListener("click", function(){
   
   
    console.log("box2")
}, true); 
box3.addEventListener("click", function(){
   
   
    console.log("box3")
}, true);

7.6 事件流三階段

• 第一個階段：事件捕獲
• 第二個階段：事件執行過程
• 第三個階段：事件冒泡
• addEventListener() 第三個參數爲 false 時，事件冒泡
• addEventListener() 第三個參數爲 true 時，事件捕獲
• onclick 類型：只能進行事件冒泡過程，沒有捕獲階段
• attachEvent() 方法：只能進行事件冒泡過程，沒有捕獲階段

注意：onclick添加的事件，只能冒泡，沒有捕獲；attachEvent()只能冒泡，沒有捕獲

7.7 事件冒泡的應用

**事件委託：**將一些子級的公共類型的事件委託給他們的父級添加，在父級內部想辦法找到真正觸發事件的自底層的事件源。

<ul id="ul">
    <li>1</li>
    <li>1</li>
    <li>1</li>
</ul>

// e.target 獲取事件源
var ul = document.getElementById("ul");
  var liList = ul.children;
  // 兼容問題
  e = e || window.event;
  // 兼容問題
  var target = e.target || e.srcElement;
  ul.onclick = function(e){
   
   
    for(var i = 0; i < liList.length; i++){
   
   
      liList[i].style.backgroundColor = "";
    }
   target.style.backgroundColor = "pink"
  };

7.8 事件對象

• e.eventPhase 查看事件觸發時所處的階段（1、捕獲階段 2、目標階段 3、冒泡階段）
• e.target 用於獲取觸發事件的元素
• e.srcElement 用於獲取觸發事件的元素，低版本瀏覽器使用
• e.currentTarget 用於獲取綁定事件的事件源元素（等同於this）
• e.type 獲取事件類型
• e.clientX/e.clientY 所有瀏覽器都支持，鼠標距離瀏覽器窗口左上角的距離
• e.pageX/e.pageY IE8 以前不支持，鼠標距離整個HTML頁面左上頂點的距離

7.9 取消冒泡

  box3.onclick = function(e){
   
   
    console.log(3);
    //取消默認事件
    e.preventDefault();
    //取消事件冒泡
    e.stopPropagation();
    //低版本兼容瀏覽器使用
    e.cancelBubble = true;
  }