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

用來記錄和總結學的知識點，以便溫故知新

這么寫方便自己記憶

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

節點樹

重點是:
HTMLBodyElement這些都是構造函數，原型鏈的終端還是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,包括注釋節點可利用elem.innerHTML += "xxx"進行累計全覆蓋
elem.outerHTML:指的是elem中所有的childNodes以及elem自身包括注釋節點
elem.textContent:指的是elem的childNodes中所有的文本節點，不包括注釋節點
注意點：

對于文本內容例如：<>，innerHTML會進行轉譯><,而textContent則不會原樣輸出
innerHTML會對內容中的標簽進行轉譯為html相應節點

當script片段放入innerHTML中時不會執行，但是對于包含事件類型的腳本就存在注入風險

""; //無風險
"";                          //有風險

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

outerHTML可以用來replace替換當前及自身的內容

nodeValue只有文本和注釋節點才有值，否則輸出null

contains，用來查詢父節點是否含有參數節點

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

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

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

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

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

元素節點創建let div = document.createElement("div");文本節點創建let textNode = document.createTextNode("Here I am");

簡單補充一個表格的創建

let table = document.createElement("table"); //創建一個table元素節點
let tbody = document.createElement("tbody"); //創建一個tbody元素節點
tbody.insertRow(0); //創建一行
tbody.rows[0].insertCell(0); //創建一行第一列
tbody.rows[0].cells[0].append(document.createTextNode("(0,0)")); //補充其內容
tbody.rows[0].insertCell(1); //創建一行第二列
tbody.rows[0].cells[1].append(document.createTextNode("(0,1)"));
table.append(tbody);
div.append(table);

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

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

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

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

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

重置樣式：elem.style.borderLeftWidth=""；利用空字符串瀏覽器會應用CSS類及其內置樣式

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

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

    


    

        
213
    

    

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

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

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

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

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

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

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有細微區別當有滾動條時，前者不包括后者包括

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

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

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