十一章 DOM扩展
2015-07-21 23:27:54 35 举报AI智能生成
登录查看完整内容
DOM扩展是指对原生的DOM API进行增强，以满足特定的需求。例如，jQuery就是一个典型的DOM扩展库，它提供了丰富的API来简化DOM操作。此外，还有一些其他的DOM扩展库，如Dojo、Mootools等。这些库通常都提供了一些实用的功能，如动画效果、Ajax支持、事件处理等。使用这些库可以大大提高开发效率，并且能够使代码更加简洁易懂。总之，DOM扩展是一个非常有用的工具，可以帮助开发者更好地完成Web开发任务。
作者其他创作
大纲/内容
DOM扩展
选择符API
Level1的核心
querySelector()
接收一个CSS选择符，返回第一个匹配的元素
querySelectorAll()
接收一个CSS选择符，返回所有匹配的元素
Level2
matchesSelector()
HTML5
新增API
getElementsByClassName()
classList属性
className属性
添加、删除和替换类名
新方法
add(value)
将给定的字符串值添加到列表中
contains(value)
判断列表中是否存在给定的值
remove(value)
从列表中删除给定的字符串
toggle(value)
DOM焦点管理
document.activeElement
引用DOM中当前获得焦点的元素
元素获取焦点方式
页面加载
用户输入
document.hasFocus()
用于确定文档是否获得了焦点
HTMLDocument扩展
document.readState
实现一个指示文档已经加载完成的指示器
值为loading，正在加载文档
值为complete，已经加载文档
document.compatMode
检测浏览器的兼容模式
标准模式下值：CSS1Compat
混杂模式下值：BackCompat
document.head
引入文档的元素
字符集属性
document.charset
默认值：UTF-16
document.defaultChtset
浏览器当前默认的字符集
通过这两个属性可以获取或设置文档的字符编码
自定义数据属性
添加前缀：data-
作用：为元素提供与渲染无关的信息
元素的dataset属性可访问自定义属性的值
插入标记
innerHTML属性
可以插入HTML标记
outerHTML属性
insertAdjacentHTML()
两个参数:插入位置和要插入的HTML文本
第一个参数的值
beforebegin
afterbegin
beforeend
afterend
内存与性能问题
专有扩展
document.documentMode
可判断页面使用的文档模式
children属性
IE8及之前版本包含注释节点及元素节点
IE9之后版本只含元素节点
contains()
有一个参数：要检测的后代节点
若被检测的节点是后代节点，返回true，否则，返回false
插入文本
innerText属性
textContent属性
outerText属性
页面滚动
scrollIntoView()
通过滚动浏览器窗口或某个容器元素，是调用元素出现在视口中
scrollIntoViewIfNeeded(alignCenter)
scrollByLines(lineCount)
将元素内容滚动指定的行高(含正负值)
scrollByPages(pageCount)
将元素内容滚动指定的页面高度
Element Traversal API增加的属性
childElementCount
返回子元素的个数(不含文本节点和注释)
firstElementChild
第一个子元素
lastElementChild
最后一个子元素
previousElementSibling
前一个同辈元素
nextElementSibiling
后一个同辈元素
0 条评论
回复 删除
下一页
