1.DOM简介
DOM:文档对象类型
DOM是访问HTML和操作HTML的标准
DOM节点的分类
①文档节点
②元素节点
③ 属性节点
④文本节点
⑤注释节点
DOM节点层级关系
①父节点
②子节点
③ 根节点
④兄弟节点
2.节点的获取
一.获取元素节点
①根据元素ID获取元素节点
var iii = document.getElementById(" id ")
②获取相同class属性的元素节点列表
var iii = document.getElementsByClassName(" classname ")
③根据标签名获取元素节点集合
var iii = document.getElementsByTagName(" tagname ")
二.获取属性节点
①获取官方定义的属性直接用 元素节点.属性名
<input type="text" id="i" placeholder="hello word" y="yyy">
var iii = document.getElementById(" i ") //得到元素对应属性的属性值
iii.placeholder = XXX //修改元素对应属性的属性值
②元素节点.getAttribute(“属性名”)
var node = iii.getAttribute("y")
node = XXX //修改元素对应属性的属性值
iii.setAttribute("属性值",修改新值) //为属性值设置新值,若没有该属性,则添加该属性
iii.removeAttribute("属性值") //移除元素节点中的某个属性值
三.获取文本节点
①元素节点.innerHTML
var txt = iii.innerHTML //从对象的开始标签到结束标签的全部内容
②元素节点.outerHTML
var txt = iii.outerHTML //除包含innerHTML的全部内容外,还包含对象标签本身
③元素节点.innerText
var txt = iii.innerText //从对象的开始标签到结束标签的全部文本内容
四.节点属性及操作
三个属性:nodeName,nodeType,nodeValue
①获取当前元素节点的所有子节点
xxx.childNodes
②获取当前元素节点的第一个子节点
xxx.firstChild
③获取当前元素节点的最后一个子节点
xxx.lastChild
④获取当前元素节点的根节点
xxx.ownerDocument
⑤获取当前元素节点的根节点
xxx.parentNode
⑥获取当前元素节点的前一个同级节点
xxx.previousSibling
⑦获取当前元素节点的后一个同级节点
xxx.nextSibling