dom基础5
程序员文章站
2022-03-14 22:55:16
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<div id="parentDiv">
父div内容
<div id="d1">第一个div</div><div id="d2">第二个div</div>
<div id="d3">第三个div</div>
</div>
<button onclick="showParent()">递归父节点</button>
<script>
var node = null;
function showParent(){
if(null==node){
node = document.getElementById("parentDiv");
}
if(document == node){
alert("已是根节点，document");
}else{
alert(node.parentNode);
node = node.parentNode;
}
}
</script>
<!--获取兄弟节点-->
<script>
function showPre(){
var d2 = document.getElementById("d2");
alert(d2.previousSibling.innerHTML);//第一个div
}
function showNext(){
var d2 = document.getElementById("d2");
alert(d2.nextSibling.nodeName);//#text，div2和div3之间有空格换行
}
</script>
<br>
<button onclick="showPre()">获取前一个同胞</button>
<button onclick="showNext()">获取后一个同胞</button>
<br>
<!--子节点-->
<!--注：childNodes会包含文本节点，而，children会排出文本节点-->
<script type="text/javascript">
var div = document.getElementById("parentDiv");
function getFirst(){
alert(div.firstChild.nodeName);//#text
}
function getLast(){
alert(div.lastChild.nodeName);//#text
}
function showAll(){
alert(div.childNodes.length);//6
}
function show(){
var ds = div.childNodes;
var s = ds[0]+"<br>";
for(var i = 1; i<ds.length; i++){
s += ds[i]+"<br>"
}
document.getElementById("message").innerHTML = s;
}
</script>
<br>
<button onclick="getFirst()">获取第一个子</button>
<button onclick="getLast()">获取最后一个子</button>
<button onclick="showAll()">获取子的长度</button>
<br>
<button onclick="show()">打印所有节点</button>
<div id="message">打印出所有节点</div>
<br>
</body>
</html>
上一篇： php row()函数介绍与使用方法详解