DOM节点操作
阅读 (408)一、获取标签(元素)节点
- 界面准备
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取标签(元素)节点</title>
</head>
<body>
<div id="idDiv"></div>
<div class="classDiv"></div>
<div class="classDiv"></div>
<div class="classDiv"></div>
<div class="classDiv"></div>
<input type="text" name="inputText">
<input type="text" name="inputText">
<input type="text" name="inputText">
<ul id="list">
<li id="l1" class="test">javascript</li>
<li id="l2">javascript</li>
<li id="l3" class="test">javascript</li>
<li id="l4">javascript</li>
<li>javascript</li>
</ul>
</body>
</html>
-
getElementById()
根据元素id获取元素节点
var jsDiv = document.getElementById("idDiv"); console.log(jsDiv); console.log(typeof jsDiv);
-
getElementsByClassName()
获取相同class属性的元素节点列表,此方法不支持IE8以下
var jsDivs = document.getElementsByClassName("classDiv"); for (var i = 0; i < jsDivs.length; i++) { console.log(jsDivs[i]); }
-
getElementsByTagName()
根据标签名来获取元素节点的集合
var jsDivs = document.getElementsByTagName("div"); for (var i = 0; i < jsDivs.length; i++) { console.log(jsDivs[i]); }
-
getElementsByName()
根据name属性值来获取元素节点的集合
var jsDivs = document.getElementsByName("inputText"); for (var i = 0; i < jsDivs.length; i++) { console.log(jsDivs[i]); }
-
querySelector()
css选择符模式,返回与该模式匹配的第一个元素,结果为一个元素;如果没找到匹配的元素,则返回null
var jsLi = document.querySelector("#list li:nth-child(3)"); console.log(jsLi);
-
querySelectorAll()
css选择符模式,返回与该模式匹配的所有元素,结果为一个类数组
var jsLis = document.querySelectorAll(".test") for (var i = 0; i < jsLis.length; i++) { console.log(jsLis[i]); }
二、获取属性节点
页面准备
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取属性节点</title>
</head>
<body>
<input type="text" id="in" placeholder="请留下你的大名!" my="我的">
</body>
</html>
-
官方定义的属性
-
获取属性值
格式:
元素节点.属性名;
var jsInput = document.getElementById("in"); console.log(jsInput); var typeNode = jsInput.type; console.log(typeNode); var placeholderNode = jsInput.placeholder; console.log(placeholderNode);
-
修改属性值
格式:
元素节点.属性名 = 新的属性值;
jsInput.placeholder = "换新";
-
-
自定义属性
-
获取属性值
格式:
元素节点.getAttribute("属性名");
var myNode = jsInput.getAttribute(“my”);
console.log(myNode);- 修改属性值 格式:`元素节点.setAttribute("属性名", "新的属性值");` ```js jsInput.setAttribute("my", "sunck"); console.log(jsInput); ``` - 移除元素节点中的某个属性节点(某些低版本浏览器不支持) 格式:`元素节点.removeAttribute("属性名");` ```js jsInput.removeAttribute("my"); console.log(jsInput);
- 注意:该方法不仅可以获取自定义属性,也可以处理官方定义的属性
-
三、获取文本节点
准备页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取文本节点</title>
</head>
<body>
<div id="box">
我是个盒子
</div>
<script type="text/javascript">
var jsDiv = document.getElementById("box");
</script>
</body>
</html>
获取:
-
元素节点.innerHTML
从对象的开始标签到结束标签的全部内容,不包括本身Html标签
var inner = jsDiv.innerHTML; console.log(inner); console.log(typeof inner);
-
元素节点.outerHTML
除了包含innerHTML的全部内容外,还包含对象标签本身
var outer = jsDiv.outerHTML; console.log(outer); console.log(typeof outer);
-
元素节点.innerText
从对象的开始标签到结束标签的全部的文本内容
var text = jsDiv.innerText; console.log(text); console.log(typeof text);
修改:
jsDiv.innerHTML = "<p>我才是</p>";
console.log(jsDiv);
四、节点的常用属性
准备界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>节点的常用属性</title>
<style type="text/css">
#box1{
width: 200px;height: 200px;background-color: red;
}
#box2{
width: 200px;height: 200px;background-color: green;
}
#box3{
width: 200px;height: 200px;background-color: yellow;
}
</style>
</head>
<body>
<div id="box1">
<p>我是第一个P</p>
<p>我是第二个P</p>
<p>我是第三个P</p>
<p>我是第四个P</p>
</div>
<div id="box2"></div>
<div id="box3"></div>
<input id="put" type="text" name="in" placeholder="sunck is a good man">
</body>
</html>
- 节点共有的属性
var jsDiv1 = document.getElementById("box1");
console.log(jsDiv1);
console.log(jsDiv1.nodeName);
console.log(jsDiv1.nodeType);
console.log(jsDiv1.nodeValue);
-
节点层次关系属性
-
获取当前元素节点的所有的子节点
var childNodesArray = jsDiv1.childNodes; console.log(childNodesArray);
-
获取当前元素节点的第一个子节点
var firstChildNode = jsDiv1.firstChild; console.log(firstChildNode);
-
获取当前节点的最后一个子节点
var lastChildNode = jsDiv1.lastChild; console.log(lastChildNode);
-
获取该节点的文档的根节点,相当于document
var rootNode = jsDiv1.ownerDocument; console.log(rootNode);
-
获取当前节点的父节点
var parentNode = jsDiv1.parentNode; console.log(parentNode);
-
获取当前节点的前一个同级节点
var jsDiv2 = document.getElementById("box2"); var previousNode = jsDiv2.previousSibling; console.log(previousNode);
-
获取当前节点的后一个同级节点
var nextNode = jsDiv2.nextSibling; console.log(nextNode);
-
获取当前节点的所有的属性节点
var jsInput = document.getElementById("put"); var allAttributesArray = jsInput.attributes; console.log(allAttributesArray);
-
五、节点的动态操作
页面准备
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM节点动态操作</title>
<style type="text/css">
#box{
width: 300px;height: 300px;background-color: yellow}
#box1{
width: 100px;height: 100px;background-color: red}
#box2{
width: 50px;height: 50px;background-color: blue}
</style>
</head>
<body>
<div id="box">
<p>1</p>
<p>2</p>
</div>
</body>
</html>
-
创建元素节点
var jsDiv1 = document.createElement("div"); jsDiv1.id = "box1"; console.log(jsDiv1);
-
将新节点添加到父节点的子节点列表的末尾上
格式:
父节点.appendChild(子节点);
document.body.appendChild(jsDiv1);
-
将新节点添加到父节点的某个子节点的前面
格式:
父节点.insertBefore(新节点, 子节点)
var jsP = document.createElement("p"); jsP.innerHTML = "关注我"; var jsD = document.getElementById("box"); jsD.insertBefore(jsP, jsD.childNodes[3]); console.log(jsD);
-
创建文本节点
var jsStr = document.createTextNode("什么"); console.log(jsStr)
-
添加文本节点
var js2P = jsD.childNodes[1]; js2P.appendChild(jsStr);
-
替换节点
格式:
父节点.replaceChild(新节点, 子节点);
说明:将父节点中的某个子节点替换成新节点
var jsDiv2 = document.createElement("div"); jsDiv2.id = "box2"; jsDiv1.parentNode.replaceChild(jsDiv2, jsDiv1);
-
复制节点
//只复制本身 var jsD1 = jsD.cloneNode(); console.log(jsD1); //复制本身和子节点 var jsD2 = jsD.cloneNode(true); console.log(jsD2);
-
删除节点
格式:
父节点.removeChild(子节点);
说明:删除父节点下的对应子节点
jsDiv2.parentNode.removeChild(jsDiv2);
-
参照物父元素(offsetParent)
- 当某个元素的父元素或以上元素都未进行CSS定位时,则返回body元素,也就是说元素的偏移量(offsetTop、offsetLeft)等属性是以body为参照物的
- 当某个元素的父元素进行了CSS定位时(absolute或者relative),则返回父元素,也就是说元素的偏移量是以父元素为参照物的
- 当某个元素及其父元素都进行CSS定位时,则返回距离最近的使用了CSS定位的元素
var temp = jsD.childNodes[1].offsetParent; console.log(temp);