DOC

DOM

一张图告诉你什么是DOC

概念

Document Object Model

• 文档对象模型
• DOW 是针对HTML 和XML 文档的一个api ,
• DOM 中描述了一个层级化的节点树，
• 允许开发人员进行添加，移除和修改页面中的某一部分
• W3C 中的DOM 标准化分为三部分

1. 核心DOM - 针对任何结构化文档的标准模型
2. XML DOM - 针对XML结构化文档的标准模型
3. HTML DOM - 针对HTML 文档的标准模型

• HTML DOM 是关于如何获取，修改，添加 或者删除
• HTML 元素的标准，即操作HTML 元素
• api: 应用程序编程接口

获取的信息：

1. Document 节点是每一个文档的根节点
2. Document 节点下 有一个HTML 节点

• 我们将这个节点称为文档元素
• 文档元素是文档最外层的元素，其他的
• 元素都包含在文档元素之中
• 一个文档只能有一个文档元素，在HTML
• 中，文档元素永远是元素

3. 在DOW 数中，html文档的每一处标记

• 都可以用树中的一个节点来表示
• html元素标签-元素节点来表示
• 属性-> 属性节点 来表示
• 文档类型-> 文档类型节点 来表示
• 注释-> 注释节点 来表示
• 这部分是作为前期需要做好的铺垫内容
• • 通用的 Document 和 Element 类型 与
  • HTMLDocument 和 HTMLElement 是有区分的

  •  Document 只代表一个 HTML 或者 XML 文档
    

  •  Element 类型代表的是该文档的一个元素
    

  •  HTMLDocument 和 HTMLElement 子类
    

  •  只针对 HTML 文档 和 元素
    

DOM 中 节点分类（12种类型）需要记的（需要记住）
可以在网上查到

    /*
     需要记住的文档类型节点
     * 
     * 1.元素     Node.ELEMENT_NODE
     * 2.属性     Node.ATTRIBUTE_NODE
     * 3.文本     Node.TEXT_NODE
     * 4.注释     Node.COMMENT_NODE
     * 5.文档     Node.DOCUMENT_NODE
     * */

Node.ELEMENT_NODE //元素
Node.ATTRIBUTE_NODE //元素中的属性
Node.TEXT_NODE //纯文本（没有子节点）
Node.CDATA_SECTION_NODE //子节点是TextNode
Node.ENTITY_REFERENCE_NODE
//文档中的实体引用
Node.ENTITY_NODE
//DTD 中实体定义
Node.PROCESSING_INSTRUCTION_NODE
//一个文档处理程序中
//使用的特有指令
Node.COMMENT_NODE
//注释
Node.DOCUMENT_NODE
//最外层的 根节点
Node.DOCUMENT_TYPE_NODE
//文档类型定义
Node.DOCUMENT_FRAGMENT_NODE
//更小型的 Document 节点
//定义这个数据类型主要是为
//了方便只希望提取文档的
//某一部分时使用
Node.NOTATION_NODE
//DTD 的 Nation 定义
//在 XML 文档中表示一个符号

节点属性
1. nodeName
 节点名称
* nodeName 是只读的
* nodeName 始终包含HTML 元素的大小写字母 标签名
 
2. nodeValue
    节点
    或者进行设置或返回节点的值

3. nodeType
节点的类型

## DOM核心对象-document 对象
 JS 中是通过Document 类型来表示文档
 在浏览器中，document 的对象是HTMLDocument
 表示整个HTML界面
 而且document 对象是 window对象各个属性
 我们可以将其当做全局对象来访问
 
 nodeType: 9（上面的内容第九个）
 nodeName: #document
 nodeValue: null
 parentNode:null（父节点）
 ownerDocument:null (根元素节点)
## 获取节点
document对象来获取页面有关的信息

我是标题

1. 使用该方法一定不要查找多个id
2. 如果有多个相同的id,则只会返回一个元素
3. 在低于IE 8 的版本，对匹配元素的ID不区分大小写

var h1s =
document.getElementById("h1");
console.log(h1s);
for(var i = 0;i < h1s.length;i++){
console.log(h1s[i].id);//获取id
console.log(h1s.item(i).id);//获取id
console.log(h1s[i].id);//获取id
}

该方法是根据标签名称来获取元素节点
* 因为一个文档中可能出现多个标签
* 所以该方法返回的是多个Element组成的集合
* 尽量使用getElementById()
* 
### NodeList 对象（NodeList: 节点列表）
类数组集合
* 返回的是一个只读 类数组对象
* 他们拥有length属性
* 也可以像数组一样索引
 

## 获取元素
写from 标签的时候
一个内容，如果多个用input表单

洗澡
喝水

 是通过标签的name 属性的值来获取元素
 可能出现多个相同的name值，
 所以返回是一个Element 组成的集合 
 有严重的兼容性问题， 
在IE中
  
## 获取元素querySelector(CSS 的选择器)