一闷哆、Document

document.location
location屬性返回一個只讀對象，提供了當前文檔的URL信息

document.location === location //true
document.location === window.location  //true

雖然location屬性返回的對象是只讀的随夸，但是可以將URL賦值給這個屬性虱饿，網(wǎng)頁就會自動跳轉到指定網(wǎng)址桦踊。

document.location = 'http://www.example.com';
// 等價于
document.location.;

document.open()、document.close()力奋、document.write()
-document.open方法用于新建一個文檔榜旦，供write方法寫入內容。它實際上等于清除當前文檔景殷，重新寫入內容

document.close方法用于關閉open方法所新建的文檔溅呢。一旦關閉，write方法就無法寫入內容了猿挚。
document.write方法用于向當前文檔寫入內容咐旧。只要當前文檔還沒有用close方法關閉，它所寫入的內容就會追加在已有內容的后面绩蜻。

document.open();
document.write("hello");
document.write("world");
document.close();

如果頁面已經(jīng)渲染完成再調用write方法铣墨，它會先調用open方法，擦除當前文檔所有內容办绝，然后再寫入伊约。
如果在頁面渲染過程中調用write方法，并不會調用open方法孕蝉。
值得注意的是屡律，雖然調用close方法之后，無法再用write方法寫入內容降淮，但這時當前頁面的其他DOM節(jié)點還是會繼續(xù)加載超埋。除了某些特殊情況，應該盡量避免使用document.write這個方法佳鳖。

二纳本、創(chuàng)建元素

createElement()
createElement方法用來生成HTML元素節(jié)點。

var newDiv = document.createElement("div");

createElement方法的參數(shù)為元素的標簽名腋颠，即元素節(jié)點的tagName屬性繁成。如果傳入大寫的標簽名，會被轉為小寫淑玫。如果參數(shù)帶有尖括號（即<和>）或者是null巾腕，會報錯面睛。

createTextNode()
createTextNode方法用來生成文本節(jié)點，參數(shù)為所要生成的文本節(jié)點的內容尊搬。

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");//代碼新建一個div節(jié)點和一個文本節(jié)點

createDocumentFragment()
createDocumentFragment方法生成一個DocumentFragment對象叁鉴。

var docFragment = document.createDocumentFragment();

DocumentFragment對象是一個存在于內存的DOM片段，但是不屬于當前文檔佛寿，常常用來生成較復雜的DOM結構幌墓，然后插入當前文檔。這樣做的好處在于冀泻，因為DocumentFragment不屬于當前文檔常侣，對它的任何改動，都不會引發(fā)網(wǎng)頁的重新渲染弹渔，比直接修改當前文檔的DOM有更好的性能表現(xiàn)胳施。

三、查詢元素

Element 對象可以擁有類型為元素節(jié)點肢专、文本節(jié)點舞肆、注釋節(jié)點的子節(jié)點，DOM提供了一系列的方法可以進行元素的增博杖、刪椿胯、改、查操作剃根。

Element有幾個重要屬性
nodeName：元素標簽名哩盲，還有個類似的tagName
nodeType：元素類型
className：類名
id：元素id
children：子元素列表（HTMLCollection）
childNodes：子元素列表（NodeList）
firstChild：第一個子元素
lastChild：最后一個子元素
nextSibling：下一個兄弟元素
previousSibling：上一個兄弟元素
parentNode、parentElement：父元素

getElementById()
getElementById方法返回匹配指定ID屬性的元素節(jié)點跟继。如果沒有發(fā)現(xiàn)匹配的節(jié)點种冬，則返回null。這也是獲取一個元素最快的方法舔糖。

var elem = document.getElementById("test");

getElementsByClassName()
getElementsByClassName方法返回一個類似數(shù)組的對象（HTMLCollection類型的對象）娱两，包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實時反映在返回結果中金吗。這個方法不僅可以在document對象上調用十兢，也可以在任何元素節(jié)點上調用。

var elements = document.getElementsByClassName('tab');

getElementsByClassName方法的參數(shù)摇庙，可以是多個空格分隔的class名字旱物，返回同時具有這些節(jié)點的元素。

document.getElementsByClassName('red test');

getElementsByTagName()
getElementsByTagName方法返回所有指定標簽的元素（搜索范圍包括本身）卫袒。返回值是一個HTMLCollection對象宵呛，也就是說，搜索結果是一個動態(tài)集合夕凝，任何元素的變化都會實時反映在返回的集合中宝穗。這個方法不僅可以在document對象上調用户秤，也可以在任何元素節(jié)點上調用。

var paras = document.getElementsByTagName("p");

上面代碼返回當前文檔的所有p元素節(jié)點逮矛。注意鸡号，getElementsByTagName方法會將參數(shù)轉為小寫后，再進行搜索须鼎。

getElementsByName()
getElementsByName方法用于選擇擁有name屬性的HTML元素鲸伴，比如form、img晋控、frame汞窗、embed和object，返回一個NodeList格式的對象糖荒，不會實時反映元素的變化杉辙。

// 假定有一個表單是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"

注意模捂，在IE瀏覽器使用這個方法捶朵，會將沒有name屬性、但有同名id屬性的元素也返回狂男，所以name和id屬性最好設為不一樣的值综看。

querySelector()
querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點。如果有多個節(jié)點滿足匹配條件岖食，則返回第一個匹配的節(jié)點红碑。如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null泡垃。

elementList = document.querySelectorAll(selectors);

querySelector方法無法選中CSS偽元素析珊。

