04-02 文档对象模型 - 图1

文档对象模型 DOM

1、DOM概述

1-1 什么是DOM

  • 文档对象模型 Document Object Model
  • 文档对象模型 是表示和操作 HTML和XML文档内容的基础API

  • 文档对象模型，是W3C组织推荐的处理可扩展标志语言的标准编程接口

    12 DOM分类

  • 核心 DOM - 针对任何结构化文档的标准模型

  • XML DOM - 针对 XML 文档的标准模型

  • HTML DOM - 针对 HTML 文档的标准模型

    1-3 DOM分级

  • 1级dom

    1. 1级DOM在1998年10月份成为W3C的提议，由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOM HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。

  • 2级dom

    1. 通过对原有DOM的扩展，2级DOM通过对象接口增加了对鼠标和用户界面事件、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持。

  • 3级dom

    1. 3级DOM通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包括XML Infoset、 XPath、和XML Base。

    1-4 DOM树

    04-02 文档对象模型 - 图2

2、节点

2-1 什么是节点

文档中的每一个部分都是节点,包括document 元素 属性 文本…

2-2 节点的分类

  • Document
    Element 元素
    Attr 属性
  • Text 文本

  • Comment 注释

    23 节点属性

  • nodeName 节点名字

    1. document :  #document
    2. element : 标签名
    3. attr : 属性名
    4. text : #text
    5. comment : #comment

  • nodeValue 节点值

    1. document : null
    2. element : null
    3. attr : 属性值
    4. text : 文本内容
    5. comment : 注释内容

  • nodeType 节点类型

    1. document : 9
    2. element : 1
    3. attr : 2
    4. text : 3
    5. coment : 8

    3、获取元素对象

  • 通过ID获取元素

    1. document.getElementById()
    2. id属性可自动成为被脚本访问的全局变量

  • 通过name值获取元素 ```json document.getElementsByName() IE9+和标准浏览器认为 所有的元素都有name IE9- 认为只有个别元素有name

    1.   表单和表单控件
    2.   img iframe  embed object ....

docuemnt会为某些元素创建以元素name为名字的属性

04-02 文档对象模型 - 图3 …….

  2. - 通过标签名获取元素
  3. ```json
  4. document.getElementsByTagName()
  5. element.getElementsByTagName()
  6. document.images    所有img的引用
  7. document.forms    所有表单的引用
  8. document.links    所有超链接的引用
  9. docuent.anchors    所有锚点的引用
  • 通过类名选取元素(IE9+) ```json document.getElementsByClassName() element.getElementsByClassName()
  2. - 通过CSS选择器选取元素
  3. ```json
  4. document.querySelectorAll()
  5. document.querySelector()
  6. element.querySelectorAll()
  7. element.querySelector()
  • 获取所有的元素 ```json document.all
  1. <a name="MIrz3"></a>
  2. ## 4、文档结构和遍历文档
  3. <a name="9gshy"></a>
  4. ### 4-1 节点关系
  6. - 父节点 父元素
  7. - 子节点 子元素
  8. - 同辈节点 同辈元素
  9. - 祖先节点 祖先元素
  10. - 后代节点 后代元素
  11. <a name="vfuoJ"></a>
  12. ### 4-2 作为节点树的文档
  14. - parentNode 父节点
  15. - childNodes 所有子节点的集合
  16. - firstChild 第一个子节点
  17. - lastChild 最后一个子节点
  18. - nextSibling 下一个兄弟节点
  19. - previousSibling 上一个兄弟节点
  20. <a name="qsxNa"></a>
  21. ### 4-3 作为元素树的文档
  23. - parentElement 父元素 大部分情况下 parentElement 等同于 parentNode
  24. - children 所有子元素的集合
  25. - firstElementChild IE9+ 第一个子元素
  26. - lastElementChild IE9+ 最后一个子元素
  27. - nextElementSibling IE9+ 下一个兄弟元素
  28. - previousElementSibling IE9+ 上一个兄弟元素
  29. - childElementCount IE9+ 子元素的数量
  30. - ownerDocument 返回元素所属的文档对象
  31. <a name="siPvY"></a>
  32. ## 5、属性
  33. <a name="lXWNZ"></a>
  34. ### 5-1 HTML标签的属性和元素对象的属性
  35. HTMLElement对象映射了元素的HTML属性
  36. <a name="wVCXc"></a>
  37. ### 5-2 获取和设置非标准的HTML属性
  39. - getAttribute(attrname) 获取自定义或内置属性的值
  40. - setAttribute(attrnane, value) 设置自定义或内置属性
  41. - hasAttribute(attrname) 判断是否存在该属性
  42. - removeAttribute() 移出自定义或内置的属性
  43. <a name="g2Bbv"></a>
  44. ### 5-3 作为Attr节点的
  46. - arrtibutes 属性
  47. - setAttributeNode()
  48. - getAttributeNode()
  49. - document.createAttribute() 创建属性节点
  50. <a name="NZTpb"></a>
  51. ## 6、元素的内容
  52. <a name="1V2DI"></a>
  53. ### 6-1 作为HTML的元素内容
  55. - innerHTML
  56. - outerHTML
  57. <a name="8huWs"></a>
  58. ### 6-2 作为纯文本的元素内容
  60. - textContent IE9+
  61. - innerText 会忽略多余空白
  62. <a name="kbJC8"></a>
  63. ### 6-3 作为Text节点的元素内容
  64. <a name="8YZVA"></a>
  65. #### 文本节点的方法
  66. ```json
  67. appendData()    向文本节点追加内容
  68. deleteData()    删除文本节点的一部分内容
  69. insertData()    向文本节点中插入内容
  70. replaceData()    替换内容
  71. substringData()    截取内容

