15.1 DOM概覽

15.2 選取文檔元素

• getElementById()

function getElementId(){
    var elements = {};
    for(var i=0;i<arguments.length;i++){
        var id = arguments[i];
        var elt = documemt.getElementById(id);
        if(elt == null){
            throw new Error('no elements with id:' + id);
        }
        elements[id] = elt;
    }
    return elements;
}

• getElementsByName()
• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()/querySelector()

15.3 文檔結(jié)構(gòu)和遍歷

• 作為節(jié)點(diǎn)樹(shù)的文檔
  • parentNode
  • childNodes：只讀的類數(shù)組對(duì)象

兩種方法可以將類數(shù)組對(duì)象轉(zhuǎn)化為數(shù)組 :

• 1. ES6中 Array .from()[需要編譯]
• 2. Array.prototype.slice.call(someNode.childNodes,0);
  • firstChild / lastChild ：沒(méi)有返回null
  • nextSibling / prevSibling：這兩個(gè)屬性將節(jié)點(diǎn)之間以雙向鏈表的形式連接起來(lái)
  • nodeType
  • nodeValue : Text節(jié)點(diǎn)或者Comment節(jié)點(diǎn)的文本內(nèi)容
  • nodeName：元素的標(biāo)簽名，以大寫(xiě)形式表示
• 作為元素樹(shù)的文檔
  • firstElementChild / lastElementChild
  • nextElementSibling / prevElementSibling
  • childElementCount：返回子元素的數(shù)量 == children.length

15.4 屬性

• html屬性：document.getElementById('myimg').src;
• 設(shè)置獲取非標(biāo)準(zhǔn)html屬性
  • getAttribute()
  • setAttribute()
  • hasAttribute()
  • removeAttribute()
• 數(shù)據(jù)值屬性
  • HTML5中設(shè)置了"data-x" == dataset.x 例如：data-jquery-test == dataset.jqueryTest(駝峰表示法)
• Attr節(jié)點(diǎn)的屬性：attributes屬性，用法與childNode屬性類似.

15.5 元素的內(nèi)容

• 作為html元素的內(nèi)容：
  • innerHTML瀏覽器擅長(zhǎng)解析HTML，但是“+= 效率低下，因?yàn)榧纫蛄谢忠馕觥?/li>
  • outerHTML:包含當(dāng)前標(biāo)簽名的輸出
• 作為純文本的元素內(nèi)容
  • textContent：將指定元素中的多有后代Text節(jié)點(diǎn)簡(jiǎn)單的串聯(lián)在一起
  • innerText：不反悔<script>標(biāo)簽內(nèi)的內(nèi)容，并試圖表留意表格形式，針對(duì)某些表格元素<table>等相關(guān)元素都是只讀屬性
• 作為T(mén)ext節(jié)點(diǎn)的元素內(nèi)容:nodeValue屬性保存text節(jié)點(diǎn)的內(nèi)容。
  textContent，innerHTML，innerText對(duì)比

15.6 創(chuàng)建插入刪除節(jié)點(diǎn)

• createElement()
• cloneNode()[true深復(fù)制]-[false淺復(fù)制] / 除了IE瀏覽器，Document.importNode()方法也可以創(chuàng)建節(jié)點(diǎn)副本[第一個(gè)參數(shù)為要插入的節(jié)點(diǎn)，第二個(gè)參數(shù)如果是true則表示遞歸所有的后代節(jié)點(diǎn)]
• appendChild()
• insertBefore()[帶插入的節(jié)點(diǎn)]-[已經(jīng)存在的節(jié)點(diǎn)]
• removeChild()
• replaceChild()[新節(jié)點(diǎn)]-[需要代替的節(jié)點(diǎn)],是childNodes中的節(jié)點(diǎn)，包括文本節(jié)點(diǎn)注釋節(jié)點(diǎn)

function embolden(n){
    if(typeof n == "string"){
        n = document.getElementById(n);
    }//如果參數(shù)為字符串而不是節(jié)點(diǎn)，將其當(dāng)做元素的id
    var parent = n.parentNode;
    var b = document.createElement("b");
    parent.replaceChild(b,n);
    b.appendChild(n);
}//用一個(gè)新的<b>元素代替 n 節(jié)點(diǎn)。并使n節(jié)點(diǎn)成為該元素的子節(jié)點(diǎn)

15.8 文檔和元素的幾何形狀和滾動(dòng)

• 文檔坐標(biāo)（整個(gè)網(wǎng)頁(yè)的大小）和視口坐標(biāo)（看見(jiàn)的窗口，不包括工具條收藏夾什么的）
• 查詢窗口滾動(dòng)條的位置

//以一個(gè)對(duì)象的x 和y屬性的方式返回滾動(dòng)條的偏移量
function getScrollOffsets(w){
//使用指定的窗口，如果不帶參數(shù)則使用當(dāng)前窗口。
    w = w || window;
    //除了IE8及更早的版本，其他瀏覽器都可以使用
    if(w.pageXOffset != null) return {x:w.pageXOffset,y:w.pageYOffset};
    //對(duì)標(biāo)準(zhǔn)模式下的IE
    var d = w.documentl;
    if(document.compatMode == "CSS1Compat")
        return {x:d.documentElemet.scrollLeft,y:d.documentElemet.scrollTop};
    //對(duì)怪異模式下的瀏覽器
    return {x:d.body.scrollLeft,y:d.body.scrollTop};
}

• 查詢窗口的視口尺寸

function getViewportSize(){
    //使用指定的窗口，如果不帶參數(shù)則使用當(dāng)前窗口。
    w = w || window;
    //除了IE8及更早的版本，其他瀏覽器都可以使用
    if(w.innerWidth != null) return {w:w.innerWidth,h:w.innerHeight};
    //對(duì)標(biāo)準(zhǔn)模式下的IE
    var d = w.documentl;
    if(document.compatMode == "CSS1Compat")
        return {    w:d.documentElemet.clientWidth,
                    h:d.documentElemet.clientHeight  };
    //對(duì)怪異模式下的瀏覽器
    return {x:d.body.clientWidth,y:d.body.clientHeight};
}

• 查詢?cè)氐膸缀纬叽纾?/p>

  • getBoundingClientRect()不需要參數(shù)，返回一個(gè)具有l(wèi)eft,right,top,bottom四個(gè)屬性的對(duì)象,left,top表示鈣元素左上角的X和Y的坐標(biāo)，right和bottom表示元素右下角的X和Y的坐標(biāo),返回的包含padding,不包含margin.
  • 返回元素在視口中的位置

  var box = e.getBoundingClientRect();
  var offsets = getScrollOffsets();
  var x = box.left + offsets.x;
  var y = box.top + offsets.y;
  

  在原始的IE中實(shí)現(xiàn)

  var box = e.getBoundingClientRect();
  var w = box.width || (box.right - box.left);
  var h = box.height || (box.bottom - box.top);
  

• 滾動(dòng)

  • scrollTop()接受一個(gè)X和Y的坐標(biāo)（文檔坐標(biāo)作為滾動(dòng)條的偏移量設(shè)置他們）
  • scrollIntoView()默認(rèn)參數(shù)為將元素的上邊緣或盡量接近視口的上邊緣。false對(duì)應(yīng)下邊緣

var documentHeight = document.documentElement.offsetHeight;//獲得文檔高度
var viewportHeight = window.innerHeight;//或者 getViewportSize()//獲取視口高度 
window.scrollTo(0,documentHeight - viewportHeight);//滾動(dòng)讓最后一頁(yè)在視中可見(jiàn)