DOM扩展
来源:互联网 发布:美工设计班 编辑:程序博客网 时间:2024/06/09 21:40
尽管DOM作为API已经非常完善了,但是为了实现更多的功能,仍然会有一些标准或专有的扩展。对DOM的两个主要扩展是Selectors API(选择符API)和HTML5。
一、选择符API
Selectors API是由W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询。其核心的两个方法:querySelector()
和querySelectorAll()
。
1. querySelector()方法
querySelector()
接受一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素返回null。
示例:
- 1
- 2
- 3
- 1
- 2
- 3
2. querySelectorAll()方法
querySelectorAll()接受一个CSS选择符,返回与该模式匹配的NodeList实例,如果没有找到匹配的元素返回null。
示例:
- 1
- 2
- 3
- 1
- 2
- 3
注意:上述两个函数如果传入不支持的选择符,会抛出错误。
3. matchesSelector()方法
matchesSelector()
方法大部分浏览器未实现,可使用matches()或者使用各个浏览器实验性的实现。
- 1
- 1
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
二、元素遍历
对于元素间的空格,各浏览器对于childNodes和firstChild等属性处理行为不一致,为了弥补差异,Element Traversal新定义了一组属性。
示例:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
<li>Item 1</li>
lastElementChild指向最后一个子元素,lastChild的元素版<li>Item 5</li>
previousElementSibling指向前一个同辈元素,previousSibling的元素版<p>李刚</p>
nextElementSibling指向后一个同辈元素,nextSibling的元素版<p id="blog">http://blog.csdn.net/ligang2585116</p>
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
三、HTML5
1. 与类相关的扩充
(1)getElementsByClassName("包含一或多个类名的字符串")
- 1
- 2
- 1
- 2
(2)classList属性
在操作类名时,需要通过className属性添加、删除和替换类型名。因为className中是一个字符串,所以即使只修改字符串的一部分,也必须每次都设置整个字符串的值。
- 1
- 1
示例:className方式
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
示例:classList方式
- 1
- 2
- 1
- 2
classList属性是DOMTokenList的实例,其含有length属性。
有了classList属性,除非需要删除全部所有类名,或者完全重写元素的class属性,否则也就用不到className属性了。
2. 焦点管理
document.activeElement
属性始终会引用DOM中当前获得了焦点的元素。
示例:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
默认情况下,文档刚刚加载完成时,document.activeElement
中保存的是document.body
元素的引用。文档加载期间,document.activeElement
为null。
查询文档获知哪个元素获得了焦点,以及确定文档是否获得了焦点,这两个功能最重要的用途是提高Web应用的无障碍性。无障碍Web应用的一个重要标志就是恰当的焦点管理,而确切地知道哪个元素获得了焦点是一个极大的进步。
3. HTMLDocument的变化
(1)readyState属性
- loading:正在加载文档;
- complete:已经加载完文档。
使用document.readyState的最恰当方式,就是通过它来实现一个指示文档已经加载完成的指示器。
(2)兼容模式 document.compatMode
告知开发人员浏览器采用了哪种渲染模式。
- CSS1Compat:标准模式;
- BackCompat:混杂模式。
(3)head属性
Html5新增了document.head
属性,引用文档的<head>
元素。
- 1
- 1
4. 字符集属性
- document.charset:文档中实际使用的字符集,也可以用来指定新字符集;
- document.defaultCharset:表示根据浏览器及操作系统的设置,当前文档默认的字符集应该是什么,注意兼容性。
5. 自定义数据属性
HTML5规定可以为元素添加非标准的属性,但要添加前缀data-,目的是为元素提供与渲染无关的信息,或者提供语义信息。
- 1
- 1
添加了自定义属性后,可以通过元素的dataset属性来访问自定义属性的值。
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
6. 插入标记
DOM操作文档插入HTML标记非常复杂,因为其不仅要创建一系列DOM节点,而且还要小心地按照正确顺序进行连接。详见:DOM
示例:创建a标签并插入到body
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
使用插入标记的技术,直接插入HTML字符串不仅简单而且速度更快。
(1)innerHTML属性
读模式:返回调用元素的所有节点(包括元素、注释和文本节点)对应的HTML标记;
写模式:根据指定的值创建新的DOM树,然后用这个DOM树完全替换调用元素原先的所有子节点。
示例:创建a标签并插入到body
- 1
- 1
注意:上述使用“+=”,因为写模式下,innerHTML的值会被解析为DOM子树,替换调用元素原来的所有子节点。
说明:使用innerHTML插入的字符串开头是一个无作用域的元素(<script>、<style>
)时,IE会在解析这个字符串前先删除该元素。
- 1
- 2
- 3
- 1
- 2
- 3
(2)outerHTML属性
读模式:返回调用它的元素及所有节点(包括元素、注释和文本节点)对应的HTML标记;
写模式:根据指定的值创建新的DOM树,然后用这个DOM树完全替换调用元素。
示例:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
(3)内存与性能问题
使用上述节点方法可能会导致浏览器的内存占用问题。在删除带有事件处理程序或引用了其他JavaScript对象子树时,就会导致内存占用问题。在使用innerHTML、outerHTML等方法时,最好先删除要替换的元素的所有事件处理程序和JavaScript对象属性。
7. scrollIntoView()方法
如何滚动页面也是DOM规范没有解决的一个问题,HTML5最终选择了scrollIntoView
作为标准。 scrollIntoView()
可以在任何元素上调用。默认或传入true,窗口会滚动让调用元素与视口顶部尽可能齐平;传入false,调用元素尽可能会全部出现在窗口中。
- 1
- 1
当页面发生变化时,一般会用这个方法来吸引用户的注意力。实际上,为某个元素设置焦点也会导致浏览器滚动并显示出获得焦点的元素。
四、专有扩展
1. children属性
children属性与childNodes没有什么区别。
2. contains()方法
判断某个节点是不是另一个节点的后代。
- 1
- 1
示例:通用的contains函数
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
3. 插入文本
innerText
和outerText
并没有被纳入HTML5。
其对文本进行操作,使用方式类似于innerHTM
和outerHTML
。
4. 滚动
HTML5将scrollIntoView()方法纳入规范之后,仍还有其他几个专有方法可以在不同的浏览器中使用。
(1)scrollIntoViewIfNeeded(alignCenter)
:只在当前元素视口中不可见的情况下,才滚动浏览器窗口或容器元素,最终让它可见。如果当前元素在视口中可见,这个方法什么也不做。true,尽量将元素在显示视口中部(垂直方向)。
(2)scrollByLines(lineCount)
:将元素的内容滚动指定的行高。
(3)scrollByPages(pageCount)
:将元素的内容滚动指定的页面高度,具体高度由元素的高度决定。
注意:scrollIntoView()
和scrollIntoViewIfNeeded()
的作用对象是元素的容器;scrollByLines()
和scrollByPages()
影响的则是元素自身。
- DOM扩展
- DOM扩展
- DOM扩展
- DOM扩展
- DOM扩展
- DOM扩展
- DOM扩展
- DOM扩展
- js--DOM--2.DOM扩展
- javascript DOM扩展
- webkit扩展DOM事件
- JavaScript DOM 扩展
- JavaScript:DOM扩展
- DOM 扩展 Selectors API
- javascript DOM扩展
- JavaScript DOM扩展
- DOM扩展 ---高程笔记
- HTML5之DOM扩展
- 编译系统源码*** Can not find ProjectConfig.mk , MTK_PROJECT_CONFIGS = 。 停止。
- 解决"Notepad++中写入python代码 运行后只是一闪而过"的问题
- poj 3278 Catch That Cow 【bfs】
- 268. Missing Number#1(Done)
- android框架之基础 原型设计模式
- DOM扩展
- java.lang.NoClassDefFoundError: org/apache/log4j/LogManager
- 无线循环ViewPager引导页
- 15 Useful “ifconfig” Commands to Configure Network Interface in Linux
- 详解css3系列:动画@keyframes和Animation
- 数据预处理一些笔记
- 从零开始学SALM(前言准备)
- laravel使用mysql分库说明
- cookie在Android中的使用