JavaScript——DOM（包括DOM簡介、獲取元素、事件基礎、操作元素、節點操作）

DOM簡介

• 文檔對象模型（DOM），就是W3C組織推薦的處理可擴展標記語言（HTML或者XML）的標準編程接口。

• 作用：通過這些DOM接口，可以改變網頁的內容、結構和樣式。

• DOM樹：

  （1）文檔：一個頁面就是一個文檔，DOM中使用document表示

  （2）元素：頁面中所有標籤都是元素，DOM中使用element表示

  （3）節點：網頁中的所有內容都是節點（標籤、屬性、文本、註釋等），DOM中使用node表示

  （4）DOM把以上三種都看做是對象

獲取元素

1.根據ID獲取

• 使用getElementById()方法獲取帶有ID的元素對象。小括號裏的參數是大小寫敏感的字符串ID名，並且返回的是一個元素對象，如果頁面沒有這個對象，則返回null。console.dir()方法可以返回元素對象，以便開發人員更好地查看裏面的屬性和方法。

document.getElementById('ID');

2.根據標籤名獲取

• 使用getElementsBytagName()方法可以返回帶有指定標籤名的對象的集合。返回的是獲取過來的元素對象的集合，以僞數組的形式存儲，並且裏面的每個元素都是對象。
• 通過getElementsBytagName()方法得到的元素對象是動態的。
• 如果頁面中只有一個標籤，返回值還是以僞數組的形式存在。
• 如果頁面中沒有這個元素標籤，返回值是一個空的僞數組。

document.getElemrntsByTagName('標籤名');

• 使用getElementsBytagName()方法還可以獲取某個元素（父元素）內部所有指定標籤名的子元素。（獲取的時候不包括父元素自己）注意：父元素必須是單個對象。

element.getElemrntsByTagName('標籤名');

3.通過HTML5新增的方法獲取

（1）getElementsByClassName()

document.getElementsByClassName('類名');	//根據類名返回元素對象集合

（2）querySelector()

document.querySelector('選擇器');		//根據指定選擇器返回第一個元素對象
										//注意：裏面的選擇器要加符號，比如類就要加'.'

（3）querySelectorAll()

document.querySelectorAll('選擇器');		//根據指定選擇器返回所有的元素對象集合

4.獲取特殊元素（body、html）

• 獲取body元素：

document.body		//返回body元素對象

• 獲取html元素：

document.documentElement		//返回html元素對象

5.拓展

• 獲取元素的方式可以是下面這種情況：

document.getElementById('ID').querySelectorAll('選擇器');

事件基礎

• 事件三要素：事件源、事件類型和事件處理程序。

  （1）事件源：事件被觸發的對象

  （2）事件類型：如何觸發，比如：鼠標點擊、鼠標經過

  （3）事件處理程序：通過一個函數賦值的方式完成

btn.onclick = function(){
  alert('蟹黃堡');
}

• 執行事件的步驟：

  （1）獲取事件源

  （2）註冊事件（綁定事件）

  （3）添加事件處理程序（採取函數賦值的形式）

• 常見的鼠標事件

鼠標事件	觸發條件
onclick	鼠標點擊左鍵觸發
onmouserover	鼠標經過觸發
onmouseout	鼠標離開觸發
onfocus	獲得鼠標焦點觸發
onblur	失去鼠標焦點觸發
onmousemove	鼠標移動觸發
onmouseup	鼠標彈起觸發
onmousedown	鼠標按下觸發

操作元素

1.改變元素內容

element.innerText

• 從起始位置到終止位置的內容，但它不識別html標籤，同時去除空格和換行。（可讀寫的）

element.innerHTML

• 起始位置到終止位置的全部內容，能夠識別html標籤，同時保留空格和換行。（可讀寫的）

2.常用元素的屬性操作

• src、href、id、alt、titile等屬性都是可以通過“元素.屬性“的方法修改屬性值。

<button>阿拉斯加</button>
<button>柯基</button>
<img src="images/dog1.jpg" alt=''>
<script>
var dog1 =document.getElementById('dog1');
var dog2 =document.getElementById('dog2');
var img = document.querySelector('img');

dog2.onclick = function(){
  img.src = 'images/dog2.jpg';
}
dog1.onclick = function(){
  img.src = 'images/dog1.jpg';
}
</script>

