作者:Gravitymann | 来源:互联网 | 2024-10-27 12:43
第11章详细探讨了DOM扩展,其中W3C将一些已经广泛采用的专有扩展标准化并纳入规范。本章重点介绍了两个主要的DOM扩展:SelectorsAPI(选择符API)和HTML5选择符API。这些扩展不仅增强了DOM操作的灵活性和效率,还为开发者提供了更强大的选择器支持,使得复杂的选择和操作变得更加简便。此外,本章还讨论了这些API在实际开发中的应用案例和最佳实践。
第11章 DOM扩展
W3C将一些已经成为事实标准的专有扩展标准化并写入规范当中。对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5
选择符API
就是根据CSS选择符选择与某个模式匹配的DOM元素,SelectorsAPI是W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询,极大改善了性能
Selectors API Level 1的核心是两个方法querySelector()和querySelectorAll()
querySelector()方法
它接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没找到则返回null
var body=document.querySelector("body"); //取得body元素
var myDiv=document.querySelector("#myDiv"); //取得ID为"myDiv"的元素
通过Document类型调用querySelector()方法会在文档元素范围内查找匹配的元素,通过Element类型调用querySelector()方法只会在该元素后代元素范围内查找匹配的元素,如果传入了不被支持的选择符,querySelector()会抛出错误
querySelectorAll()
该方法与querySelector()类似,不过它返回的是带有所有属性和方法的NodeList对象,其底层是类似一组元素的快照,而非对文档进行搜索的动态查询,这样可以避免大多数性能问题
//取得某
中所有的
元素var ems=document.getElementById("myDiv").querySelectorAll("em");
方括号和item()方法取得NodeList里的某个元素
matchesSelector()方法
Selectors API Level
2规范为Element类型新增了matchesSelector()方法,这个方法接收一个参数,即css选择符,如果调用元素与该选择符匹配,返回true,否则返回false
if(document.body.matchesSelector("body.page1")){
//true
}
元素遍历
对于元素间的空格,IE9及之前版本不会返回文本节点,其他浏览器都会返回文本节点,这样导致使用childNodes和firstChild等属性时的行为不一致,Element
Traversal新定义了一组属性,只可以在IE9之后的版本使用......
HTML5
getElementsByClassName()方法
它接收一个参数即包含一个或者多个类名,返回带有指定类的所有元素的NodeList,传入多个类名时,类名的先后顺序不重要
var item1=document.getElementsByClassName("mydiv class1");
classList属性
Javascript高级程序设计27.pdf,布布扣,bubuko.com
推荐阅读
-
在2020年8月19日的深度分析中,我们探讨了HTML标签中同时存在`a`标签的`href`和`onclick`属性时的触发顺序问题。此外,还讨论了如何在一个自适应高度的父级`div`中,使两个子`div`中的一个固定高度为300px,另一个自动填充剩余空间的方法。最后,文章详细介绍了JavaScript异步加载的多种实现方式,包括但不限于`async`、`defer`属性以及动态脚本插入技术,为开发者提供了丰富的技术参考。 ...
[详细]
蜡笔小新 2024-10-28 19:59:35
-
在探讨Go语言中高效的排序与搜索算法时,本文深入分析了Go语言提供的内置排序功能及其优化策略。通过实例代码,详细讲解了如何利用Go语言的标准库实现快速、高效的排序和搜索操作,为开发者提供了实用的编程指导。 ...
[详细]
蜡笔小新 2024-10-29 20:56:23
-
-
在 Linux 系统中,`/proc` 目录实现了一种特殊的文件系统,称为 proc 文件系统。与传统的文件系统不同,proc 文件系统主要用于提供内核和进程信息的动态视图,通过文件和目录的形式呈现。这些信息包括系统状态、进程细节以及各种内核参数,为系统管理员和开发者提供了强大的诊断和调试工具。此外,proc 文件系统还支持实时读取和修改某些内核参数,增强了系统的灵活性和可配置性。 ...
[详细]
蜡笔小新 2024-10-30 12:44:28
-
高效排序算法是提升数据处理速度的重要技术。通过优化排序算法,可以显著提高数据处理的效率和性能。本文介绍了几种常见的高效排序算法,如快速排序、归并排序和堆排序,并通过实例代码展示了它们的具体实现。实验结果表明,这些算法在大规模数据集上的表现尤为突出,能够有效减少数据处理时间,提升系统整体性能。 ...
[详细]
蜡笔小新 2024-10-29 17:09:31
-
本文介绍了实现链表数据结构的方法与技巧,通过定义一个 `MyLinkedList` 类来管理链表节点。该类包含三个主要属性:`first` 用于指向链表的第一个节点,`last` 用于指向链表的最后一个节点,以及 `size` 用于记录链表中节点的数量。此外,还详细探讨了如何通过这些属性高效地进行链表的操作,如插入、删除和查找等。 ...
[详细]
蜡笔小新 2024-10-29 11:03:22
-
Location对象是浏览器Window对象的一部分,通过`window.location`属性可访问。它包含了当前页面URL的相关信息,如协议、主机名、路径和查询参数等,对于页面导航和URL操作非常有用。 ...
[详细]
蜡笔小新 2024-10-29 10:11:40
-
在MFC开发过程中,利用Windows内置的文件对话框可以显著提高文件操作的效率。本文总结了使用文件对话框进行文件选择和处理的经验,详细介绍了相关API的调用方法和参数设置,如`CFileDialog`类的使用、结构体`OPENFILENAME`的配置以及如何获取选中的文件路径。通过这些技巧,开发者可以快速实现文件的打开、保存等功能,提升应用程序的用户体验。 ...
[详细]
蜡笔小新 2024-10-28 15:31:22
-
探讨 `org.openide.windows.TopComponent.componentOpened()` 方法的应用及其代码实例分析 ...
[详细]
蜡笔小新 2024-10-30 18:43:34
-
在《深入解析 Vue.js 的设计与实现》第三章中,详细探讨了 Vue.js 渲染器与虚拟 DOM 的机制。通过 JavaScript 对象来模拟实际的 DOM 结构,例如,`const vNode = { tag: 'div', props: { ... } }`,这种方式不仅提高了性能,还增强了组件的可维护性和灵活性。本章进一步分析了虚拟 DOM 的创建、更新及优化策略,为开发者提供了深入了解 Vue.js 内核工作的视角。 ...
[详细]
蜡笔小新 2024-10-30 13:42:10
-
在Spring框架中,基于Schema的异常通知与环绕通知的实现方法具有重要的实践价值。首先,对于异常通知,需要创建一个实现ThrowsAdvice接口的通知类。尽管ThrowsAdvice接口本身不包含任何方法,但开发者需自定义方法来处理异常情况。此外,环绕通知则通过实现MethodInterceptor接口来实现,允许在方法调用前后执行特定逻辑,从而增强功能或进行必要的控制。这两种通知机制的结合使用,能够有效提升应用程序的健壮性和灵活性。 ...
[详细]
蜡笔小新 2024-10-30 13:30:04
-
在使用关系型数据库时,通常需要通过用户名和密码进行身份验证才能访问数据。然而,MongoDB默认情况下并不强制要求这种身份验证机制,使得用户无需凭据即可访问并执行各种操作。虽然这一设计简化了初学者的上手过程,但也带来了显著的安全风险。为了提升MongoDB的连接安全性,本文将探讨多种策略与实践,包括启用身份验证、配置网络访问控制、加密通信以及定期审计安全设置,以确保数据库的安全性和数据的完整性。 ...
[详细]
蜡笔小新 2024-10-30 12:57:32
-
Java 8 引入了 Stream API,这一新特性极大地增强了集合数据的处理能力。通过 Stream API,开发者可以更加高效、简洁地进行集合数据的遍历、过滤和转换操作。本文将详细解析 Stream API 的核心概念和常见用法,帮助读者更好地理解和应用这一强大的工具。 ...
[详细]
蜡笔小新 2024-10-30 11:50:09
-
终于迎来了“足不出户也能为社会贡献力量”的时刻,但有追求的测试工程师绝不会让自己的生活变得乏味。与其在家消磨时光,不如利用这段时间深入研究和提升自己的技术能力,特别是对AppCrawler自动化测试工具的个性化配置进行详细探索。这不仅能够提高测试效率,还能为项目带来更多的价值。 ...
[详细]
蜡笔小新 2024-10-29 13:58:19
-
掌握DSP必备的56个核心问题,我已经将其收藏以备不时之需! ...
[详细]
蜡笔小新 2024-10-28 18:26:22
-
本文详细介绍了 Ansible Ad-Hoc 命令的使用方法,基于官方文档进行了中文翻译。Ad-Hoc 命令允许用户通过 `usr/bin/ansible` 快速执行一次性任务,适用于快速部署、配置管理和故障排查等场景。文中通过多个实例演示了 Ad-Hoc 命令的具体应用,帮助读者更好地理解和掌握这一强大工具。 ...
[详细]
蜡笔小新 2024-10-26 23:52:29
-
Gravitymann
这个家伙很懒,什么也没留下!