DOM模型的相关概念和操作

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("属性名")   删除对应的这对属