如何在javascript中實(shí)現(xiàn)一個(gè)Dom操作？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯(lián)建站專業(yè)提供成都主機(jī)托管四川主機(jī)托管成都服務(wù)器托管四川服務(wù)器托管，支持按月付款！我們的承諾：貴族品質(zhì)、平民價(jià)格，機(jī)房位于中國電信/網(wǎng)通/移動(dòng)機(jī)房，成都西信服務(wù)器托管服務(wù)有保障！

結(jié)點(diǎn)類型

1.元素結(jié)點(diǎn)
2.屬性結(jié)點(diǎn)
3.文本結(jié)點(diǎn)

結(jié)點(diǎn)的注意點(diǎn)：

1.文本節(jié)點(diǎn)和屬性結(jié)點(diǎn)都看作元素結(jié)點(diǎn)的子結(jié)點(diǎn)
2.我們一般所說的結(jié)點(diǎn)指的就是元素結(jié)點(diǎn)，將html標(biāo)簽看作是一個(gè)對(duì)象，并用“結(jié)點(diǎn)”稱呼它
3.結(jié)點(diǎn)的關(guān)系有：父子關(guān)系、兄弟關(guān)系

1.獲取元素結(jié)點(diǎn)

1)直接獲取

① document.getElementById()
② document.getElementsByName()
③ document.getElementsByTagName()

2)間接獲取

父子關(guān)系
firstChild lastChild childNodes

子父關(guān)系
parentNode

兄弟關(guān)系
nextSibling previousSibling

2.操作屬性結(jié)點(diǎn)

1)通過對(duì)象“.”屬性，來操作屬性
優(yōu)：可以動(dòng)態(tài)獲取用戶修改的屬性值
缺：不能獲取自定義屬性的值

2)getAttribute("key") setAttribute("key","value") removeAttribute("key")
優(yōu)：可以獲取自定義屬性的值
缺：不能動(dòng)態(tài)獲取用戶修改的屬性值

3.處理文本結(jié)點(diǎn)

1) 通過對(duì)象.innerText 獲取標(biāo)簽內(nèi)部的文本信息

2) 通過對(duì)象.innerHTML 獲取標(biāo)簽內(nèi)部的HTML代碼

4.動(dòng)態(tài)改變DOM結(jié)構(gòu)

1)創(chuàng)建一個(gè)結(jié)點(diǎn)對(duì)象
document.createElement("標(biāo)簽名")

2)（父結(jié)點(diǎn)）追加子結(jié)點(diǎn)對(duì)象
fatherNode.appendChild(子結(jié)點(diǎn)對(duì)象)

3)（父結(jié)點(diǎn)）在指定結(jié)點(diǎn)前添加子結(jié)點(diǎn)
fatherNode.insertBefore(新結(jié)點(diǎn)對(duì)象，參考結(jié)點(diǎn)對(duì)象)

4)（父結(jié)點(diǎn)）替換舊的子結(jié)點(diǎn)對(duì)象
fatherNode.replaceChild(新結(jié)點(diǎn)對(duì)象，舊結(jié)點(diǎn)對(duì)象)

5)（父結(jié)點(diǎn)）刪除舊子結(jié)點(diǎn)對(duì)象
fahterNode.removeChild(舊結(jié)點(diǎn)對(duì)象)

5.動(dòng)態(tài)改變?cè)氐腃SS樣式（不重要）

1)我們通過對(duì)象.style屬性操作對(duì)象的css樣式：樣式名稱中有“-”將“-”去掉，并將“-”后一個(gè)字母改為大寫來作為樣式的新名稱

2)我們希望通過class為一個(gè)對(duì)象添加一個(gè)class樣式，添加屬性名是className，而并非class（class是js的關(guān)鍵字，并能作為屬性名存在）

//1.獲取元素結(jié)點(diǎn)
//1)直接獲取
// ① document.getElementById()
function getEle1(){
var obj=document.getElementById("userid")
console.log(obj)
}
// ② document.getElementsByName()
function getEle2() {
// 獲取的是一個(gè)數(shù)組
var obj = document.getElementsByName("fav");
console.log(obj)
}
// ③ document.getElementsByTagName()
function getEle3(){
var obj = document.getElementsByTagName("input");
console.log(obj);
}
function getEle4(){
var father = document.getElementById("regForm");
var sons = father.childNodes;
// 獲取指定位置
console.log(sons[1]);
// firstChild 獲取第一個(gè)
console.log(father.firstChild);
// lastChild 獲取最后一個(gè)
console.log(father.lastChild);
}
// 子父關(guān)系 parentNode
function getEle5(){
var son = document.getElementById("userid");
console.log(son.parentNode)
}
// 兄弟關(guān)系 nextSibling 下一個(gè)對(duì)象 
//previousSibling當(dāng)前結(jié)點(diǎn)的前一個(gè)結(jié)點(diǎn)返回緊鄰當(dāng)前元素之前的元素
function getEle6(){
var bro = document.getElementById("userid");
console.log(bro.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling);
bro.previousSibling
}
function getField1(){
var obj = document.getElementById("nickid");
//console.log(obj.type);
//將昵稱的樣式改為password
//obj.type = "password";
var objval = obj.getAttribute("name");
console.log(objval);
obj.setAttribute("abcd","5678");
obj.removeAttribute("type");
// 可以獲取改變后的屬性
console.log(obj.value)
// 只能獲取初始定義的屬性
console.log(obj.getAttribute("value"));
}
// 1) 通過對(duì)象.innerText 獲取標(biāo)簽內(nèi)部的文本信息
function getText1(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv.innerText);
}
// 2) 通過對(duì)象.innerHTML 獲取標(biāo)簽內(nèi)部的HTML代碼
function getText2(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv.innerHTML);
}
// 添加文本
function getText3(){
var myDiv = document.getElementById("myDiv");
myDiv.innerText = "";
}
// 添加代碼
function getText4(){
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "";
}



點(diǎn)我測試1
點(diǎn)我測試2
點(diǎn)我測試3
點(diǎn)我測試4
點(diǎn)我測試5
點(diǎn)我測試6

屬性測試1

文本測試1
文本測試2
文本測試3
文本測試4


用戶名：

密碼：

昵稱：

性別：男  
女

愛好：狗
貓
羊駝



hello