溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹JavaScript DOM元素常見操作的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
具體如下：
DOM概念
DOM（Document Object Model）：文檔對象模型。
通過開發(fā)者工具的Elements標簽頁可以查看
通過開發(fā)者工具的Sources標簽頁也可以觀察到整個文檔是有一系列節(jié)點
整個文檔是由一系列節(jié)點對象組成的一棵樹。
節(jié)點（Node）包括元素節(jié)點（1）、屬性節(jié)點（2）、文本節(jié)點（3）(1..2..3..代表節(jié)點類型)_
var th2= document.getElementById("th2");
alert(th2.nodeType);
alert(th2.nodeName);
alert(th2.nodeValue);th2代表一個元素節(jié)點（nodeType=1），nodeName就是標簽名（th），元素節(jié)點的nodeValue=null。
var attr1=th2.getAttributeNode("name");
alert(attr1.nodeType);
alert(attr1.nodeName);
alert(attr1.nodeValue);getAttributeNode方法是獲取元素的屬性節(jié)點，此時輸出的節(jié)點類型為屬性節(jié)點（2），節(jié)點名稱就是屬性名（name），節(jié)點值就是屬性值（sex）
var txtl = th2.firstChild； alert(txtl.nodeType); alert(txtl.nodeName); alert(txtl.nodeValue)
txt1是一個文本節(jié)點（3），節(jié)點名稱固定就是#text，節(jié)點值就是文本內(nèi)容。
獲取元素
（1）getElementByid
根據(jù)元素的id屬性來獲取元素，獲取到的是一個元素。
（2）getElementsByTagName
根據(jù)標簽名來獲取元素，結果是一個元素集合。
（3）getElementsByClassName
根據(jù)class屬性來獲取元素，結果是一個元素集合。
（4）getElementsByName
根據(jù)name屬性來獲取元素，結果是一個元素集合。
總結：獲取元素可以根據(jù)標簽名獲取、也可以根據(jù)id、name、class屬性來獲取。根據(jù)id屬性獲取的結果是一個元素，而其它的獲取的是一個集合。
document對象支持以上四種，而element對象僅支持getElementsByTagName和getElementsByClassName。
修改元素
（1）修改內(nèi)容
function fun(){
//獲取到指定元素
var p1 = document.getElementById("p1");
p1.innerText = "我被單擊了！";
}通過.innerText屬性可讀取或設置標簽的內(nèi)容文本
function fun(){
//獲取到指定元素
var p1 = document.getElementById("p1");
p1.innerHTML = "我被單擊了！<br>換行了";
}也可以通過innerHTML屬性獲取或設置內(nèi)容文本
倆者的區(qū)別：innerHTML會按照HTML規(guī)則解析文本，而innerText只是當做普通文本內(nèi)容。
（1） 修改樣式
A．xxx．style.屬性名=“值”
B．xxx．classname=“…”(相當于修改了class的屬性)
<style>
.style1{
color:red;
font-size:20px;
text-decoration:underline;
}
.style2{
color:blue;
font-size:32px;
text-decoration:line-through;
}
</style>
</head>
<body>
<p id="p1">修改樣式測試</p>
<input type="button"value="樣式一"onclick="style1()">
<input type="button"value="樣式二"onclick="style2()">
</body>
<script>
var p1 = document.getElementById("p1");
function style1(){
p1.className = "style1"
}
function style2(){
p1.className = "style2"
}
</script>
</html>添加刪除元素
（1）CreateElement建一個元素節(jié)點
CreateElement("p")創(chuàng)建一個段落
（2）createTextNode創(chuàng)建一個文本節(jié)點
createTextNode("文本內(nèi)容")，創(chuàng)建一個值為“文本內(nèi)容”的文本節(jié)點.
（3）appendChild添加子節(jié)點
（4）removeChild 刪除子節(jié)點
動態(tài)添加
<body>
<div id="div1">
</div>
<input type="button"value="添加段落"onclick="add()">
</body>
<script>
//全局變量
var index = 1;
function add(){
//創(chuàng)建一個段落標簽
var p = document.createElement("p");
//創(chuàng)建文本節(jié)點
var content= "第"+index+"段落";
var txt = document.createTextNode(content);
//創(chuàng)建文本節(jié)點添加的段落
p.appendChild(txt);
//將段落添加到div中
var div1 = document.getElementById("div1");
div1.appendChild(p);
index++
}
</script>動態(tài)刪除
<body>
<div id="div1">
<p id="p1">第1段落 </p>
<p id="p2">第2段落 </p>
<p id="p3">第3段落 </p>
<p id="p4">第4段落 </p>
</div>
<input type="button"value="刪除第二段"onclick="del()">
</body>
<script>
function del(){
//先找到父節(jié)點
var div1 = document.getElementById("div1");
//再找到要刪除的節(jié)點
var p2 = document.getElementById("p2");
//將要刪除的節(jié)點從父節(jié)點中移除
div1.removeChild(p2);
}
</script>
</html>這種方法是分別找到父節(jié)點和要刪除的節(jié)點，然后執(zhí)行刪除操作。該方法的一個前提是知道父節(jié)點是誰
那么如果并不知道父節(jié)點是誰，該如何刪除呢
p2.parentNode.removeChild(p2);
這個方法并不需要父節(jié)點是誰
動態(tài)的添加和刪除：
動態(tài)添加和動態(tài)刪除，刪除動態(tài)添加的奇數(shù)段落
思路1：獲取div1 下的所以段落，遍歷所以的段落，將序號為奇數(shù)的段落刪除。
function del(){
var div1 = document.getElementById("div1");
var paras = div1.getElementsByTagName("p");
for(var i in paras){
if((i+1)%2 == 1){
div1.removeChild(paras[i]);
}
}
}這種在初始時是可以的,但是隨著動態(tài)添加或刪除的進行，后面的結果就不對了。因為動態(tài)刪除操作就影響了原來的順序，而程序是按照序號去判斷奇偶性，所以出現(xiàn)誤判
思路2：添加通過設置class屬性，然后通過getElementsByclassName來獲取奇數(shù)行
（也可以從后往前刪）
<body>
<div id="div1">
</div>
<input type="button" value="添加段落" onclick="add()">
<input type="button" value="刪除奇數(shù)第二段" onclick="de1()">
</body>
<script>
var index = 1;
function add(){
//創(chuàng)建一個段落標簽
var p = document.createElement("p");
//創(chuàng)建文本節(jié)點
var content = "第" + index + "段落";
var txt = document.createTextNode(content);
//將文本節(jié)點添加到段落
p.appendChild(txt);
if (index % 2 == 1) {
p.setAttribute("class","odd");
}
//將段落添加到div中
var div1 = document.getElementById("div1");
div1.appendChild(p);
index++;
}
/*function de1(){
var div1 = document.getElementById("div1");
var paras =div1.getElementsByTagName("p");
for(var i in paras){
if((i+1)%2 == 1){
div1.removeChild(paras[i]);
}
}
}*/
functionde1() {
var div1 = document.getElementById("div1");
var paras = div1.getElementsByClassName("odd");
// varparas = document.getElementsByName("odd");
for (var i = paras.length - 1; i >= 0; i--) {
div1.removeChild(paras[i]);
}
}
</script>
</html>導航
Document：是根節(jié)點
ParentNode：獲取父節(jié)點
childNodes：獲取所有子節(jié)點
firstChild：第一個子節(jié)點
lastChlid：獲取最后一個子節(jié)點
</head>
<body>
<div name="第一章">
<p id="p1">第一段<span>第一句</span><span>第二句</span></p>
</div>
<input type="button"value="獲取父節(jié)點的name屬性"onclick="fun1()">
<input type="button"value="顯示p1子節(jié)點的個數(shù)"onclick="fun2()">
<input type="button"value="顯示p1第一個子節(jié)點的類型"onclick="fun3()">
<input type="button"value="顯示p1最后一個子節(jié)點的類型"onclick="fun4()">
</body>
<script>
var p1 =document.getElementById("p1");
function fun1(){
var value=p1.parentNode.getAttribute("name");
alert(value);
}
function fun2(){
var chlids = p1.childNodes;
alert(chlids.length)
}
function fun3(){
alert(p1.firstChild.nodeType);
}
function fun4(){
alert(p1.lastChild.nodeType);
}
</script>
</html>以上是“JavaScript DOM元素常見操作的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
