摘要：并提供相對于它左上角的坐標(biāo)。屬性還包括滾出隱藏部分，例如沒有水平滾動，等于大多數(shù)幾何屬性是只讀的，但可以更改，瀏覽器將滾動元素。元素的滾動部分的寬度高度注意點(diǎn)如果一個元素不能被滾動例如，它沒有溢出，或者這個元素有一個屬性，將被設(shè)置為。

用來記錄和總結(jié)學(xué)的知識點(diǎn)，以便溫故知新

這么寫方便自己記憶

Dom節(jié)點(diǎn)獲取
getElement (Id,ClassName,TagName)和querySelector (/All這個是靜態(tài)的節(jié)點(diǎn)集合，不是實(shí)時的)
childNodes/firstChild/lastChild/nextSibling/previousSibling/parentNode獲取的是所有類型的相關(guān)節(jié)點(diǎn)，不單單是元素節(jié)點(diǎn)
children/firstElmentChild/lastElmentChild/nextElmentSibling/previousElmentSibling/parentElment，獲取單單只是元素相關(guān)節(jié)點(diǎn)

節(jié)點(diǎn)樹

重點(diǎn)是:
HTMLBodyElement這些都是構(gòu)造函數(shù)，原型鏈的終端還是Object.prototype

document.body.__proto__ === HTMLBodyElement.prototype  //true
document.documentElement.__proto__.__proto__ === HTMLBodyElement.prototype.__proto__  //true  
document.documentElement.__proto__.__proto__===HTMLElement.prototype  //true

nodeType

innerHTML，outerHTML，textContent
elem.innerHTML：指的是elem中所有的childNodes,包括注釋節(jié)點(diǎn)可利用elem.innerHTML += "xxx"進(jìn)行累計全覆蓋
elem.outerHTML:指的是elem中所有的childNodes以及elem自身包括注釋節(jié)點(diǎn)
elem.textContent:指的是elem的childNodes中所有的文本節(jié)點(diǎn)，不包括注釋節(jié)點(diǎn)
注意點(diǎn)：

對于文本內(nèi)容例如：<>，innerHTML會進(jìn)行轉(zhuǎn)譯><,而textContent則不會原樣輸出
innerHTML會對內(nèi)容中的標(biāo)簽進(jìn)行轉(zhuǎn)譯為html相應(yīng)節(jié)點(diǎn)

當(dāng)script片段放入innerHTML中時不會執(zhí)行，但是對于包含事件類型的腳本就存在注入風(fēng)險

""; //無風(fēng)險
"";                          //有風(fēng)險

所以對于純文本建議使用textContent

outerHTML可以用來replace替換當(dāng)前及自身的內(nèi)容

nodeValue只有文本和注釋節(jié)點(diǎn)才有值，否則輸出null

contains，用來查詢父節(jié)點(diǎn)是否含有參數(shù)節(jié)點(diǎn)

attributes
元素屬性的map集合，可通過for-of迭代遍歷出name-value

hasAttribute/get/set/remove ==>檢測是否存在屬性/得到/設(shè)置/刪除

elem.proName與elem.getAttribute(proName)基本一致，有個別不一致，例如input-value

let input = document.querySelector("input");
input.setAttribute("value", 3);            //行間樣式顯示3
input.value = 666;                         //頁面內(nèi)容顯示666
console.log(input.getAttribute("value"));  //3

自定義屬性
通過data-log-n = 1可以通過elem.dataset.logN獲取屬性

元素節(jié)點(diǎn)創(chuàng)建let div = document.createElement("div");文本節(jié)點(diǎn)創(chuàng)建let textNode = document.createTextNode("Here I am");

簡單補(bǔ)充一個表格的創(chuàng)建

let table = document.createElement("table"); //創(chuàng)建一個table元素節(jié)點(diǎn)
let tbody = document.createElement("tbody"); //創(chuàng)建一個tbody元素節(jié)點(diǎn)
tbody.insertRow(0); //創(chuàng)建一行
tbody.rows[0].insertCell(0); //創(chuàng)建一行第一列
tbody.rows[0].cells[0].append(document.createTextNode("(0,0)")); //補(bǔ)充其內(nèi)容
tbody.rows[0].insertCell(1); //創(chuàng)建一行第二列
tbody.rows[0].cells[1].append(document.createTextNode("(0,1)"));
table.append(tbody);
div.append(table);

