DOM 基本概念
文档对象模型(DOM,Document Object Model)是针对XML但经过扩展用于HTML的应用程序编程接口(API,Application Programming Interface)
DOM是展示和操作HTML和XML文档内容的基础API,其中Document -- XML文档 或 HTML文档;Object -- Object对象的属性和方法;Model -- Model模型,DOM 是针对XML或HTML的基于树结构的API
根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得我们可以访问页面其他的标准组件
DOM把整个页面映射为一个多层节点结构,HTML或XML页面中的每个组成部分都是某种类型的节点,这些节点又包含着不同类型的数据。
Core DOM的操作
查看节点
getElementById(); 通过元素的id值进行查看
getElementsByName(); 查询元素的 name 属性
getElementByTagName(); 返回带有指定标签名的对象的集合
父节点查找子节点
通过父节点对象查找子节点对象(可能会有文本节点) 兼容性好
父节点对象.firstChild 查找父节点下的第一个子节点
父节点对象.lastChild 查找父节点下的最后一个子节点
父节点对象.childNodes 多个 查找父节点下的所有的子节点
通过父节点对象查找子元素节点对象
父节点对象.firstElementChild 查找父节点下的第一个子元素节点
父节点对象.lastElementChild 查找父节点下的最后一个子元素节点
父节点对象.children 多个 查找父节点下的所有的子元素节点
子节点查找父节点
子节点对象.parentNode 通过子节点查找父节点
子节点对象.parentElement 通过子节点查找父元素
兄弟之间进行查找
.nextSibling 查找下一个兄弟节点 可能为文本
.nextElementSibling 查找下一个元素兄弟节点
.previousSibling 查找上一个兄弟节点 可能为文本
.previousElementSibling 查找上一个元素兄弟节点
节点对象
节点对象.getAttribute("属性名") 根据属性名获取属性值
节点对象.setAttribute("属性名","属性值")
节点对象.removeAttribute("属性名") 删除对应的这对属