DOM學習總結

初識DOM

DOM是Document Object Model，即是文件物件模型。

文件物件模型有三種節點關係。分別是父節點，兄弟節點，子孫節點。

DOM節點型別

元素節點            　　Node.ELEMENT_NODE(1)
屬性節點            　　Node.ATTRIBUTE_NODE(2)
文字節點            　　Node.TEXT_NODE(3)
CDATA節點             Node.CDATA_SECTION_NODE(4)
實體引用名稱節點    　　 Node.ENTRY_REFERENCE_NODE(5)
實體名稱節點        　　Node.ENTITY_NODE(6)
處理指令節點        　　Node.PROCESSING_INSTRUCTION_NODE(7)
註釋節點            　 Node.COMMENT_NODE(8)
文件節點            　 Node.DOCUMENT_NODE(9)
文件型別節點        　　Node.DOCUMENT_TYPE_NODE(10)
文件片段節點        　　Node.DOCUMENT_FRAGMENT_NODE(11)
DTD宣告節點            Node.NOTATION_NODE(12)

nodeType

nodeType檢視節點型別
Object.nodeName檢視節點屬性名
nodeValue：檢視值

Object.childNodes：獲得元素下的所有子節點集合：
children：獲得元素的子節點集合：

Object.attributes檢視節點的屬性，比如說ID

parentNode

object.parentNode

nextElementSibling和previousElementSibling

同級

lastElementChild和firstElementChild

子元素節點

offsetParent

定位
/適用條件就是 父級有定位，本級也要有定位，並且設定可width與height/
/指向最近的有定位屬性的祖先節點，如果都沒有，則指向body/

offsetLeft和offsetLeftTop

offsetLeft·：當前元素（子元素）的外邊框到定位父元素的內邊框的距離
offsetTop

加邊框的絕對位置

parseInt(getComputedStyle(elem).borderLeftWidth)//需要新增上邊框最後再減去；

getBoundingClientRect

獲取某個元素相對於視窗的位置集合。返回值是一個物件

元素的屬性操作

獲取元素的屬性。獲取行間屬性，無法獲取自定義屬性
elem.getAttribute('key');
設定元素的屬性
elem.setAttribute('key'，'value');//是可以憑空進行設定的
刪除元素的行間屬性
elem.removeAttribute('key');

img.getAttribute('src';//這裡輸出的值就是可預測的

元素的尺寸

獲取元素的寬高，文字溢位不會被計算，都不支援padding值

elem.clientWidth（獲取某個元素的寬高）：不計算邊框，加上padding
elem.offsetHeight（獲取某個元素的寬高）：計算邊框，加上padding

document.documentElement？指的是html

document.documentElement.clientWidth//獲取可視區域的寬
document.documentElement.clientHeight//獲取可視區域的高

使得一個不確定寬高的元素居中

        div.style.left = (document.documentElement.clientWidth - div.offsetLeft)/2 - parseInt(getComputedStyle(div).width)/2+'px';

元素的操作

document.createElement('標籤的名字'); //建立元素
parentNode.appendChild(childNode);//向元素末尾新增一個子元素
parentNode.inserBefore(newElement，nowElement)//向nowElement元素之前新增newElement元素。如果第二個元素為假，那會新增到元素的末位
elem.removeChild(DeleteChildElement)；//刪除元素。如果元素並不存在，那麼將會報錯。

elem.remove();//把這個元素給刪除掉了

elemParent.replaceChild(替換成什麼,被替換)；//是替換，並沒有分身。

element.cloneNode(Boolean);//克隆。克隆之後還沒有新增到body上面去.如果Boolean是false，不會克隆子元素，事件不會被克隆。

appendChild/insertBefore/replaceChild在操作一個已有的元素時， 是將已有的元素移動，而不是複製一份進行操作。

表格的操作

//get是table的id
    /*獲取頭部*/
    get.tHead.style.backgroundColor = 'yellow';
    /*獲取底部*/
    get.tFoot.style.backgroundColor = 'blue';
    /*tBodies的內容是一個集合，可有很多tbody*/
    get.tBodies[1].style.background = 'red';


    /*獲取tr.tr表示的是一行，rows表示的是一行.rows是一個複數*/
    get.rows[1].style.backgroundColor = 'green';


    /*cells[]單元格*/
    get.rows[2].cells[2].style.background = 'pink';