JavaScript基础6DOM简介&节点的获取

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