這篇文章將為大家詳細講解有關(guān)JS中Dom的相關(guān)知識示例，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

為嵊泗等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及嵊泗網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、成都做網(wǎng)站、嵊泗網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

主旨

用來記錄和總結(jié)學的知識點，以便溫故知新

說明

這么寫方便自己記憶

節(jié)點相關(guān)

Dom節(jié)點獲取

getElement (Id,ClassName,TagName)和querySelector (/All這個是靜態(tài)的節(jié)點集合，不是實時的)
childNodes/firstChild/lastChild/nextSibling/previousSibling/parentNode獲取的是所有類型的相關(guān)節(jié)點，不單單是元素節(jié)點
children/firstElmentChild/lastElmentChild/nextElmentSibling/previousElmentSibling/parentElment，獲取單單只是元素相關(guān)節(jié)點

節(jié)點樹

重點是:

HTMLBodyElement這些都是構(gòu)造函數(shù)，原型鏈的終端還是Object.prototype

document.body.__proto__ === HTMLBodyElement.prototype  //true
document.documentElement.__proto__.__proto__ === HTMLBodyElement.prototype.__proto__  //true  
document.documentElement.__proto__.__proto__===HTMLElement.prototype  //true

nodeType

innerHTML，outerHTML，textContent
elem.innerHTML：指的是elem中所有的childNodes,包括注釋節(jié)點可利用elem.innerHTML += "xxx"進行累計全覆蓋
elem.outerHTML:指的是elem中所有的childNodes以及elem自身包括注釋節(jié)點
elem.textContent:指的是elem的childNodes中所有的文本節(jié)點，不包括注釋節(jié)點

注意點：

對于文本內(nèi)容例如：<>，innerHTML會進行轉(zhuǎn)譯><,而textContent則不會原樣輸出
innerHTML會對內(nèi)容中的標簽進行轉(zhuǎn)譯為html相應(yīng)節(jié)點

當script片段放入innerHTML中時不會執(zhí)行，但是對于包含事件類型的腳本就存在注入風險

""; //無風險
"";                          //有風險

所以對于純文本建議使用textContent

outerHTML可以用來replace替換當前及自身的內(nèi)容

nodeValue只有文本和注釋節(jié)點才有值，否則輸出null

屬性相關(guān)

attributes
  元素屬性的map集合，可通過for-of迭代遍歷出name-value

hasAttribute/get/set/remove ==>檢測是否存在屬性/得到/設(shè)置/刪除

elem.proName與elem.getAttribute(proName)基本一致，有個別不一致，例如input-value

let input = document.querySelector("input");
input.setAttribute("value", 3);            //行間樣式顯示3
input.value = 666;                         //頁面內(nèi)容顯示666
console.log(input.getAttribute("value"));  //3

自定義屬性

通過data-log-n = 1可以通過elem.dataset.logN獲取屬性

元素創(chuàng)建以及增刪改查

元素節(jié)點創(chuàng)建let div = document.createElement('div');文本節(jié)點創(chuàng)建let textNode = document.createTextNode('Here I am');

簡單補充一個表格的創(chuàng)建

let table = document.createElement("table"); //創(chuàng)建一個table元素節(jié)點
let tbody = document.createElement("tbody"); //創(chuàng)建一個tbody元素節(jié)點
tbody.insertRow(0); //創(chuàng)建一行
tbody.rows[0].insertCell(0); //創(chuàng)建一行第一列
tbody.rows[0].cells[0].append(document.createTextNode("(0,0)")); //補充其內(nèi)容
tbody.rows[0].insertCell(1); //創(chuàng)建一行第二列
tbody.rows[0].cells[1].append(document.createTextNode("(0,1)"));
table.append(tbody);
div.append(table);

元素增刪改查
 node.append()與node.prepend()都是在node內(nèi)部添加，一個始終往隊尾加一個往隊首加
  node.before()與node.after()，一個加在node自身節(jié)點的上面，一個加在下面
 node.replace();自身節(jié)點替換成參數(shù)節(jié)點
  還有一個node.insertAdjacentHTML(where，html)；where有4種值
 "beforebegin"與"afterbegin"在node開始位置的前或者后添加html
 "beforeend"與"afterend"在node結(jié)束位置的前或者后添加html
  elem.removeChild():刪除子節(jié)點，還存在內(nèi)存中通過變量可以讀取
  node.remove()：則徹底刪除，不再內(nèi)存中，不再能被讀取

class相關(guān)

className將class的value以字符串形式返回

classList將class的value以類數(shù)組對象返回，提供了4種方法方便對class進行增刪改查

elem.classList.add/remove("class")：增加和刪除類
  elem.classList.toggle("class"): 如果類存在，則刪除它，否則添加它
  elem.classList.contains("class"): 返回true/false，檢查給定的類

style相關(guān)

通過style獲取屬性值必須是在行間樣式中有填寫的，否則空；elem.style.borderLeftWidth="100px"通過破折號"-"變成大寫可以獲取屬性，必須帶有px

重置樣式：elem.style.borderLeftWidth=""；利用空字符串瀏覽器會應(yīng)用CSS類及其內(nèi)置樣式

完全重寫樣式：div.style.cssText="color: red !important;"或者div.setAttribute('style', 'color: red...')

一種有css關(guān)聯(lián)的樣式，而不局限與行間樣式：getComputedStyle(element[, pseudo])

       


    
        213