节点的三个属性:
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>