HTML:
<body>
<div id="girls">
<span id="xs">西施</span>
<span id="dc">貂蝉</span>
<span id="zj">昭君</span>
<span id="yh">玉环</span>
</div>
</body>
JS:
/*
* nodeName String 节点的名字
* nodeValue 节点的值
* nodeType 节点的常量值之一
* firstChild 指向在子节点列表中的第一个节点
* lastChild 指向在子节点列表中的最后一个节点
* childNodes 所有子节点的列表
* previousSibling 指向前一个兄弟节点,如果这个节点就是第一个借钱,那么该值为null
* nextSibling 指向后一个兄弟节点,如果这个节点就是最后一个节点,那么该值为null
* hasChildNodes() boolean 是否包含子节点
* appendChild(node) 将节点添加到子节点列表的末尾
* removeChild(node) 从子节点中删除node
* replaceChild(newNode,oldNode) 替换子节点
* insertBefore(newNode,refNode) 在一个子节点前插入一个新的子节点
* parentNode 父节点
*/
window.onload = function() {
//判断是否是有子节点
var girlsEl = document.getElementById("girls");
console.log(girlsEl.hasChildNodes());
//查找出所有的子节点
console.log(girlsEl.childNodes);//包括文本节点
console.log(girlsEl.children);//不包括文本节点
//打印出子节点的个数
console.log(girlsEl.childNodes.length);
//找到第一个子节点
console.log(girlsEl.firstChild);
//找到下一个节点
console.log(girlsEl.firstChild.nextSibling);
//找到最后一个节点
console.log(girlsEl.lastChild);
//找到上一个节点
console.log(girlsEl.lastChild.previousSibling);
//找到父节点
var div = girlsEl.lastChild.parentNode;
console.log(girlsEl.lastChild.parentNode);
//补充知识
console.log("---------------------------------");
//元素节点
var element = div.firstChild.nextSibling;
console.log(element.nodeName);//span
console.log(element.nodeType);//1
console.log(element.nodeValue);//null
//属性节点
var att = element.getAttributeNode("id");
console.log(att.nodeName);//id
console.log(att.nodeType);//2
console.log(att.nodeValue);//xs
//文本节点
var text = element.firstChild;
console.log(text.nodeName);//#text
console.log(text.nodeType);//3
console.log(text.nodeValue);//西施
};
