摘要：屬性元素由一個(gè)標(biāo)簽和一組稱為屬性的名值對(duì)組成。刪除和替換節(jié)點(diǎn)方法重文檔樹中刪除一個(gè)節(jié)點(diǎn)。將會(huì)刪除節(jié)點(diǎn)的子節(jié)點(diǎn)的節(jié)點(diǎn)方法刪除一個(gè)子節(jié)點(diǎn)并用一個(gè)新的節(jié)點(diǎn)取而代之，在父節(jié)點(diǎn)上調(diào)用該方法。

html元素由一個(gè)標(biāo)簽和一組稱為屬性的名/值對(duì)組成。

表示HTML文檔元素的HTMLElement對(duì)象定義了讀/寫屬性。映射了元素的HTML屬性。HTMLElement定義了通用的HTTP屬性。以及事件處理程序的屬性。特定的Element子類型為其元素定義了特定的屬性。
舉個(gè)栗子

js如下

var image = document.getElementById("myimage"); // 獲取id為myimage的元素
var imagurl = image.src     // 獲取該元素的imagurl

控制臺(tái)輸入如下

imagurl
"http://1.198.105.7/image/1.png"

成功獲取了img元素的src地址
下面為一個(gè)form元素設(shè)置表單屬性

var f = document.forms[0];    // 獲取第一個(gè)form元素
f.action = "./submit/"  // 設(shè)置提交地址
f.method = "POST";  // 設(shè)置提交方式為post提交

設(shè)置完成，提交表單

http://1.198.105.7/submit/

鏈接跳轉(zhuǎn)到上方地址，接著查看瀏覽器，查看提交的post數(shù)據(jù)即可查到提交的post數(shù)據(jù)

ps 不能在頭部引入，會(huì)出現(xiàn)找不到DOM節(jié)點(diǎn)的情況，請(qǐng)?jiān)谖哪┮?/pre>
獲取和設(shè)置非標(biāo)準(zhǔn)的HTML屬性
現(xiàn)在說(shuō)的是一個(gè)html的屬性，即HTMLElemnent對(duì)象定義的html的一些屬性
Element.getAttribute()
該屬性的獲取傳入屬性的屬性值。
將會(huì)返回一個(gè)字符串
image.getAttribute("src")
"./image/1.png"
數(shù)據(jù)集屬性
可以在元素上添加屬性，然后能通過(guò)js讀取其數(shù)據(jù)
h5在Elemnent對(duì)象上定義了dataset屬性，該屬性指代一個(gè)對(duì)象，它的各個(gè)屬性對(duì)于去掉前綴的data-屬性，因此dataset.x的應(yīng)該保存為data-x屬性的值，如果后方有字符串，將會(huì)按照駝峰命名法命名data-jquery-test將會(huì)辦成dataset。jqueryTest
下面生成一個(gè)火花線
html如下所示

    1 1 1 2 2 3 4 5 5 4 3 5 4 3 5 3 6 2 4 5 2 4