3.表單元素的屬性操作

• type、value、checked、selected、disabled等表單元素的屬性也都是可以通過“元素.屬性“的方法修改屬性值。(可讀寫)

4.樣式屬性操作

• 修改元素大小、顏色、位置等樣式等方法有以下兩種：

  （1）element.style ——行內樣式操作

  var div = document.querySelector('div');
  div.onclik = function(){
    this.style.background = 'blue';
  }
  

  注意：
  JS裏面的樣式採取駝峯命名法，比如：fontSize、backgroundColor；
  JS修改style樣式操作，產生的是行內樣式，css權重比較高。

  （2）element.className ——類名樣式操作

  //css
  <style>
  .change{
    background-color: blue;
  	color: #fff;
    font-size: 20px;
  	margin-top: 100px;
  }
  </style>
  
  //html
  <div class="text">文本內容</div>
  
  //JS
  <script>
  var div = document.querySelector('div');
  div.onclik = function(){
    div.className = 'text change';
  }
  </script>
  

  注意：
  如果樣式修改較多，可以採用操作類名方式更改元素樣式；
  className會直接更改元素的類名，會覆蓋原先的類名。

5.排他思想

• 排他思想算法實現的步驟：順序不能顛倒

  （1）所有元素全部清除樣式

  （2）給當前元素設置樣式

6.自定義屬性的操作

（1）獲取屬性值

• element.屬性
• Element.getAttribute(‘屬性’)

區別：
element.屬性：獲取內置屬性值（元素本身自帶的屬性）
element.getAttribute(‘屬性’)：主要獲取自定義屬性（程序員自定義的屬性）

（2）設置屬性值

• element.屬性 = ‘值’
• element.setAttribute(‘屬性’,‘值’)

區別：
element.屬性 = ‘值’：獲取內置屬性值（元素本身自帶的屬性）
element.setAttribute(‘屬性’,‘值’)：主要設置自定義屬性

var div = doucument.querySelector('div');
div.className = 'test';	
div.setAttribute('class','test');

（3）移除屬性

• element.removeAttribute(‘屬性’)

7.H5自定義屬性

• 自定義屬性的目的：爲了保存並使用數據。有些數據可以保存到頁面中而不用保存到數據庫中。

（1）設置H5自定義屬性

• H5規定自定義屬性的屬性名以data-開頭。

（2）獲取H5自定義屬性

• 兼容性獲取，element.getAttribute(‘data-index’)，該方法可以獲取自定義屬性，不管是否以data-開頭。
• H5新增element.dataset.index或者element.dataset[‘index’]，ie11纔開始支持，該方法只能獲取以data-開頭的自定義屬性。其中，dataset是一個集合，裏面存放了所有以data開頭的自定義屬性。如果自定義屬性裏面有多個以-鏈接的單詞，獲取的時候需要採用駝峯命名法，詳情如下：

<div data-list-name = 'andy'></div>
<script>
  var div = document.querySelector('div');
	console.log(div.getAttribute('data-list-name'));
	console.log(div.dataset.listName);
	console.log(div.dataset['listName']);
</script>

節點操作

• 學習節點操作的原因：利用節點層級關係（父子兄關係）獲取元素比利用DOM提供的方法獲取元素邏輯性更強，操作更簡單。

• 網頁中的所有內容都是節點（標籤、屬性、文本、註釋等），在DOM中，節點使用node來表示。

• HTML DOM樹中的所有節點均可通過JavaScript進行訪問，所有HTML元素（節點）均可被修改，也可以被創建或刪除。

• 一般地，節點至少擁有nodeType（節點類型）、nodeName（節點名稱）、nodeValue（節點值）這三個基本屬性。

  元素節點的nodeType爲：1

  屬性節點的nodeType爲：2

  文本節點的nodeType爲：3（文本節點包含文字、空格、換行等）

1.父級節點

//父級節點的語法格式如下：
node.parentNode

var title = document.querySelector('.title');
console.log(title.parentNode);

• parentNode屬性返回的是某節點的父節點，注意是最近的一個父節點。
• 如果指定的節點沒有父節點，則返回null。

2.子節點

//子節點的語法格式1如下：
parentNode.childNodes(標準)

• parentNode.chiledNodes返回包含指定節點的子節點的集合，該集合爲及時更新的集合。

