一、查看元素节点
<div id ="box">
hello
</div>
var a = document.getElementById("box")//div元素对象
//节点类型
//元素1 属性2 文本3
// console.log(a.nodeName)//节点名称 div
// console.log(a.tagName)//标签名称
// console.log(a.nodeType)// 1 代表元素节点
// console.log(a.nodeValue)// null 节点值
二、节点查找
<ul id="box">
<li id="li">列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
var a = document.getElementById("box")
// console.log(a.children) // 所有的子元素对象
// console.log(a.firstElementChild)//第一个元素节点
// console.log(a.lastElementChild)//最后一个元素节点
// console.log(a.childNodes.length)// 7
var li =document.getElementById("li")
// 子节点查找父节点
//子节点对象.parentNode 通过子节点查找父节点
//子节点对象.parentElement 通过子节点查找父元素
//console.log(li.parentNode) // 查找父节点
//console.log(li.parentElement) // 查找父元素
// 通过父节点对象查找子节点对象(可能会有文本节点)
// 父节点对象.firstChild
// 父节点对象.lastChild
// 父节点对象.childNodes 多个
// 通过父节点对象查找子元素节点对象
// 父节点对象.firstElementChild 查找父节点下的第一个子元素节点
// 父节点对象.lastElementChild 查找父节点下的最后一个子元素节点
// 父节点对象.children 多个 查找父节点下的所有的子元素节点
三、兄弟之间查找
<ul id="box">
<li>列表1</li>
<li id="li">列表2</li>
<li>列表3</li>
</ul>
var a = document.getElementById("li")
console.log(a.nextSibling) // 下一个兄弟节点 可能为文本
console.log(a.previousSibling) // 上一个兄弟节点
console.log(a.nextElementSibling) // 下一个兄弟节点
console.log(a.previousElementSibling) // 上一个兄弟节点
四、节点属性操作
<ul id="box">
<li id="li">列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
var a = document.getElementById("box")
// 节点对象.getAttribute("属性名") 根据属性名获取属性值
// 节点对象.setAttribute("属性名","属性值")
// 节点对象.removeAttribute("属性名") 删除对应的这对属性
a.getAttribute("id") // 可以获取自定义的属性值
// 设置
// a.title = "hello"
a.setAttribute("title","hello")
//删除
a.removeAttribute("title")
五、创建元素对象
<div id="box">
hello
</div>
var span = document.createElement("span")
span.innerHTML="哈哈哈"
//追加
a.appendChild(span)
// 创建元素对象
// document.createElement("元素名称")
// 追加元素对象到父元素的内部最后
// 父节点对象.appendChild(子节点)