var sparkLines = document.getElementsByClassName("sparkLine");
for (var i = 0; i < sparkLines.length; i++) {
    var dataset = sparkLines[i].dataset;    // 將自定義的屬性保存在dataset中
    var ymin = parseFloat(dataset.ymin);    // 將ymin字符轉(zhuǎn)換為浮點(diǎn)數(shù)進(jìn)行存儲(chǔ)
    var ymax = parseFloat(dataset.ymax);    // 同理獲取最大值
    var data = sparkLines[i].textContent.split(" ").map(parseFloat);    // 獲取節(jié)點(diǎn)的內(nèi)容，依照空格進(jìn)行分割，并將值依次轉(zhuǎn)換為數(shù)值
    console.log(data);
}
可以看到控制臺(tái)已經(jīng)輸出一個(gè)數(shù)組了。
作為attr節(jié)點(diǎn)的屬性
一種使用Element的屬性的方法。Node類型定義了attributes屬性。針對(duì)非Element對(duì)象任何節(jié)點(diǎn)。該屬性為null。
獲取屬性的
舉例子
document.body.attributes[0];    // 獲取第一個(gè)body的第一個(gè)屬性
document.body.attributes.bgcolor;   // 獲取bgcolor屬性
document.body.attributes["NOLOAD"]  // 獲取元素的onload屬性 因?yàn)闀?huì)自動(dòng)轉(zhuǎn)為大寫故因此。
元素的內(nèi)容
作為HTML的元素內(nèi)容
以標(biāo)簽作為分隔
This is the element content!
beforebegin     afterbegin              beforeend   afterend
獲取內(nèi)容，上方的是插入元素的內(nèi)容
nodeList[0].innerHTML
以及
nodeList[0].textContent
該兩個(gè)方法相同
使用innerHTML可以獲取元素的內(nèi)容
同樣也可以使用這個(gè)方法進(jìn)行更改
nodeList[0].innerHTML = "hello word"
將會(huì)把頁(yè)面內(nèi)容更改為hello word
script元素中的文本
內(nèi)聯(lián)的script元素，有一個(gè)text屬性能來(lái)獲取它們的文本，該文本存在于樹中，但是并不會(huì)將其顯示出來(lái)
作為text節(jié)點(diǎn)的元素內(nèi)容
另一中方法處理元素的內(nèi)容是當(dāng)做一個(gè)子節(jié)點(diǎn)列表。每個(gè)子節(jié)點(diǎn)可能有它自己的一組子節(jié)點(diǎn)。
假設(shè)html如下
hello word
nodeList[0].innerHTML
"hello word"
nodeList[0].textContent;
"hello word"
上方代碼很明顯的看到innerHTML會(huì)返回其中的HTML代碼，包括標(biāo)簽
但是textContent不會(huì)，會(huì)把所有的內(nèi)容統(tǒng)統(tǒng)返回
插入元素內(nèi)容
有兩個(gè)定義好的api分別是element.insertAdjacentHTML 以及 Element.insertAdjacentText()
這兩個(gè)元素內(nèi)容
element.insertAdjacentHTML()
這個(gè)會(huì)將文本解析為html或者xml，并且將結(jié)果插入指定的DOM樹的位置。因?yàn)樗粫?huì)重新解析正在使用的元素，因此它不會(huì)破壞元素內(nèi)的現(xiàn)有元素。將會(huì)避免額外的序列化步驟，比直接innerHTML將會(huì)快很多。
document.getElementById("myimage").insertAdjacentHTML("beforebegin", html)
完成了一次在前方的插入一個(gè)div的節(jié)點(diǎn)。
此節(jié)點(diǎn)插入的html會(huì)被html解析器進(jìn)行解析，如果用戶插入請(qǐng)務(wù)必進(jìn)行轉(zhuǎn)義，防止小白攻擊法
Element.insertAdjacentText()
這個(gè)僅僅是插入文本，建議一般使用這個(gè)，將不會(huì)產(chǎn)生dom樹的解析
var h = document.getElementById("myH2");
h.insertAdjacentText("afterend", "My inserted text");
這樣就完成了，一次dom節(jié)點(diǎn)的更新
即使插入
h.insertAdjacentText("afterend", "
")
也不會(huì)被dom解析
創(chuàng)建，插入和刪除節(jié)點(diǎn)
創(chuàng)建節(jié)點(diǎn)
創(chuàng)建一個(gè)text節(jié)點(diǎn)
var newnode = document.createTextNode("hello word")
查看其內(nèi)容
#text "hello word"
繼續(xù)，創(chuàng)建一個(gè)正常的元素
var newnode = document.createElement("script")
將其插入id為myimage的元素后邊
myimage.appendChild(newnode)
插入節(jié)點(diǎn)
一旦有了一個(gè)新節(jié)點(diǎn)可以使用Node方法的appendChild或者insertBefore()將其完成插入。
https://developer.mozilla.org...
https://developer.mozilla.org...
如果調(diào)用插入的方法將文檔中的一個(gè)節(jié)點(diǎn)再次插入，那個(gè)節(jié)點(diǎn)將會(huì)自動(dòng)從它當(dāng)前的位置刪除并在新的位置重新插入，沒(méi)有必要顯式的刪除節(jié)點(diǎn)，因?yàn)楣?jié)點(diǎn)已經(jīng)自動(dòng)隱式刪除了。
刪除和替換節(jié)點(diǎn)
removeChild()方法重文檔樹中刪除一個(gè)節(jié)點(diǎn)。該方法不在待刪除的節(jié)點(diǎn)上調(diào)用，而是在其父節(jié)點(diǎn)上調(diào)用（和名字暗示那樣的child）然后將其子節(jié)點(diǎn)刪除。
n.parentNode.removeChild(n)
將會(huì)刪除n節(jié)點(diǎn)的子節(jié)點(diǎn)的n節(jié)點(diǎn)
replaceChild()方法刪除一個(gè)子節(jié)點(diǎn)并用一個(gè)新的節(jié)點(diǎn)取而代之，在父節(jié)點(diǎn)上調(diào)用該方法。用一個(gè)文本字符串來(lái)替換節(jié)點(diǎn)n
n.parentNode.replaceChild(document.createTextNode("[ REDACTED ]"), n);
一個(gè)栗子
// 用一個(gè)新的元素替換n節(jié)點(diǎn)，并使n成為該元素的子節(jié)點(diǎn)
function embolden(n) {
    // 根據(jù)參數(shù)為字符串而不是節(jié)點(diǎn)，將其當(dāng)做元素的id,進(jìn)行查詢得到節(jié)點(diǎn),如果傳入的是節(jié)點(diǎn)，直接進(jìn)行下一步
    if (typeof n == "string") n = document.getElementById(n);
    var parent = n.parentNode;    // 獲得n的父節(jié)點(diǎn)
    var b = document.createElement("b");    // 創(chuàng)建一個(gè)元素
    parent.replaceChild(b, n);    // 進(jìn)行替換操作
    b.appendChild(n);    // 使得n成為父節(jié)點(diǎn)的子節(jié)點(diǎn)
};

