節點的三個屬性:
element.nodeName 返回元素的名稱。
element.nodeType 返回元素的節點類型。
element.nodeValue 設置或返回元素值。
JS中的DOM操作
一、節點的獲取
1、使用js提供的獲取方法直接得到
getElementById 通過id得到一個節點
getElementsByTagName 通過標籤名獲取一組節點，得到的是一個數組
getElementsByName 通過自定義的name得到節點。通常推薦前兩種方式
2.通過關係獲取
首先得到一個節點，然後通過該節點與其他節點之間的關係得到其他的節點
parentNode :得到父節點（父）
childNodes :得到所有的子節點，返回的是一個數組 （子）
nextSibling :得到下一個節點（弟）
previousSibling ：得到上一個節點（兄）
firstChild :得到第一個子節點
lastChild :得到最後一個子節點
hasChildNodes() :判斷當前節點是否有子節點
3.簡化方式
forms images all
document.all:得到所有的節點
document.images:得到所有的image節點
document.forms:得到所有的表格節點
二、元素的CRUD
createElement:創建一個元素
appendChild:添加一個子節點
removeChild：刪除一個子節點
//獲取屬性以及設置屬性
div.setAttribute("class","attrdivbg");
div.getAttribute("class");
div.removeAttribute("class");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM樹的CRUD</title>
</head>
<body>
<div id="mydiv">
<p>默認的段落</p>
</div>
<div id="attrdiv">
我的屬性的CRUD
</div>
<input type="button" value="給div添加一個p元素" onclick="addEleOne();"/><br/>
<input type="button" value="給div添加一個p元素【簡化innerHTML】" onclick="addEleTwo();"/><br/>
<input type="button" value="給div添加一個p元素【innerHTML】" onclick="addEleThree();"/><br/>
<input type="button" value="修改div中第三個p元素的文本" onclick="changeP3();"/><br/>
<input type="button" value="刪除div中最後一個p元素" onclick="removeLast();"/><br/>
<input type="button" value="給div添加一個class屬性" onclick="optionAttr();"/><br/>
<script>
// OOP的添加【推薦】
function addEleOne(){
// 創建一個元素對象:指定元素的名稱即可
var p = window.document.createElement("p");
// 創建一個文本對象:指定文本值
var text = window.document.createTextNode("新段落");
// 建立關係
p.appendChild(text);
// 獲取div元素
var div = window.document.getElementById("mydiv");
div.appendChild(p);
}
function addEleTwo(){
// 創建一個元素對象:指定元素的名稱即可
var p = window.document.createElement("p");
p.innerHTML = "新段落2";
// 獲取div元素
var div = window.document.getElementById("mydiv");
div.appendChild(p);
}
function addEleThree(){
var div = window.document.getElementById("mydiv");
div.innerHTML += "<p>我的段落3</p>";
}
// OOP的修改
function changeP3(){
var div = window.document.getElementById("mydiv");
// 獲取div下面的第三個p元素
var ps = div.getElementsByTagName("p");
var p = ps[2];
if(p){
// 有p元素
// p.firstChild.nodeValue = '被修改了';
p.innerHTML = '<font color="red">被修改了</font>';
}else{
window.alert('對不起,目前沒有第三個p元素!');
}
}
// OOP的修改
function removeLast(){
var div = window.document.getElementById("mydiv");
// 判斷div是否孩子
if(div.hasChildNodes()){
// 獲取當前所有的孩子
var chs = div.childNodes;
// 獲取最後一個孩子
var lastChild = chs[chs.length - 1];
// 斷絕關係
div.removeChild(lastChild);
}else{
window.alert('對不起,目前沒有已經沒有孩子供您刪除了....!');
}
}
// 屬性的操作：CRUD
function optionAttr(){
// 獲取div元素
var div = window.document.getElementById("attrdiv");
// 添加屬性
div.setAttribute("class","attrdivbg");
// 獲取屬性
var arrValue = div.getAttribute("class");
window.alert(typeof arrValue); // string
window.alert(arrValue); // attrdivbg
// 通過簡化方式獲取屬性: 不能直接使用class，因爲class是保留字或關鍵字，因此該屬性必須使用className進行獲取
window.alert(div.className); // attrdivbg
// Attr Map.Entry arr1 = value1
var arrt = div.getAttributeNode('class');
window.alert(typeof arrt); // object
// 獲取屬性的值請使用nodeValue
window.alert(arrt.nodeValue); // attrdivbg
// 修改屬性
div.setAttribute("class","attrdivcolor");
// 刪除屬性
div.removeAttribute("class");
}
</script>
</body>
</html>