DOM节点关系

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<div id="div1">

<p id="p1">p1 is the firstchild of div1</p>

<p id="p2">p2 is the firstchild of div1</p>

</div>

<div id="div2">

hello div2

</div>

<h1>hello js h1</h1>

<p>hello js p</p>

<input type="button" name="btn" id="btn" value="click" />

<script type="text/JavaScript">

/*节点关系--dom节点的属性（用于遍历DOM节点，找对应的DOM节点）

childNodes ：所有子节点（含空格，回车，tab等空白符）

children ： 所有元素子节点（不含文本节点）

parentNode ：父节点

firstChild ：第一个节点（含空格，回车，tab等空白符）

lastChild ： 最后一个子节点

nextSibling ： 下一个兄弟节点

previousSibling ： 上一个兄弟节点

 

firstElementChild ：第一个元素子节点

lastElementChild ： 最后一个元素子节点

nextElementSibling ： 下一个元素兄弟节点

previousElementSibling ：上一个元素兄弟节点

*/

var oDiv = document.getElementById("div1");

var oBtn = document.getElementById("btn");

var Op1 = document.getElementById("p1");

oBtn.onclick = function(){

// oDiv.children[0].innerHTML = "haha";

// oDiv.firstElementChild.innerHTML = "haha";

// oDiv.childNodes[1].innerHTML = "haha";

var p1 = oDiv.firstElementChild;

// p1.nextElementSibling.innerHTML = "change";

// 用nodeValue属性，修改p1字段的值

// p1.firstChild.nodeValue = "haha";

p1.childNodes[0].nodeValue = "p1 value";

oDiv.children[0].style.backgroundColor = "palegreen";

// oDiv.children[1].innerHTML = "哈哈";

}

 

console.log(p1.parentNode.nodeName);

 

console.log(oDiv.childNodes.length);

console.log(oDiv.children.length);

</script>

</body>

</html>

posted @ 2017-01-11 14:53  天涯海角路  阅读(75)  评论(0)    收藏  举报