Document Object Model 文檔對象模型
DOM是HTML和XML文檔的編程接口。將web頁面和腳本或編程語言連接起來了。
要改變頁面的某個東西，JS就要獲得對HTML文檔中所有元素進行訪問的入口。都是通過DOM來獲得的。
document對象
每個載入瀏覽器的HTML文檔都會成為document對象。包括了文檔的基本信息，可以通過JS對HTML頁面中的所有元素進行訪問修改。
document對象的常用屬性
- doctype
document.doctype; //<!DOCTYPE html>
document.doctype.name; //"html"
- body，head
document.head;
document.body;
可以通過這倆屬性獲取文檔的head節點和body節點
activeElement 返回當前文檔中獲得焦點的那個元素
documentURL , domain , lastModified
1,documentURL屬性返回當前文檔的網址
2，domain屬性返回文檔域名
3，lastModified返回當前文檔的最后修改時間location
location屬性返回一個只讀對象，提供了當前文檔的URL信息title, characterSet
1,title屬性返回當前文檔的標題，該屬性可寫
2，characterSet屬性返回渲染當前文檔的字符集readyState
readyState屬性返回當前文檔的狀態，有三個值
1,loading 加載html代碼階段，尚未完成解析
2，interactive 加載外部資源階段
3，completecompatMode
compatMode屬性返回瀏覽器處理文檔的模式，
1，BackCompat: 向后兼容模式，即沒有添加DOCTYPE
2，CSS1Compat 嚴格模式，添加了DOCTYPEcookie
innerText
innerText是一個可寫屬性，返回元素內包含的文本內容，在多層次的時候會按照元素由淺到深的順序拼接其內容
<div>
<p>
123
<span>456</span>
</p>
</div>
外層div的innerText的返回內容是"123456"
- innerHTML , outerHTML
innerHTML屬性作用和innerText屬性類似，但是不是返回元素的文本內容，而是返回元素的HTML結構，在寫入的時候也會自動構建DOM
<div>
<p>
123
<span>456</span>
</p>
</div>
外層div的innerHTML的返回內容是<p>123<span>456</span>></p>
outerHTML返回內容還包括本身
document對象的常用方法
- open() ,close()
document.open方法用于新建一個文檔，供write方法寫入內容。實際上等于清除當前文檔，重新寫入內容
document.close()方法用于關閉open方法所新建的文檔，一旦關閉，write方法就無法寫入內容 - write()
docuement.write()方法用于向當前文檔寫入內容，只要當前文檔還沒有用close方法關閉，它所寫入的內容就會追加在已有內容的后面。
document.open();
document.write('hello');
document.write('deejay');
document.close();
一般不建議使用document.write()
Element對象
除了document對象，最常用的就是Element對象了，Element對象表示HTML元素。
Elment有幾個重要屬性：
- nodeName: 元素標簽名 還有個類似的tagName
- nodeType: 元素類型
- className： 類名
- id： 元素id
- children：子元素列表（HTMLCollection）
- childNodes： 子元素列表（NodeList）
- firstChild 第一個子元素
- lastChild 最后一個子元素
- nextSibling: 下一個兄弟元素
- previousSibling 上一個兄弟元素
- parentNode,parentElement ：父元素
查詢元素
getElementById()
getElementsByClassName()
getElementsByTagName()
querySelector()
querySelector()方法返回匹配指定的CSS選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回null。使用舉例：
<div id="ct">
<a href="#">my link</a>
<h1 class="title">my title</h1>
<p class="title"></p>
</div>
<a href="#">deejay</a>
<script>
document.querySelector('#ct a'); //選中了#ct下面的a標簽，
document.querySelector('#ct .title'); //選中了#ct下的第一個.title元素，即只選中了h1標簽
// querySelector()僅僅只能選中一個元素
-
querySelectorAll()
針對querySelector()只能選擇一個元素的情況，querySelectorAll()可以選中多個元素。得到一個類數組對象。 - elementFromPoint()
返回位于頁面指定位置的元素
創建元素
- createElement()
用來生成HTML元素節點，參數為元素的標簽名，如"div"，不能帶<>或者null，會報錯
var newDiv = document.createElement("div"); - createTextNode()
生成文本節點，參數為要生成的文本節點的內容 - createDocumentFragment()
生成一個DocumentFragment對象，即一個存在于內存中的DOM片段，但是不屬于當前文檔，常常用來生成較復雜的DOM結構，然后插入當前文檔。 優點是不屬于當前文檔，所以不需要重新渲染，比起直接修改，性能更好。舉例說明：
var arr = [1,2,3,4,5,6,7,8]; //假設有這么一個數組，要把每一項都插入到頁面當中去，那么頁面每插入一次就要重繪一次，影響性能，所以使用documentfragment
var docFragment = document.createDocumentFragment();
// 先創建一個documentFragment對象，再把數組遍歷，每一項都加入到一個另外的DOM對象中，再把這個DOM對象添加到documentFragment對象中，再將documentFragment對象添加到頁面的目標元素中
for (var i = 0; i < arr.length; i ++) {
var node = document.createElement('div');
node.innerText = arr[i];
docFragment.appendChild(node);
}
target.append(docFragment);
修改元素
-
appendChild()
把一個DOM對象添加到他的父容器上，在元素末尾
var newDiv = document.createElement('div');
var newText = document.createTextNode('hello deejay');
newDiv.appendChild(newText);
- insertBefore()
在某個元素之前插入元素 - replaceChild()
接受兩個參數，要插入的元素和要替換的元素
刪除元素
刪除元素用removeChild()方法即可，舉例：
parentNode.removeChild(childNode);
clone元素
cloneNIode()方法用于克隆元素，方法有一個布爾值的參數，傳入true的時候會深復制，會復制元素及其子元素（IE還會復制其事件），false的時候只會復制元素本身
node.cloneNode(true);
屬性操作
-
getAttribute()
用于獲取元素的attribute值
node.getAttribute('id'); - createAttribute()
生成一個新的屬性對象節點，并且返回它
attribute = document.createAttribute(name);
createAttribute的方法的參數name，是屬性的名稱 -
setAttribute()
用于設置元素屬性
var node = document.getElementById('div1');
node.setAttribute('myAttribute','newValue'); // 設置了myAttribute屬性的值為newValue
- removeAttribute()
用于刪除屬性：
node.removeAttribute('id');
classList
element.classList使用舉例：
<p class="title"></p>
var p = document.querySelector('.title');
console.log(p.classList); //["title"] 輸出一個數組，內容為元素的class
p.classList.add('active'); // 給p元素增加一個叫active的類
p.classList.remove('active'); //刪除active類
p.classList.contains('active'); //判斷p元素是否有active這個類
一般常用到的DOM操作方法：
var ct = document.querySelector('#ct');
document.querySelectorAll("#ct .title");
var img = document.createElement('img');
img.setAttribute('src','http://wx1.sinaimg.cn/mw690/4abc2d1fgy1fim303kdwdj208m08cgly.jpg');
ct.appendChild(img);
img.getAttribute('src');
img.removeAttribute('src');
ct.innerHTML = '<img src="http://upload-images.jianshu.io/upload_images/7113407-c6bee78dff1ac501.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
';
ct.innerText = 'hello';
