DOM(文件物件模型)+操作DOM
阿新 • • 發佈：2022-04-01
DOM元素
DOM：document object model 文件物件模型
一整套操作文件流的屬性和方法，其實就是操作頁面的元素在瀏覽器中DOM是樹狀結構
DOM元素的獲取
非常規標籤獲取（html,head,body） document.documentElement 拿到當前頁面的html標籤 document.head 獲取當前頁面的head標籤 document.body 獲取當前頁面的body標籤 常規標籤的獲取（div,ul,li,input） document.getElementById(' box ') 如果有名為box的id，獲取id名為box的元素的第一個 如果沒有名為box的id，返回null document.getElementsByClassName('class名稱') 在整個文件流裡面通過元素的類名獲取元素 返回一個為陣列，包含所有該類名的元素，沒有就返回一個空為陣列 document.getELementsByTagName('標籤名') 在整個文件流裡面通過元素的標籤名獲取元素 返回一個為陣列，包含所有該標籤名的元素，沒有就返回一個空為陣列 documen.querySelector('選擇器') 選擇器：css中的選擇器 在文件流中通過選擇器來進行元素的獲取 返回值：頁面中有與該選擇器相匹配的元素，就是匹配到的元素，如果沒有就返回null documen.querySelectorAll('選擇器') 在文件流中通過選擇器來進行元素的獲取 返回一個為陣列，包含所有該選擇器匹配的元素，沒有就返回一個空為陣列 注意：querySelector 和 querySelector IE低版本不支援
DOM操作元素內容
1，innerHTML 操作元素內部的所有元素 讀：元素.innerHTML 獲取元素內部的所有內容（文字+標籤），以字串形式返回 寫：元素.innerHTML="你要設定的內容" 設定元素內部的超文字內容 當字串裡出現html結構時，瀏覽器會自動解析後在頁面顯示 2，innerText 操作元素的文字內容 讀：元素.innerText 獲取元素內部所有的文字內容，不獲取標籤 寫：元素.innerText="你要設定的文字內容" 覆蓋式寫入文字內容，當字串中有html結構時，不會被瀏覽器解析，而是當作文字輸出
DOM操作元素的屬性
操作原生屬性（src,type，id）
讀：元素.屬性名
獲取元素的屬性值
寫：元素.屬性名=“值”
設定元素該屬性的屬性值
操作自定義屬性
元素.setAttribute('屬性名'，‘屬性值’)
設定元素的自定義屬性
元素.getAttribute('屬性名')
獲取元素的一個自定義屬性的屬性值
元素.removeAttribute('屬性名')
刪除元素的一個自定義屬性
DOM操作元素類名
1，按原生屬性操作 div.className='box'--設定類名 div.className='box1'--修改類名 div.className+=' abd'--追加類名abc 刪除元素類名 1，擷取字串方式 2，按照空格切開，迴圈遍歷，找到想刪的刪掉 3，重寫一遍類名，去掉想刪的類名 2，H5 方式操作類名 div.classList.add('box3')---追加類名box3 div.classList.remove('box1')---刪除類名box1 div.toggle('box2')---切換類名狀態 當元素有這個類名的時候，就是刪除操作 當元素沒有這個類名的時候，就是追加操作
DOM操作元素樣式
獲取元素樣式
獲取行內樣式（利用style是元素的原生屬性）
元素.style
只能獲取到行內樣式
獲得一個物件，需要哪個樣式的值直接在物件裡訪問
獲取非行內樣式
標準瀏覽器：window.getComputedStyle('元素')---獲得一個物件，裡面包含該元素的所有屬性值，未設定的有預設值，需要哪個樣式直接在物件裡訪問
IE 低版本瀏覽器：元素.currentStyle---得到的是一個物件，裡面包含的是所有可設定樣式，每一個樣式都有值，沒有設定的有預設值。你需要哪個樣式，直接在物件裡面查詢就行
說明：當獲取樣式的時候，如果使用點語法，你獲取帶有中劃線的樣式要轉化成駝峰的方式；如果是陣列關聯語法，可以使用中劃線
擴充套件：短路表示式
什麼情況下用短路表示式：方法或屬性執行沒問題，就是拿不到值的時候
前提：程式碼執行不能報錯
設定元素樣式
JS只能設定行內樣式（因為修改非行內樣式需要修改html和css檔案，JS不能操作電腦檔案）
元素.style.樣式名=‘值’
DOM節點操作
獲取節點根據關係
1，childNodes
div.childNodes---獲取div元素的所有孩子節點
2,children
div.children---獲取div元素的所有孩子元素節點
3,firstChild
div.firstChild---獲取div的第一個孩子節點
4,firstElementChild
div.fistElementChild---獲取div元素的第一個孩子元素節點
5,lastChild
div.lastchild---獲取div元素的最後一個節點
6,lastElementChild
div.lastElementChild---獲取div元素的最後一個元素節點
7,previousSlibling
div.previousSilbing---獲取div元素的前一個兄弟節點
8,previousElementSlbling
div.previousElementsSilbing---獲取div元素的前一個元素節點
9,nextSibling
div.nextSilbing---獲取div元素的後一個兄弟節點
10,nextElementSibling
div.nextElemnetSilbing----獲取div元素的後一個兄弟節點
11,parentNode
div.parentElement---獲取div元素的父親節點
12,parentElement
div.parentElement---獲取div元素的父親元素節點
13,attributes
div.attributs---獲取div的所有屬性節點
建立節點
1，createElement()--建立元素節點
document.creatElement('div')---建立一個div節點
2,createTextNode()---建立文字節點
document.creatTextNode('文字內容')---建立一個文字節點
3,createComment()---建立一個註釋節點
document.creatComment("註釋內容")---建立一個註釋節點
4,createAttribute()---建立一個屬性節點
document.creatAttribute('屬性名')---建立一個屬性節點
5,createDocumentFragment()
文件碎片
插入節點
1，appendChild()---在末尾新增孩子節點
div.appendChild(要新增的節點)---在div的末尾新增新節點
2,insertBefore()---在某個孩子元素之前插入節點
div.insertBefore(要插入的節點，你要插入到那個元素前面)---把一個新節點插入到某個元素之前
刪除節點
1，removeChild()---刪除一個孩子節點
div.remove(要刪除的節點)---刪除div的某個節點
2,remove()---刪除某個節點
div.remove()---刪除div節點
替換節點
1，repalceChild()---用一個新節點替換老孩子節點
div.replaceChild(新節點，老節點)---用一個新節點替換div裡的一個孩子節點
克隆節點
1，cloneNode（引數）---克隆節點
div.cloneNode()---克隆一個div節點
引數
引數預設為false,不克隆後代節點
可以填選true,克隆後代節點
節點屬性
nodeType--節點型別
元素節點：1
屬性節點：2
文字節點：3
註釋節點：8
nodeName---節點名稱
DIV--元素節點：大寫標籤名
id --屬性節點：屬性名
文字節點：#text
註釋節點：#comment
nodeValue---節點的值
元素節點：null
屬性節點：屬性值
文字節點：文字內容（包含換行和空格）
註釋節點：註釋內容（包含換行和空格）