DOM
DOM節(jié)點 就是DOM中html的所有內容
?? ?節(jié)點分類：
????? 1.文本節(jié)點?html中的文本內容和空格換行?innerText
????? 2.元素節(jié)點? 標簽?getElement...
????? 3.屬性節(jié)點? 標簽中的屬性?getAttribute
獲取div元素的節(jié)點
1. 獲取元素的所有子節(jié)點，返回子節(jié)點的偽數(shù)組
?-語法： .childNodes
2. 獲取元素的所有子元素節(jié)點,返回子元素節(jié)點的偽數(shù)組
? -語法: ?.children
3. 獲取元素的子節(jié)點的第一個節(jié)點
?-語法：.firstChild
4. 獲取元素的最后一個子節(jié)點
? -語法：.lastChild
5. 獲取元素的第一個子元素節(jié)點
? -語法：.firstElementChild
6. 獲取元素的最后一個子元素節(jié)點
?-語法：.lastElementChild
7. 獲取元素的下一個兄弟節(jié)點
???? -語法： .nextSibling
8. 獲取元素的上一個兄弟節(jié)點
? -語法： .previousSibling
9. 獲取元素的下一個兄弟元素節(jié)點
? -語法：.nextElementSibling
10.獲取元素的上一個兄弟元素節(jié)點
? -語法：.previousElementSibling
11.獲取元素的父節(jié)點元素
? -語法:.parentNode
12.獲取元素的所有屬性節(jié)點 返回的是屬性節(jié)點偽數(shù)組
? -語法: .attributes()
節(jié)點屬性:
????? 1.節(jié)點類型? 通過節(jié)點.nodeType 獲取
???? 2.節(jié)點名稱? 通過節(jié)點.nodeName 獲取
???? 3.節(jié)點值??? 通過節(jié)點.nodeValue 獲取
- 節(jié)點類型：元素節(jié)點：1? 屬性節(jié)點：2? 文本節(jié)點：3 注釋節(jié)點：8
? -節(jié)點名稱：元素節(jié)點：標簽元素名稱大寫?? 屬性節(jié)點：屬性名? 文本節(jié)點：#text 注釋節(jié)點：#comment
? -節(jié)點值：元素節(jié)點：null 屬性節(jié)點：屬性值? 文本節(jié)點：文本內容本身? 注釋節(jié)點：注釋內容
操作DOM節(jié)點，無外乎就是增刪改查
? ????-?獲取頁面中的div元素
1. 創(chuàng)建元素節(jié)點
- 語法：document.createElement(標簽名)
? -返回值：可用的DOM元素節(jié)點
2. 創(chuàng)建文本節(jié)點
? -語法：document.createTextNode(內容);
? -返回值：返回一個文本節(jié)點
3. 向元素中添加元素
? -語法：元素A.appendChild(節(jié)點B)
? -將節(jié)點B追加到元素A里面的后面
4. 向元素的前面添加一個元素
? -語法：元素A.insertBefore(節(jié)點B,元素C)
? -將節(jié)點B添加到元素A里面的元素C的前面
5. 移除頁面元素
? -語法：元素A.removeChild(元素B)
? -將元素A中的元素B移除
6. 修改元素，替換元素
? -語法：元素A.replaceChild(節(jié)點B（替）,節(jié)點C（被替）)
? -用節(jié)點B替換元素A中的節(jié)點C
7.克隆
? -語法: 元素A.cloneNode(參數(shù))
? -參數(shù)默認是布爾值false ,如果是true則克隆子元素
? -返回值：克隆復制的元素
? 獲取div元素
???? -var div = document.querySelector('div');
?-獲取元素的樣式 style 只能獲取行內樣式
1. getComputedStyle() 全能的獲取樣式方法
? -不兼容低版本的IE瀏覽器 IE8以下
??-語法：window.getComputedStyle(元素,參數(shù)).樣式名
? -參數(shù)不寫默認 null, 獲取元素的樣式值
2.curentStyle()
? -可以兼容ie8以下的瀏覽器
? -語法：元素.currentStyle.樣式
獲取元素尺寸
- 內容+padding+border
- offsetWidth 寬 offsetHeight 高
?獲取dv元素
? - var dv = document.querySelector('#dv');
? // console.log(dv.offsetWidth);? // 240
? // console.log(dv.offsetHeight); // 230
獲取元素的偏移量
???? ?- offsetLeft offsetTop
1．? 如果元素沒有定位。則獲取的是相對于頁面的左上角
? // var dv = document.querySelector('#dv');
? // console.log(dv.offsetLeft); // 90
? // console.log(dv.offsetTop); // 10
2. 如果元素有定位，則獲取的是相對父元素左上角的定位
? // var dv = document.querySelector('#dv');
? // console.log(dv.offsetLeft); // 20
? // console.log(dv.offsetTop); // 30
