DOM 操作

獲取dom元素

兩類標簽，非常規標簽，常規標簽 1. 非常規標簽 {html=> doucument.documentElementhead=> doucument.headbody=> doucument.body } 2. 常規標簽 {不是不能獲取，而是一般不用1. document.getElementById();查找范圍.getElementById("id名稱");查找范圍：doucument 或者一個元素返回值：如果有這個id 匹配的元素，就是這個元素如果沒有這個id 匹配的元素，就是null2. doucument.getElementsByTagName()查找范圍.getElementsByTageName("標簽名")返回值 是一個偽數組（數組常用方法用不了）如果有這個標簽名匹配的元素，有多少獲取多少如果沒有這個標簽匹配的元素，返回一個空的偽數組3. document.getElementsByClassName("類名");查找范圍：getElementsByClassName();返回值：是一個偽數組（數組常用方法用不了）如果有這個類名匹配的元素，有多少獲取多少如果沒有這個類名匹配的元素，返回一個空的偽數組4. document.getElementsByName("元素name屬性的值")查找范圍.getElementsByName()返回值：是一個偽數組（數組常用方法用不了）如果有這個name匹配的元素，有多少獲取多少如果沒有這個name匹配的元素，返回一個空的偽數組5. document.querySelector("選擇器")查找范圍.querySelector()返回值：如果找到選擇器匹配的元素，返回第一個找到的內容如果沒有找到選擇器匹配的元素，返回null6. document.qureySelectorAll("選擇器")查找范圍.querySelectorAll()返回值：如果找到選擇器匹配的元素，有多少獲取多少如果沒有找到選擇器匹配的元素，返回一個空的偽數組 }

操作元素屬性

+ js語法操作標簽上的三種屬性1. 原生屬性2. 自定義屬性3. H5 自定義屬性 + 原生屬性語法：元素.屬性名=> 讀 元素.屬性名=> 寫 元素.屬性名 = '值'注意：class除外，操作 類名使用 元素.className + 自定義屬性語法：不能直接點語法操作三個方法1. setAttrubute('屬性名', '屬性值')=> 給元素標簽上設置屬性2. getAttribute('屬性名')=> 獲取元素上的值3. removeAttribute('屬性名')=> 刪除元素上的屬性 + H5 自定義屬性 每一個元素身上都有一個屬性叫做 dataset里面包含了H5的自定義屬性=> 里面的key 就是除了 data- 以外的內容=> value 就是這個屬性的值操作 H5 的自定義屬性=> 直接在dataset 里面操作就可以獲取 H5 的自定義屬性=>元素.dataset.名字-> 名字: data-a 使用a就可以了 設置 H5 的自定義屬性=> 元素.dataset.名字 = '值'-> 名字 這里寫a，那么映射在標簽上是 data-a刪除dataset對象的hello成員delete div.dataset.hello

操作元素類名

+ 兩種方式操作元素類名 1. 按照原生屬性來操作類名=> 設置類名 -> 元素.className= 'box'=> 修改類名-> 元素.className = '新值'=> 追加類名-> 元素.className = 元素.className + ' 新類名'-> 注意，需要添加一個空格=> 刪除類名 比較麻煩-> 獲取類名-> 1. 截取字符串-> 2. 按照空格切開 循環遍歷，刪除你想刪除的-> 3. 再寫一遍 2. H5 標準提供給我們的API=> 元素身上有一個屬性叫做classList=> 添加類名： add() -> 元素.classList.add("你要添加的類名"); => 移除類名： remove() -> 元素.classList.remove("你要移除的類名"); => 切換的類名： toggle() -> 元素.classList.toggle("你要切換的類名"); -> 當元素有這個類名的時候，就刪除-> 當元素沒有這個類名的時候，就添加

操作元素文本內容

+ 三種1. innerHTML=> 一個讀寫的屬性=> 操作元素的超文本內容=> 讀 獲取元素內部的所有內容-> 語法 元素.innerHTML=> 寫 設置元素內部的超文本內容-> 完全覆蓋式的寫-> 元素.innerHTML = ""-> 字符串為瀏覽器html結構，自動解析2. innerText=> 一個讀寫的屬性=> 操作元素的超文本內容=> 讀 獲取元素內部的所有文本內容-> 語法 元素.innerText-> 包括子元素所有后代元素里面的文本內容-> 標簽內容不獲取=> 寫 設置元素的超文本內容-> 完全覆蓋式的寫-> 元素.innerText = "你要寫的內容"-> 字符串為瀏覽器html結構， 不會解析，原樣輸出3. value=> 一個讀寫的屬性=> 操作表單的vale值=> 讀 獲取元素內部的所有文本內容-> 語法 元素.value=> 寫 設置表單的vale值-> 元素.innerText = "你要設置的值"