通過(guò)api完成子節(jié)點(diǎn)的替換，使用方法，調(diào)用一個(gè)removeChild以及parentNode完成一次調(diào)用
一個(gè)虛擬節(jié)點(diǎn)
var p = document.createElement("p");
undefined
p;

container.appendChild(p);

container

a;

a.appendChild(container)

p;

p.textContent = "hello word!"
"hello word!"
好啦，頁(yè)面成功更新，使用虛擬節(jié)點(diǎn)拼接完成一個(gè)比較完成的樹，在將其拼接到body的子節(jié)點(diǎn)中，徹底的完成節(jié)點(diǎn)操作
DocumentFragment
DocumentFragment 為一種特殊的Node，其作為其他節(jié)點(diǎn)的一個(gè)臨時(shí)容器。
它的特殊之處在于它能使得一組節(jié)點(diǎn)被當(dāng)做一個(gè)節(jié)點(diǎn)看待。
舉栗子
倒序排列節(jié)點(diǎn)n的子節(jié)點(diǎn)
// 倒序排列節(jié)點(diǎn)n的子節(jié)點(diǎn)
function reverse(n) {
    // 創(chuàng)建一個(gè)DocumentFragment 座位臨時(shí)容器
    var f = document.createDocumentFragment();
    // 從后到前循環(huán)子節(jié)點(diǎn)，使得每一個(gè)子節(jié)點(diǎn)移動(dòng)到臨時(shí)容器中
    // n的最后一個(gè)節(jié)點(diǎn)變成f的第一個(gè)節(jié)點(diǎn)
    // 每次給f添加一個(gè)節(jié)點(diǎn)該節(jié)點(diǎn)會(huì)自動(dòng)從n中刪除
    while(n.lastChild) f.appendChild(n.lastChild);    // 添加子節(jié)點(diǎn)


    // 最后，把f的所有子節(jié)點(diǎn)一次性全部移回n中
    n.appendChild(f);
};
insertAdjacentHTML() 將指定的文本解析為HTML或XML，并將結(jié)果節(jié)點(diǎn)插入到DOM樹中的指定位置。