一、查看元素节点
节点类型:元素节点、属性节点、文本节点
节点关系:父子关系、同级关系
DOM接口:
Core DOM(核心DOM),适用于各种结构化文档;
XML DOM,专用于XML文档;
HTML DOM,专用于HTML文档;
二、元素节点
var oDiv = document.getElementsByTagName("div")[0];
console.log(oDiv.nodeName); //节点名称 DIV
console.log(oDiv.tagName); //标签名称 DIV
console.log(oDiv.nodeType); //1 节点类型
console.log(oDiv.nodeValue); //null 节点值
三、属性节点
var attr = oDiv.getAttributeNode("id");
console.log(attr); //id="box"
alert(attr); //[object Attr]属性对象
console.log(attr.nodeName); //节点名称 属性名 id
console.log(attr.nodeType); //节点类型 属性名 2
console.log(attr.nodeValue); //节点值 属性值 box
// get获取、Attribute属性、Node节点
四、文本节点
var ch = oDiv.firstChild; //第一个子节点
console.log(ch); //"hello box"
alert(ch); //[object Text] 文本对象节点
console.log(ch.nodeName); //节点名称 文本 #text
console.log(ch.nodeType); //节点类型 3
console.log(ch.nodeValue); //节点值 文本值 hello box
五、 父节点查找子节点
通过父节点对象查找子节点对象(可能会有文本节点)
父节点对象.firstChild 查找父节点下的第一个子节点
父节点对象.lastChild 查找父元素下的最后一个子节点
父节点对象.childNodes 多个 查找父元素下的所有子节
通过父节点对象查找子元素节点对象
父节点对象.firstElementChild 查找父节点下的第一个子元素节点
父节点对象.lastElementChild 查找父元素下的最后一个子元素节点
父节点对象.child 多个 查找父元素下的所有子元素节点
<body>
<ul id="box">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
<script>
var oUl = document.getElementById("box");
console.log(oUl.firstChild);
console.log(oUl.firstChild.nodeType); //3
console.log(oUl.firstChild.nodeValue); //空
console.log(oUl.childNodes.length); //7
var elArr = [];
for (var i = 0; i < oUl.childNodes.length; i++) {
// console.log(oUl.childNodes[i]);
if (oUl.childNodes[i].nodeType === 1) {
elArr.push(oUl.childNodes[i]);
}
}
console.log(elArr);
</script>
console.log(oUl.firstChild); //第一个子节点 可能有文本节点 换行
console.log(oUl.firstElementChild); //第一个元素节点
console.log(oUl.lastChild); //最后一个子节点 可能有文本节点 换行
console.log(oUl.lastElementChild); //最后一个元素节点
console.log(oUl.childNodes); //ul里所有的子节点对象
console.log(oUl.children); //ul里所有的子元素节点对象
六、子节点查找父节点
var oUl = document.getElementById("box");
var oLi = document.getElementById("list");
console.log(oLi.parentNode); //查找父节点
console.log(oLi.parentElement); //查找父元素
子节点查找父节点
子节点对象.parentNode 通过子节点查找父节点
子节点对象.parentElement 通过子节点查找父元素
七、兄弟之间查找
console.log(oLi.nextSibling); //查找下一个兄弟节点 可能为文本
console.log(oLi.nextElementSibling); //查找下一个元素兄弟节点
console.log(oLi.nextSibling.nodeValue);
console.log(oLi.previousSibling); //查找上一个兄弟节点 可能为文本
// console.log(oLi.previousSibling.previousSibling);
console.log(oLi.previousElementSibling); //查找上一个元素兄弟节点
八、创建元素对象
创建元素对象
document.createElement("元素名称");
追加元素对象到父元素内部最后
父元素节点.appendChild(子节点);