目录
一、查看元素节点
节点类型：元素节点、属性节点、文本节点
节点关系：父子关系、同级关系
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(子节点);
九、删除节点
删除节点：
父节点.removeChild(删除节点)
节点对象.remove()
十、替换节点
替换节点
父节点.replaceChild(用来替换的节点，被替换的节点)