元素增刪改查
node.append()與node.prepend()都是在node內(nèi)部添加，一個始終往隊尾加一個往隊首加
node.before()與node.after()，一個加在node自身節(jié)點(diǎn)的上面，一個加在下面
node.replace();自身節(jié)點(diǎn)替換成參數(shù)節(jié)點(diǎn)
還有一個node.insertAdjacentHTML(where，html)；where有4種值
"beforebegin"與"afterbegin"在node開始位置的前或者后添加html
"beforeend"與"afterend"在node結(jié)束位置的前或者后添加html
elem.removeChild():刪除子節(jié)點(diǎn)，還存在內(nèi)存中通過變量可以讀取
node.remove()：則徹底刪除，不再內(nèi)存中，不再能被讀取

className將class的value以字符串形式返回

classList將class的value以類數(shù)組對象返回，提供了4種方法方便對class進(jìn)行增刪改查

elem.classList.add/remove("class")：增加和刪除類
elem.classList.toggle("class"): 如果類存在，則刪除它，否則添加它
elem.classList.contains("class"): 返回true/false，檢查給定的類

通過style獲取屬性值必須是在行間樣式中有填寫的，否則空；elem.style.borderLeftWidth="100px"通過破折號"-"變成大寫可以獲取屬性，必須帶有px

重置樣式：elem.style.borderLeftWidth=""；利用空字符串瀏覽器會應(yīng)用CSS類及其內(nèi)置樣式

完全重寫樣式：div.style.cssText="color: red !important;"或者div.setAttribute("style", "color: red...")

一種有css關(guān)聯(lián)的樣式，而不局限與行間樣式：getComputedStyle(element[, pseudo])

    


    

        
213
    

    

返回結(jié)果與css樣式關(guān)聯(lián)，返回結(jié)果是經(jīng)過計算的，例如16px，并且結(jié)果不一定是我們想要的例如auto
它還能讀取偽類元素的樣式屬性，將第二個參數(shù)填寫after；getComputedStyle(element, "after")

記住這張圖基本搞定：
簡單寫寫：offsetWidth:元素全尺寸=border+padding+content+滾動條寬度；clientWidth/Height:只考慮可見部分content+padding(不加滾動條)；
頂部邊框?qū)挾龋?b>clientTop,左邊邊框?qū)挾龋?b>clientLeft，但是當(dāng)滾動條在左邊時要加上其寬度=clientLeft
offsetParent來獲取最近的CSS定位祖先。并offsetLeft/offsetTop提供相對于它左上角的x / y坐標(biāo)。
屬性scrollWidth/scrollHeight還包括滾出（隱藏）部分，例如沒有水平滾動，scrollWidth等于clientWidth

大多數(shù)幾何屬性是只讀的，但scrollLeft/scrollTop可以更改，瀏覽器將滾動元素。

scrollLeft/scrollTop - 元素的滾動部分的寬度/高度
注意點(diǎn)：
如果一個元素不能被滾動（例如，它沒有溢出，或者這個元素有一個"non-scrollable"屬性）， scrollTop將被設(shè)置為0。
設(shè)置scrollTop的值小于0，scrollTop 被設(shè)為0
如果設(shè)置了超出這個容器可滾動的值, scrollTop 會被設(shè)為最大值.

順便提提如何是瀏覽器滾動條滾動：scrollTo(x,y)讓滾動條到水平x，垂直y的位置；scrollBy(x,y)讓滾動條每次以水平x，垂直y的距離滾動；
scrollIntoView():參數(shù)true默認(rèn)值，滾到頂部，false滾到底部；document.body.style.overflow = "hidden"禁止?jié)L動

整個文檔的寬度/高度，帶有滾動的部分

let scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

窗口大小

兩種辦法：document.documentElement.clientWidth/Height ，window.innerWidth/Height有細(xì)微區(qū)別當(dāng)有滾動條時，前者不包括后者包括

獲取元素相對窗口的坐標(biāo)elem.getBoundingClientRect()返回的包換坐標(biāo)的對象，左上頂點(diǎn)的（left，top）以及右下頂點(diǎn)的（right，bottom)
網(wǎng)頁滾出窗口部分，有兩種方式計算pageYOffset或者document.documentElement.scrollTop
因此我們可以計算元素相對與頁面的位置

function getCoords(elem) {
  let box = elem.getBoundingClientRect();

  return {
    top: box.top + pageYOffset,
    left: box.left + pageXOffset
  };
}