querySelectorAll()
querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點，返回的是NodeList類型的對象蔑穴。NodeList對象不是動態(tài)集合忠寻，所以元素節(jié)點的變化無法實時反映在返回結果中。

elementList = document.querySelectorAll(selectors);

querySelectorAll方法的參數(shù)存和，可以是逗號分隔的多個CSS選擇器奕剃，返回所有匹配其中一個選擇器的元素。

var matches = document.querySelectorAll("div.note, div.alert");

上面代碼返回class屬性是note或alert的div元素捐腿。

三纵朋、修改元素

appendChild()（重要）
在元素末尾添加元素

var newDiv = document.creatElement('div')
var newContent = document.createTexNode('Hello')
newDiv.apendChild(newContent)

insertBefore()
在某個元素之前插入元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

replaceChild()
replaceChild()接受兩個參數(shù)：要插入的元素和要替換的元素

newDiv.replaceChild(newElement, oldElement);

removeChild()##刪除元素

parentNode.removeChild(childNode);

cloneNode()##clone元素

cloneNode()方法用于克隆元素，方法有一個布爾值參數(shù)茄袖，傳入true的時候會深復制操软，也就是會復制元素及其子元素（IE還會復制其事件），false的時候只復制元素本身

四宪祥、屬性操作

getAttribute()
getAttribute()用于獲取元素的attribute值

node.getAttribute('id');

createAttribute()
createAttribute()方法生成一個新的屬性對象節(jié)點聂薪，并返回它猪钮。

attribute = document.createAttribute(name);

createAttribute方法的參數(shù)name，是屬性的名稱胆建。

setAttribute()
setAttribute()方法用于設置元素屬性

var node = document.getElementById('div1')
node.setAttribute('my_attribute',)

等同于

var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);

removeAttribute()
removeAttribute()用于刪除元素屬性

node.removeAttribute('id');

當然上面的方法做的事情也可以通過類操作數(shù)組屬性element.attributes來實現(xiàn)

innerText和innerHTML

innerText
innerText是一個可寫屬性烤低，返回元素內包含的文本內容，在多層次的時候會按照元素由淺到深的順序拼接其內容笆载。

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>//外層div的innerText返回內容是 "123456"

innerHTML
innerHTML屬性作用和innerText類似扑馁，但是不是返回元素的文本內容，而是返回元素的HTML結構凉驻，在寫入的時候也會自動構建DOM

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>//外層div的innerHTML返回內容是 "<p>123<span>456</span></p>"

[http://js.jirengu.com/nukiyufufi/1/edit?html,js

區(qū)別：

修改樣式
可修改元素的style屬性腻要，修改結果直接反映到頁面元素

document.querySelector('p').style.color = 'red'
document.querySelector('.box').style.backgroundColor = '#ccc'

獲取樣式的 getComputedStyle()
使用getComputedStyle獲取元素計算后的樣式，不要通過 node.style.屬性獲取

var node = document.querySelector('p')
var color = window.getComputedStyle(node).color
console.log(color)

class操作

var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active')   //新增 class
nodeBox.classList.remove('active')  //刪除 class
nodeBox.classList.toggle('active')   //新增/刪除切換
node.classList.contains('active')   // 判斷是否擁有 class

樣式的改變盡量使用 class 的新增刪除來實現(xiàn)

ex:
http://js.jirengu.com/nupom/1/edit?html,output

頁面寬高

element.clientHeight和 element.offsetHeight

document.body.clientHeight
document.body.offsetHeight

docuemnt.body.style.border = "10px solid red"
docuemnt.body.clientHeight  //變小了
document.body.offsetHeight

element.scrollHeight
元素滾動內容的總長度涝登。如果元素沒出現(xiàn)滾動條雄家， scrollHeight等于 clientHeight

- element.scrollTop 
滾動的高度
- window.innerHeight 
窗口的高度
- element.getBoundingClientRect() 
獲取元素在視窗中的位置
-----------------------------------------------
問題1： 如果判斷一個元素距離 document 頂部的偏移

function getOffsetTop( elem ){
var offsetLeft = 0
do {
offsetTop += elem.offsetTop
} while( elem = elem.offsetParent )
return offsetTop
}

OR

element.getBoundingClientRect().top + document.body.scrollTop

問題2：如何判斷一個元素是否出現(xiàn)在窗口視野中

問題3：如果判斷頁面滾動到底部

**HTMLCollection和NodeList**
接待你都是單個對象，有時會需要一種數(shù)據(jù)結構胀滚，能夠容納多個節(jié)點趟济。DOM提供兩種集合對象，用于實現(xiàn)這種節(jié)點的集合： NodeList和HTMLCollection咽笼。
- NodeList對象代表一個有順序的節(jié)點列表
以下獲得的是NodeList的對象

document.getElementsByName("name1")
document.getElementsByTagName("a")
document.querySelectorAll("a")
document.body.childNodes

- HTMLCollection是一個接口顷编，表示HTML元素的集合，它提供了可以便歷列表的方法和屬性
以下方法獲取的為HTMLCollection的對象

document.images //所有img元素
document.links //所有帶href屬性的a元素和area元素
document.forms //所有form元素
document.scripts //所有script元素
document.body.children
document.getElementsByClassName("class1")


如何查看

document.body.childNodes.constructor

HTMLCollection與NodeList基本相似

- 相同點： 都是類數(shù)組對象剑刑，節(jié)點的變化都會實時反映在集合中

- 不同點： 少部分方法不一樣媳纬，比如 NodeList 有 forEach 方法，而 HTMLCollection 沒有

DOM學習總結