獲取元素的樣式

1. style 的方式=> 利用原生屬性的方式=> 元素.style=> 獲取到的內容是一個對象，里面包含元所有可是設置的樣式=> 你想獲取哪一個樣式的值，就從對象里面獲取就可以 2. 獲取非行內樣式 2-1. window.getComputedStyle() 方法=> 標準瀏覽器=> 語法 window.getComputedStyle(要獲取樣式的元素)=> 返回值： 一個對象，里面包含所有可設置樣式，每一個樣式都有值，你不設置的有默認值=> 你需要哪一個樣式，直接在對象里訪問就可以了2-2. currentStyle 屬性 => IE低版本=> 語法 要獲取樣式的元素.currentStyle=> 得到的就是一個對象，里面包含元素的所有可設置樣式=> 你需要哪一個樣式，直接咋對象里面查找就可以了說明： + 當你獲取樣式的時候+ 若果使用.點語法-> 你獲取帶有中劃線的樣式要轉化成駝峰的樣式+ 如果使用 數組關聯語法，-> 你可以寫 中劃線兼容 段落運算符：+ 什么情況下用短路表達式兼容=> 方法或屬性執行沒有問題，只是拿不到值的時候+ 前提 你的代碼執行不報錯這里的兼容，自己封裝一個函數 3. 設置元素的樣式+ 只有一種方式=> 設置元素的行內樣式=> 前端JS理論上是不可以設置元素的非行內樣式的-> 要修改非行內樣式-> 需要修改html文件或者css文件的-> 前端js不能操作電腦上的文件+ 設置行內樣式語法 元素.style.樣式名 = 值 // 標準瀏覽器 var style = window.getComputedStyle(div); console.log(style.backgroundColor); console.log(style['background-color']); // IE低版本 var style2 = div.currentStyle; console.log(style.width) console.log(style.height) // 自己封裝一個函數去兼容1. 準備一個函數接收幾個參數=> 獲取什么樣式的元素=> 要獲取什么樣式2. 函數內部處理兼容=> 報錯原因=> window.getComputedStyle()-> IE 報錯，對象不支持 getComputedStyle()-> 谷歌報錯，window.getComputedStyle is not a function=> 判斷 getComputedStyle是不是在window里面function getStyle(ele, style){// 標準瀏覽器if('getComputedStyle' in window){return window.getComputedStyle(ele)[style];}else{// IE 低版本瀏覽器return ele.currentStyle[style];}}

了解bom節點

+ 我們頁面市有一個一個節點組成 + 頁面的每一個組成部分都是一個節點1. document=> 一個頁面中最大的節點=> 承載所有的節點容器=> 根節點2. html=> 一個頁面中最大的元素節點=> 承載所有其他節點=> 根元素節點3. 元素節點=> head / body / div / ul / table..=> 只是不同的標簽子啊頁面中的表現形式不一樣=> 特點 是頁面的標簽4. 文本節點=> 每段文本內容都是一個文本節點=> 包含換行 空格=> 一般作為元素節點的子節點存在，用來表示該元素節點在頁面上顯示的內容5. 屬性節點=> 注意 屬性系欸但不作為獨立節點出現 必須依賴元素=> 因為沒有元素，屬性節點就是文本6. 注釋節點=> 作為獨立節點出現=> 作為說明文本使用 節點操作+ 操作元素+ 操作 注釋節點 文本節點 屬性節點+ 獲取節點=> 獲取節點 包含不限于元素節點+ 創建節點=> 通過JS的語法來制造一個標簽 文本 注釋 ... + 插入節點=> 把我創造的一個節點插入到另一個節點中 出現了父子結構+ 刪除節點=> 把一個已經存在的節點移出+ 替換節點=> 我創造一個節點替換一個以經存在的節點+ 克隆節點=> 把一個以經存在的節點復制一份一摸一樣的