注意：返回值裏面包含了所有的子節點，包括元素節點，文本節點等。

//如果只想要獲得裏面的元素節點，則需要專門處理，所以我們一般不提倡使用chileNodes
//只獲取元素節點的處理如下：
var ul = document.querySelector('ul');
for(var i = 0; i < ul.childNodes.length; i++){
  if(ul.childNodes[i].nodeType == 1){
    console.log(ul.childNodes[i]);
  }
}

//子節點的語法格式2如下：
parentNode.children（非標準）

• parentNode.children是一個只讀屬性，返回所有子元素節點。它只返回子元素節點，其餘節點不返回。

• 雖然children是一個非標準，但是得到了各個瀏覽器的支持，可以放心使用，並且我們經常使用的也是這個。

• 獲取第一個子元素和最後一個子元素：

方法一：

parentNode.firstChild
//firstChild返回第一個子節點，找不到則返回null。同樣，也是包含所有的節點。
parentNode.lastChild
//lastChild返回最後一個子節點，找不到則返回null。同樣，也是包含所有的節點。

方法二（該方法有兼容性問題，IE9以上才支持）：

parentNode.firstElementChild
//firstElementChild返回第一個子元素節點，找不到則返回null
parentNode.lastElementChild
//lastElementChild返回最後一個子元素節點，找不到則返回null

方法三（實際開發的寫法，沒有兼容性問題）：

parentNode.children[0]
//獲取第一個子元素節點
parentNode.children[parent.children.length - 1]
//獲取最後一個子元素節點

3.兄弟節點

• 方法一：

node.nextSibling
//extSibling返回當前元素的下一個兄弟節點，找不到則返回null。同樣，也是包含所有的節點。
node.previousSibling
//previousSibling返回當前元素上一個兄弟節點，找不到則返回null。同樣，也是包含所有的節點。

//如果想要獲取兄弟元素節點，則可以採取以下方法——封裝函數：
function getNextElementSibling(element){
  var el = element;
  while(el = el.nextSibling){
    if(el.nodeType === 1){
      return el;
    }
  }
  return null;
}

• 方法二（該方法有兼容性問題，IE9以上才支持）：

node.nextElementSibling
//nextElementSibling返回當前元素的下一個兄弟元素節點，找不到則返回null。
node.priviousElementSibling
//priviousElementSibling返回當前元素的上一個兄弟節點，找不到則返回null。

4.創建和添加節點

• 創建節點：

//創建節點的語法格式如下：
document.createElement('tagName');

• document.createElement()方法創建由tagName指定的HTML元素。因爲這些元素原先不存在，是根據我們的需求動態生成的，所以我們稱爲動態創建元素節點。

• 添加節點：

//添加節點的語法格式1如下：
node.appendChild(child);		//node是父級，child是子級

• node.appendChild()方法將一個節點添加到指定父節點的子節點列表末尾。

//添加節點的語法格式2如下：
node.insertBefore(child,指定元素);	//node是父級，child是子級

• node.insertBefore()方法將一個節點添加到父節點的指定子節點前面。

5.刪除節點

//刪除節點的語法格式如下：
node.removechild(child);		//node是父級，child是子級

• node.removeChild()方法從DOM中刪除一個子節點，返回刪除的節點。

6.複製節點/克隆節點

//複製節點的語法格式如下：
node.cloneNode();

• node.cloneNode()方法返回調用該方法的節點的一個副本，也稱爲克隆節點/拷貝節點。
• 如果括號參數爲空或者爲false，則是淺拷貝，即只克隆複製節點本身，不克隆裏面的子節點。
• 如果括號參數爲true，則是深拷貝，會複製節點本身以及裏面所有的子節點。

7.三種動態創建元素的區別

• document.write()

• element.innerHTML

• document.createElement()

• 區別：

  document.write()是直接將內容寫入頁面的內容流，但是文檔流執行完畢，則它會導致頁面全部重繪。

  innerHTML是將內容寫入某個DOM節點，不會導致頁面全部重繪。

  innerHTML創建多個元素效率更高（前提是不要採用拼接字符串，而是採取數組形式），結構稍微複雜。

  createElement()創建多個元素效率稍微低一點點，但是結構更清晰。

---

微信公衆號也會定期更新，覺得文章寫得還可以的，可以加個關注！點個贊！謝謝！