JavaScript Dom相關知識點

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

這麼寫方便自己記憶

重點是:

htmlbodyelement這些都是建構函式，原型鏈的終端還是object.prototype

document.body.__proto__ === htmlbodyelement.prototype  //true

document.documentelement.__proto__.__proto__ === htmlbodyelement.prototype.__proto__ //true 
document.documentelement.__proto__.__proto__===htmlelement.prototype //true

node.element_node

1元素節點，element

node.text_node

3文字節點，textcontent

node.processing_instruction_nodee

7乙個用於xml文件的 processinginstruction ，例如 <?xml-stylesheet ... ?> 宣告。

node.comment_node

8乙個注釋節點

node.document_node

9document節點

node.document_type_node

10描述文件型別的 documenttype 節點。例如 文件型別宣告。

node.document_fragment_node

11乙個 documentfragment 節點，**片段節點

213

記住這張圖基本搞定：

簡單寫寫：offsetwidth:元素全尺寸=border+padding+content+滾動條寬度；clientwidth/height:只考慮可見部分content+padding(不加滾動條)；

頂部邊框寬度：clienttop,左邊邊框寬度：clientleft，但是當滾動條在左邊時要加上其寬度=clientleft

offsetparent來獲取最近的css定位祖先。並offsetleft/offsettop提供相對於它左上角的x / y座標。

屬性scrollwidth/scrollheight還包括滾出（隱藏）部分，例如沒有水平滾動，scrollwidth等於clientwidth

順便提提如何是瀏覽器滾動條滾動：scrollto(x,y)讓滾動條到水平x，垂直y的位置；scrollby(x,y)讓滾動條每次以水平x，垂直y的距離滾動；

scrollintoview():引數true預設值，滾到頂部，false滾到底部；document.body.style.overflow = "hidden"禁止滾動

兩種辦法：document.documentelement.clientwidth/height，window.innerwidth/height有細微區別當有滾動條時，前者不包括後者包括

獲取元素相對視窗的座標elem.getboundingclientrect()返回的包換座標的物件，左上頂點的（left，top）以及右下頂點的（right，bottom)

網頁滾出視窗部分，有兩種方式計算pageyoffset或者document.documentelement.scrolltop

因此我們可以計算元素相對與頁面的位置

function getcoords(elem) ;

}

javaScript DOM程式設計

1.獲取dom樹的根節點 2.getelementbyid 根據標籤的id獲取標籤元素和getelementsbytagname根據標籤名獲取標籤，返回的是陣列的形式 3.getelementsbynames 根據標籤的name屬性獲取標籤，返回的是陣列形式 有兩個input標籤，因此列印結果是2 ...

JavaScript DOM程式設計

dom document objective model 文字物件模型 例子 clickme 例子 先獲取某一指定的元素節點 再讀指定元素節點的屬性 設定指定元素節點的屬性的值 例子 你喜歡那個城市？你喜歡哪款單擊遊戲？name 先獲取某節點。用childnodes方法獲取指定元素節點的所有子節點。...

javascript DOM 獲取節點

1.獲取元素節點 1.1 通過元素節點的id屬性獲取 語法 document.getelementbyid 元素id屬性的值 例如 1.2 根據元素的名稱獲取,獲取的是所有為該名稱的元素節點組成的陣列，可以用陣列的方法操作該節點陣列 語法 document.getelementsbytagname ...