獲取節點的屬性

1. childNodes+ 語法：元素.childNodes+ 得到：元素的所有子節點（偽數組） 2. children+ 語法：元素.children+ 得到：元素的所有 子元素節點（偽數組） 3. firstChild+ 語法：元素.firstChild+ 得到：元素的第一個節點 4. firstElementChild+ 語法：元素.firstElementChild+ 得到：元素的第一個 子元素節點 5. lastChild+ 語法：元素.lastChild+ 得到：元素的最后一個 子節點 6. lastElementChild+ 語法：元素.lastElementChild+ 得到：元素的最后一個 子元素節點7. previousSibling + 語法：元素.previousSibling+ 得到：元素的上一個 兄弟節點(哥哥節點) 8. previousElementSibling + 語法：元素.previousElementSibling+ 得到：元素的上一個 兄弟元素節點(哥哥元素) 9. nextSibling+ 語法：元素.nextSibling+ 得到：元素的下一個 兄弟節點(弟弟節點) 10. nextElementSibling + 語法：元素.nextElementSibling+ 得到：元素的下一個 兄弟元素節點(弟弟元素)11. parentNode+ 語法：元素.parentNode+ 得到：元素的 父節點+ 大部分是元素，有特殊的 document 12. parentElement+ 語法：元素.parentElement+ 得到：元素的 父元素+ 大部分是元素，有特殊的 document 13. attributes+ 語法：元素.attributes+ 得到：元素的所有 屬性節點

節點屬性

+ 屬性節點=> 元素身上放的屬性=> 每一個屬性是一個節點 + 節點屬性=> 用來描述這個節點信息=> 不同節點有相同的屬性名，但是值不一樣=> 例子：-> 元素節點: 編號 001-> 屬性節點: 編號 002 + 節點屬性有三個1. nodeType=> 以數字的形式來表示一個節點類型=> 一種節點編號=> 元素節點：1=> 屬性節點：2=> 文本節點：3=> 注釋節點：82. nodeName=> 節點的名稱=> 元素節點 ： 大寫標簽名(全大寫)=> 屬性節點 ： 屬性名=> 文本節點 ： 所有文本節點叫做#test=> 注釋節點 ： 所有注釋節點全部叫做 #comment3. nodeValue=> 節點的值=> 元素節點 null=> 屬性節點 屬性值=> 文本節點 文本內容（包含換行和空格）=> 注釋節點 注釋內容（包含換行和空格）

創建節點

1. 創建標簽節點+ createElement()+ 語法：document.createElement('標簽名') 2. 創建文本節點+ createTextNode()+ document.createTextNode("文本內容")返回值：一個文本節點，不是字符串 3. createComment()+ 語法：document.createComment("注釋內容");+ 返回值：一個注釋節點 4. createAttribute()+ document.createAttribute("屬性名")+ 添加屬性值， 節點.value = "屬性值"+ 返回值 ： 一個屬性節點

插入節點

+ 把一個節點插入到另一個節點里面 1. appendChild()語法：父節點.appendChild(子節點)作用：把子節點插入到父節點里面，放在最后一個節點位置 2. innsertBefore()語法：父節點.innserBefore(要插入的子節點，哪一個子節點前面)作用：把子節點插入到指定父節點的子節點前面

刪除節點

+ 刪除一個已經存在的節點 + 可以在創建的節點里面刪除，也可以直接在頁面元素里面刪除 1. removeChild()+ 語法：父節點.removeChild(子節點)+ 作用：把子節點從父結點里面移除 2. reove()+ 語法：節點.remove()+ 作用：把自己移出父節點

替換節點

+ 用一個節點替換一個以經存在的節點 + 可以直接替換頁面元素，也可以直接替換我們自己創建的節點 1. replaceChild()+ 語法：父節點.replaceChild(新節點，舊節點)+ 作用：字符節點下，用新節點替換舊節點

克隆節點

+ 把謀一份節點復制一份一模一樣的 1.cloneNode()+ 語法：節點.cloneNode(參數)-> 參數選填，默認值是 false 不克隆后代節點-> 我們可以選填true 克隆所有子節點+ 作用：一個克隆好的節點

獲取元素的尺寸

