DOM文档对象模型

• DOM 模型
• • Document 对象的理解
  • Document 对象中的方法介绍
  • 节点的常用属性和方法

DOM 模型

DOM 全称是 Document Object Model 文档对象模型。用于处理网页内容的一些方法和接口。
其作用就是把文档中的标签，属性，文本，转换成为对象来管理。

Document 对象的理解

第一点：Document 它管理了所有的 HTML 文档内容。 
第二点：document 它是一种树结构的文档。有层级关系。 
第三点：它让我们把所有的标签 都 对象化 
第四点：我们可以通过 document 访问所有的标签对象。

Document 对象中的方法介绍

1. document.getElementById(elementId) 通过标签的 id 属性查找标签 dom 对象，elementId是标签的 id 属性值。
2. document.getElementsByName(elementName) 通过标签的 name属性查找标签 dom 对象，elementName 标签的 name 属性值。
3. document.getElementsByTagName(tagname) 通过标签名查找标签 dom 对象。tagname是标签名。
4. document.createElement( tagName) 方法，通过给定的标签名，创建一个标签对象。tagName是要创建的标签名。

注意
document 对象的三个查询方法中优先顺序为：
getElementById>getElementsByName >getElementsByTagName

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

节点的常用属性和方法

节点就是标签对象

方法：

• 通过具体的元素节点调用 getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
• appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点

属性：

• childNodes 属性，获取当前节点的所有子节点 firstChild 属性，获取当前节点的第一个子节点
• lastChild 属性，获取当前节点的最后一个子节点 parentNode 属性，获取当前节点的父节点
• nextSibling 属性，获取当前节点的下一个节点
• previousSibling 属性，获取当前节点的上一个节点
• className属性， 用于获取或设置标签的 class 属性值
• innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
• innerText 属性，表示获取/设置起始标签和结束标签中的文本