创建文本节点

  1. document.createTextNode()

7、创建、插入、删除 节点

7-1 创建节点

  1. document.createElement()

7-2 插入节点

  1. appendChild()    在元素的最后追加一个子元素
  2. insertBefore()    在元素指定的位置插入一个子元素

7-3 删除节点

  1. removeChild()

7-4 替换节点

  1. replaceChild(new_node, old_node)

7-5 克隆节点

  1. cloneNode()
  2.     参数
  3.     true    克隆元素以及所有的厚点节点
  4.     false    仅仅克隆节点本身

7-6 DocumentFragment

  1. document.createDocumentFragment()可以创建该对象
  3. DocumentFragment 接口表示文档的一部分（或一段）。更确切地说，它表示一个或多个邻接的 Document 节点和它们的所有子孙节点。
  5. DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。
  7. 请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点

8、元素的尺寸、位置、滚动

8-1 元素坐标

  1. offsetLeft    距离左边的距离, 相对规则同 css 的定位
  2. offsetTop    距离上边的距离, 相对规则同 css 的定位
  3. offsetParent    得到第一定位的祖先元素
  4. clientLeft    没卵用 就是边框宽
  5. clientTop    没卵用 就是边框宽
  6. getBoundingClientRect()        返回对象 包含位置信息 大小信息

8-2 判定某个元素在某点

  1. document.elementFromPoint()

8-3 查询元素的几何尺寸

  1. getBoundingClientRect()
  2. getClientRects()
  3. offsetWidth
  4. offsetHeight
  5. clientWidth
  6. clientHeight
  7. scrollWidth
  8. scrollHeight

8-4 滚动

  1. scrollLeft
  2. scrollTop

9、Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

9-1 属性

  1. URL        获取当前页面的url 只读
  2. domain        获取域名
  3. referrer        获取上一个页面的地址 只读
  4. title        
  5. location    
  6. lastModified    
  7. cookie

9-2 方法

  1. write()        
  2. writeln()

10、HTML表单中的相关对象

10-1 选取表单和表单元素

10-2 表单和表单元素的属性

10-3 from对象

属性

  1. elements    所有表单控件组成的集合

方法

  1. submit()    让表单提交
  2. reset()        让表单重置

10-4 按钮(button submit reset)对象

方法

  1. focus()    获得焦点
  2. blur()    使失去焦点
  3. click()    使按钮比被单击

10-5 单选复选

方法

  1. focus()    获得焦点
  2. blur()    失去焦点
  3. click()    被单击

10-6 文本(input textarea)

方法

  1. focus()    获取焦点
  2. blur()    失去焦点
  3. select()    全部被选中

10-7 select对象

属性

  1. options
  2. selectedIndex
  3. length    选项的数量

方法

  1. add()    添加选项
  2. remove()    移出选项, 参数是option的索引
  3. focus()    获取焦点
  4. blur()    失去焦点

11、Table中相关对象

11-1 table对象

属性

  1. cells    返回包含表格中所有单元格的一个数组。
  2. rows     返回包含表格中所有行的一个数组。

11-2 tr对象

属性

  1. cells    返回包含行中所有单元格的一个数组。
  2. rowIndex    返回该行在表中的位置。

方法

  1. deleteCell()    删除行中的指定的单元格。
  2. insertCell()    在一行中的指定位置插入一个空的 <td> 元素。

11-3 td对象、th对象

属性

  1. cellIndex    返回单元格在某行的单元格集合中的位置。