+ 元素的尺寸 + 占地面積 內容區域 + padding + border 兩組方式：1. offsetWidth 和 offsetHeight+ 語法：-> 元素.offsetWidth-> 元素.offsetHeight+ 得到：-> 元素的內容 + padding + border 區域的尺寸+ 注意：-> display 是02. clientWidth 和 clientHeight+ 語法：-> 元素.clientWidth-> 元素.clientHeight+ 得到：-> 元素的 內容 + padding 區域的尺寸+ 注意：-> display 是0

獲取元素的偏移量

一個元素相對于參考系的坐標 1. offsetParent+ 語法：元素.offsetParent+ 作用：拿到該元素獲取偏移量的時候的參考父級=> 當你給這個元素設置一個絕對定位的時候，它會根據誰來定位，他的offsetParent 就是誰 2. offsetLeft 和 offsetTop+ 語法：-> 元素.offsetLeft-> 元素.offsetTop+ 得到：-> 元素相對于參考父級的左邊和上邊的偏移量

獲取瀏覽器尺寸

+ BOM 級別的獲取=> innerWidth=> innerHeight=> 拿到的時包含滾動條的尺寸 + DOM 級別的獲取=> 其實是獲取頁面的那一部分尺寸=> document.documentElement.clientWidth=> document.documentElement.clientHeight

元素的常用事件

+ JS 里面， 事件分為幾個大類1. 鼠標事件1.1 click =>鼠標左鍵單擊1.2 dblclick =>鼠標左鍵雙擊1.3 contextmenu =>鼠標右鍵單擊1.4 mousewhell =>鼠標滾動事件1.5 mousedown =>鼠標按下事件左鍵，右鍵，滾輪，功能鍵都能觸發1.6 mouseup =>鼠標抬起事件1.7 mousemove =>鼠標移動事件1.8 mouseover =>鼠標移入事件1.9 mouseout =>鼠標移出事件1.10 mouseenter =>鼠標移入事件1.11 mouseleave =>鼠標移出事件2. 鍵盤事件+ 不是所有元素都能觸發+ 表單元素又選中效果，documetn, window1. keydown => 鍵盤按下2. keyup => 鍵盤抬起3. keypress=> 鍵盤按下必須要準確的嵌入到文本框里面的內容才會觸發3. 瀏覽器事件3.1 load => 頁面加載完畢3.2 scroll => 滾動3.3 resize => 窗口尺寸改變3.4 offline=> 網絡斷開3.5 online => 網絡恢復3.6 hashchange => 當哈希值改變了4. 表單事件表單事件綁定給 表單元素 和form 標簽的4.1 change => 表單內容改變表單失焦和聚焦不一樣才會觸發4.2 input => 表單內部輸入內容就會觸發只要你在里面寫就觸發4.3 focus => 表單聚焦事件4.4 blur => 表單失焦事件4.5 submit => 表單提交事件綁定給form標簽使用的的當你點擊form里的submit的時候觸發4.6 reset => 表單重置事件-> 事件是綁定給form標簽使用的-> 當你點擊 reset 按鈕才能觸發5. 拖拽事件一般元素想發生拖拽事件，要給元素加一個屬性draggable='true';需要兩個元素才能完成一個完整的拖拽5.1 dragstart => 拖拽開始綁定給拖拽元素的5.2 drag => 拖拽移動綁定給拖拽元素5.3 ragend => 拖拽結束綁定給拖拽元素5.4 dragenter => 拖拽進入目標元素綁定給目標元素的光標進入到目標元素5.5 dragleave => 拖拽離開目標元素綁定給目標元素的5.6 dragover => 拖拽元素在目標元素里移動5.7 drop => 拖拽元素在目標元素內放手綁定給目標元素的必須要在dragover 事件里阻止默認行為6. 觸摸事件 只能在移動端使用6.1 touchstart => 觸摸開始6.2 touchmove => 觸摸移動6.3 touchend => 觸摸結束7. 其他事件7.1 transitionend => 過度結束當你有過度屬性的時候過度結束觸發，你過度幾屬性，觸發幾次7.2 selectstart 開始選擇當你想在頁面中框選文檔的時候觸發7.3 visiblitychange => 窗口隱藏和顯示只綁定給document + JS 里面原生事件沒有大寫字母 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的dom常用操作全后续会补充的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。