JS11--DOM2和DOM3

DOM2级核心 和 DOM2级视图 以及 DOM2级HTML 的变化

DcoumentType

新增方法
文档声明中的信息
publicId
systemId
internalSubset

Document类型的变化

importNode() 文档中取得一个节点,然后倒入到另一个文档,使其成为这个文档的一部分。

 DOM2级核心:
document.implementation对象 新增 
    createDcoumentType()  创建一个新的节点,只在创建一个新的文档类型是有用
    createDocument()     创建新文档

DOM2级HTML:
document.implementation
    createHTMLDocument()  用于创建一个完整的HTML文档

DOM2级视图:
defaultView属性,保存着一个指针,指向拥有给定文档的窗口

Node类型的变化

isSupported()方法    用于确定当前节点具有什么能力
特性名和版本号

DOM3级,元素比较方法:
相等:两个节点是相同的类型,具有相等的属性
相同:两个节点引用的是同一个对象。
isSameNode()
isEqualNode()

DOM3级: 为DOM添加格外数据的新方法
getUserData()
setUserData()

框架的变化

 框架 HTMLFrameElement
内嵌框架    HTMLIFrameElement
新的属性:contextDocument指向框架内容的文档对象。

DOM2级样式

访问元素的样式–style对象

  1. style对象是CSSStyleDeclaration的实例
  2. 对于使用段划线的CSS属性名,必须将其转换为驼峰式,才能通过JavaScript访问。
  3. float是javascript的保留字,所有不能用在属性名,将其转换成cssFloat,sytleFloat(IE)
  4. 标准模式下,所有度量值都必须指定一个度量单位。
  5. DOM2级支持的样式

    cssText style特征中css代码
    length css属性的个数
    parentRule CSS信息的CSSRule对象
    getPropertyCSSValue(propertyName) 返回包含给定属性的CSSValue对象
    getPropertyPriority(propertyName) 返回是否使用了!important
    getPropertyValue(propertyName) 返回给定属性的字符串值
    item(inexe) 返回给定位置的CSS属性名称
    removeProperty(propretyName) 从样式中删除给定属性
    setProperty(propertyName,value,priority):将给定属性设置为相应的值。

  6. 计算样式
    document.defaultView
    方法
    getComputedStyle()方法 返回CSSStyleDeclaration对象
    所有计算样式都是只读的。不能修改计算后样式对象中的CSS属性。

操作样式表—CSSStyleSheet类型

包含通过<link>元素包含的样式表和<style>元素中定义的样式表。
这个两个元素分别由HTMLLinkElement和HTMLStyleElement类型表示。

CSSStyleSheet类型更为通用,CSSStyleSheet是一套只读接口,有一个属性除外。

CSSStyleSheet继承自StyleSheet(一个基础接口来定义非CSS样式表)
其StyleSheet的属性:

disabled:表示样式是否被禁用
href
media
ownerNode
parentStyleSheet
title
type

除了disabled,其它样式都是只读的。

CSSStyleSheet特有的:

cssRules
ownerRule
deleteRule(index)
insertRule(rule,index)

应用于文档的所有样式表都是通过document.styleSheets集合来表示的。

CSS规则

cssText
parentRule
parentSytleSheet
style
type

创建规则

isertRule()

addRule()(IE)

删除规则

deleteRule()

removeRule()(IE)

DOM2级遍历

偏移量

  1. offsetHeight 元素在垂直方法上占用的空间大小
  2. offsetWidth 元素在水平方法上占用的空间大小
  3. offsetLeft 元素的左外边距包含至左内边框之间的像素距离
  4. offsetTop 元素的右外边距包含至上内边框之间的像素距离
  5. offsetParent

客户区大小

元素内容及其内边距所占据的空间大小。

clientWidth 元素内容区宽度加左右内边距宽度
clientHeight 元素内容区高度加上上下内边距宽度

滚动大小

包含滚动内容的元素的大小。

scrollHeight
scrollWidth
scrollLeft
scrollTop

NodeIterator
TreeWalker
对于给定的起点对DOM结构执行深度优先的遍历操作。

NodeIterator

  1. 使用document.createNodeIterator()方法创建实例

参数:
root
whatToShow
filter
entityReferExpansion

whatToShow掩码位
NodeFilter是一个抽象类型,不能直接创建其实例
NodeFilter中的类型定义

  1. NodeFilter.SHOW_ALL
  2. NodeFilter.SHOW_ELEMENT
  3. NodeFilter.SHOW_ATTRIBUTE
  4. NodeFilter.SHOW_CDATA_SECTION
  5. NodeFilter.SHOW_ENTITY_REFERENCE
  6. NodeFilter.SHOW_ENTITY
  7. NodeFilter.SHOW_PROCESSING_INSTRAUCTION
  8. NodeFilter.SHOW_COMMENT
  9. NodeFilter.SHOW_DOCUMENT
  10. NodeFilter.SHOW_DOCUMENT_TYPE
  11. NodeFilter.SHOW_DOCUMENT_FRAGMENT
  12. NodeFilter.SHOW_NOTATOIN

NodeFilter中的方法
acceptNode()

过滤器的返回值:

  1. NodeFilter.FILTER_ACCEPT 应该访问给定的节点
  2. NodeFilter.FILTER_SKIP 不应该访问给定的节点
    NodeIterator方法
  3. nextNode()
  4. previousNode()

TreeWalker

更高级版本
创建 document.createTreeWalker()
除了nextNode()和previousNode()外,提供的方法

parentNode()
firstChild()
lastChild()
nextSibling()
previousSibling()

过滤器的返回值:
NodeFilter.FILTER_ACCEPT 应该访问给定的节点
NodeFilter.FILTER_SKIP 跳过给定的节点继续前进到子树中的下一个节点。
NodeFilter.FILTER_REJECT 跳过相应的节点以及该节点的整个子树。

属性:
currentNode任何遍历方法在上一次遍历中返回的节点。可以修改遍历继续进行的起点

DOM2级范围

范围可以选择文档中的一个区域,而不必考虑节点的界限。

document.createRange()

属性提供了当前范围在文档中的位置

  1. startContainer
  2. startOffset
  3. endContainer
  4. commonAncestorContainer

方法

selectNode()
selectNodeContents()
文章目录
  1. 1. DOM2级核心 和 DOM2级视图 以及 DOM2级HTML 的变化
    1. 1.1. DcoumentType
    2. 1.2. Document类型的变化
    3. 1.3. Node类型的变化
    4. 1.4. 框架的变化
  2. 2. DOM2级样式
    1. 2.1. 访问元素的样式–style对象
    2. 2.2. 操作样式表—CSSStyleSheet类型
      1. 2.2.1. CSS规则
      2. 2.2.2. 创建规则
      3. 2.2.3. 删除规则
  3. 3. DOM2级遍历
    1. 3.1. 偏移量
    2. 3.2. 客户区大小
    3. 3.3. 滚动大小
    4. 3.4. NodeIterator
    5. 3.5. TreeWalker
  4. 4. DOM2级范围
,