1.文檔節點(document)
屬性:
all文檔中所有HTML元素集合//例document.all[2]
anchors文檔中所有錨點對象集合
forms文檔中所有form對象集合
images文檔中所有img對象集合
body,cookie,domain,lastModified,referrer,title,URL
方法:
getElementById()返回對擁有指定 id 的第一個對象的引用。
getElementsByName()返回帶有指定name的對象集合。
getElementsByTagName()返回帶有指定標籤名的對象集合。
2.元素節點
元素節點對象可以擁有類型爲元素節點、文本節點、註釋節點的子節點
element.appendChild() 向元素添加新的子節點，作爲最後一個子節點。
element.attributes 返回元素屬性的 NamedNodeMap(所有的屬性)。
element.childNodes返回元素子節點的NodeList。
element.className 設置或返回元素的class 屬性。
document.createElement() 創建元素節點
element.cloneNode() 克隆元素。
element.dir 設置或返回元素的文本方向//值有左右:rtl ltl
element.firstChild 返回元素的首個子節點。
element.getAttribute() 返回元素節點的指定屬性值。
element.getAttributeNode() 返回指定的屬性節點。
element.getElementsByTagName() 返回擁有指定標籤名的所有子元素的集合。
element.hasAttribute() 如果元素擁有指定屬性，則返回true，否則返回 false。
element.hasAttributes() 如果元素擁有屬性，則返回 true，否則返回 false。
element.hasChildNodes() 如果元素擁有子節點，則返回true，否則 false。
element.id 設置或返回元素的 id。
element.innerHTML 設置或返回元素的內容。
element.textContent 設置或返回節點及其後代的文本內容。
element.insertBefore() 在指定的已有的子節點之前插入新節點。
element.isContentEditable 是否可以設置或返回元素的內容(是否可編輯)。
element.isEqualNode() 檢查兩個元素是否相等。
element.isSameNode() 檢查兩個元素是否是相同的節點。
element.lastChild 返回元素的最後一個子元素。
element.nextSibling 返回位於相同節點樹層級的下一個節點(弟弟)
element.nodeName 返回元素的名稱。
element.nodeType 返回元素的節點類型。//返回12個數字中一個 作業:查看博客每一種
element.nodeValue 設置或返回節點的值。//注意點:元素的文本信息是元素的子節點,先得到文本節點,在調這個屬性才能得到想要的文本.
element.ownerDocument 返回元素的根元素（文檔對象）。
element.parentNode 返回元素的父節點。
element.previousSibling 返回位於相同節點樹層級的前一個元素。
element.removeAttribute() 從元素中移除指定屬性。
element.removeAttributeNode() 移除指定的屬性節點，並返回被移除的節點。
element.removeChild() 從元素中移除子節點。
element.replaceChild() 替換元素中的子節點。
element.setAttribute() 把指定屬性設置或更改爲指定值。
element.setAttributeNode() 設置或更改指定屬性節點。
element.setUserData() 把對象關聯到元素上的鍵。
element.style 設置或返回元素的style 屬性。
element.tabIndex 設置或返回元素的 tab 鍵控制次序。
element.tagName 返回元素的標籤名。
element.title 設置或返回元素的title 屬性。
element.toString() 把元素轉換爲字符串。
nodelist.item(index) 返回 NodeList 中位於指定下標的節點。
nodelist.length 返回 NodeList 中的節點數。關於盒子的
element.clientHeight 返回元素的可見高度。//跟style返回的寬高的數據類型對比
element.clientWidth 返回元素的可見寬度。
element.offsetHeight 返回元素的高度(可見+邊+滾動條)。
element.offsetWidth 返回元素的寬度。
element.offsetLeft 返回元素的水平偏移位置。
element.offsetTop 返回元素的垂直偏移位置。
element.scrollHeight 返回元素的整體高度。
element.scrollWidth 返回元素的整體寬度。
element.scrollLeft 返回元素左邊緣與視圖之間的距離。
element.scrollTop 返回元素上邊緣與視圖之間的距離。
屬性節點:
document.getElementById("p1").getAttributeNode("style")
attr.isId 如果屬性是 id 類型，則返回 true，否則返回 false。
attr.name 返回屬性的名稱。
attr.value 設置或返回屬性的值。
nodemap.getNamedItem() 從 NamedNodeMap 返回指定的屬性節點。
nodemap.item(index) 返回NamedNodeMap 中位於指定下標的節點。
nodemap.length 返回NamedNodeMap 中的節點數。
nodemap.removeNamedItem() 移除指定的屬性節點。
nodemap.setNamedItem() 設置指定的屬性節點（參數填createAttribute創建的屬性或者獲取的屬性）。
table表格的操作
1.表格對象自帶的
屬性:
rows 返回包含表格中所有行的一個數組。
cells 返回包含表格中所有單元格的一個數組。//先得到row再得到cells
方法:
insertRow(index) 在表格中插入一個新行,並返回這個行。(-1表示在末尾插入)
insertCell(index) 在行中插入一個單元格,並返回這個單元格(-1表示在末尾插入)
cell.innerHTML 在單元格中插入內容
<table id="mytable1"style="width:600px" border="1px">
var table1= document.getElementById("mytable1")
for (vari=0;i<100 ; i++){
varrow = table1.insertRow(-1);
for(var j=0;j<100 ; j++){
var cell = row.insertCell(-1);
cell.innerHTML=(new Date()).getTime();
}
}
時間:1480587971300-1480587971165=135(ms)
2.DOM操作
<table id="mytable1"style="width:600px" border="1px">
for (var i=0;i<100 ; i++){
vartr = document.createElement("tr");
for (var j=0;j<100 ; j++){
var td = document.createElement("td");
var text = document.createTextNode((new Date()).getTime());
td.appendChild(text);
tr.appendChild(td);
}
table1.appendChild(tr);
}
時間:1480587821733-1480587821692=41(ms)
3.(忘記前兩種,學這個)document.createDocumentFragment()
DocumentFragment 節點不屬於文檔樹,不過它有一種特殊的行爲，當請求把一個 DocumentFragment 節點插入文檔樹時，插入的不是 DocumentFragment 自身，而是它的所有子孫節點。當需要對頁面DOM進行操作的時候必然會導致多次重繪、迴流（下下一個知識點講）。這樣會加大頁面的負擔。影響頁面性能。
document.createDocumentFragment()
var fragment=document.createDocumentFragment()
for (vari=0;i<100 ; i++){
vartr = document.createElement('tr')
fragment.appendChild(tr);
for(var j=0;j<100 ; j++){
var td = document.createElement('td')
td.innerHTML=(new Date()).getTime();
tr.appendChild(td);
}
}
var table1= document.getElementById("mytable1")
table1.appendChild(fragment)
時間:1480606556072-1480606555944=41(ms)
4.使用DOM的操作
性能顯然要比Table對象操作要快。從數據明顯可以說明。Table對象的方法其實也是DOM操作。影響性能的取決於頁面重繪的次數。顯然使用insertRow和inertCell也會導致頁面重繪(下一個知識點講)。100*100次重繪。而使用DOMFragment。頁面只重繪了1次。從代碼上來看使用Table標準方法的代碼比DOM操作的代碼要簡潔直觀一些。
總的來說，對於少量的表格操作，可以使用Table對象自帶的方法來操作，對於大量的Table操作還是要使用最優的DOM操作