第十二章 DOM2和DOM3
2015-07-28 22:28:32 5 举报AI智能生成
登录查看完整内容
第十二章介绍了DOM2和DOM3，这两个版本对JavaScript的文档对象模型（DOM）进行了扩展和增强。DOM2引入了新的API，如`querySelectorAll`、`Range`和`MutationObserver`，使得开发者能够更方便地操作和处理HTML文档。DOM3则进一步扩展了DOM2的功能，增加了许多新的特性，如自定义元素、模板字符串插值和属性映射等。这些新特性使得开发者能够更高效地编写代码，提高Web应用的性能和用户体验。总之，DOM2和DOM3为JavaScript开发者提供了强大的工具，使他们能够更好地控制和管理HTML文档。
作者其他创作
大纲/内容
DOM2、DOM3扩展
DOM2级核心
为节点添加更多属性和方法
document.implementation对象
createDocumentType()
createDocument()
DOM2级视图
为文档定义了基于样式信息的不同视图
defaultView属性(非IE)
指向拥有给定文档的窗口
parentWindow属性(IE/Opera)
作用同上
DOM2级样式
定义如何以编程方式来访问和改变css样式信息
DOM2级遍历和范围
引用了遍历DOM文档和选择其特定部分的新接口
DOM2级HTML
添加了更多属性、方法和新接口
createHTMLDocument()
创建一个完整的HTML文档
Node类型
isSupported()
用于确定当前节点具有什么能力，返回true/false
两个参数：特性名和特性版本号
DOM3级扩展的方法
比较节点方法
isSameNode()
两个节点是否相同
isEqualNode()
两个节点是否相等
节点添加额外数据
setUserData()
将数据指定给节点
getUserData()
框架和内嵌框架
分别用HTMLFrameElement和HTMLIFrameElement表示
contentWindow属性(除IE8之前)
指向表示框架内容的文档对象
contentWindow属性(所有浏览器)
返回框架的window对象
检测浏览器是否支持以上DOM模块
document.implementation.hasFeature()
样式
定义样式方式
用元素包含外部样式表文件
用元素定义嵌入式样式
用style定义针对特定元素的样式
js设置样式
js中属性名需要转换：background-color 改为 backgroundColor
float是保留字不能作为属性名
非IE可使用cssFloat作为属性名
IE可使用styleFloat作为属性名
在实践中，度量值都应指定度量单位，div.style.width=\"100px\"
DOM样式属性和方法
cssText
可访问style中的CSS代码
length
表示元素的CSS属性的数量
parentRule
表示CSS信息的CSSRule对象
getProperyCSSValue()
返回包含给定值的CSSValue对象
getPropertyPriority()
getPropertyValue()
返回给定属性的字符串值
item(index)
返回给定位置的CSS属性的名称
removeProperty()
从样式中删除给定属性
setProperty()
将给定属性设置为相应值，并加上\"importan\"或\"\"
计算样式
getComputedStyle
可以获取当前元素所有最终使用的CSS属性值，只读
currentStyle(IE)
返回元素当前应用的最终CSS属性值
元素大小
偏移量
offsetHeight
元素在垂直方向上占用的空间大小
offsetWidth
元素在水平方向上占用的空间大小
offsetLeft
元素左外边框至包含元素的左内边框间的像素距离
元素上外边框至包含元素的上内边框间的像素距离
客户区大小
指元素内容及其内边距占据的空间大小
clientWidth
元素宽度 + 左右内边距宽度
clientHeight
元素高度 + 上下内边距高度
滚动大小
指包含滚动内容的元素的大小
scrollHeight
在没有滚动条的情况下，元素内容的总高度
scrollWidth
在没有滚动条的情况下，元素内容的总宽度
scrollLeft
scrollTop
确定元素大小
getBoundingClientRect()
DOM2级遍历
NodeIterator
是一个简单的借口，只允许以一个节点的步幅前后移动
TreeWalker
具有上述相同功能，且支持在DOM结构的各个方向上移动
DOM2级范围
0 条评论
回复 删除
下一页
