html5——DOM扩展

元素获取

1、document.getElementsByClassName (‘class‘) 通过类名获取元素，以类数组形式存在。

2、document.querySelector(‘div’) 通过CSS选择器获取元素，符合匹配条件的第1个元素。

3、document.querySelectorAll(‘selector‘) 通过CSS选择器获取元素，以类数组形式存在。

类名操作

1、Node.classList.add(‘class‘) 添加class

2、Node.classList.remove(‘class‘) 移除class

3、Node.classList.toggle(‘class‘) 切换class，有则移除，无则添加

4、Node.classList.contains(‘class‘) 检测是否存在class

自定义属性

1、自定义属性格式：data-*=""，例如data-info="informant"。

2、自定义属性获取：上例，通过Node.dataset[‘info‘] 我们便可以获取到自定义的属性值informant

3、Node.dataset是以类对象形式存在的当我们如下格式设置时，则需要以驼峰格式才能正确获取：data-my-name="itcast"，获取Node.dataset[‘myName‘]

时间： 2024-10-15 08:45:23

html5——DOM扩展的相关文章

HTML5 DOM扩展

DOM相对应Html5的扩展 一.选择符API 1. querySelector()方法 :接收一个CSS选择符 ,返回与该模式匹配的第一个元素,若没有匹配到返回null. 其中通过Document类型调用querySelector()方法时,会在文档元素范围内查找匹配元素: 如var body =  document.querySelector("body"); 通过Element类型调用querySelector()时,只会在该元素后代元素的范围内查找匹配元素 如var img =

DOM扩展札记

Selector API HTML5 DOM扩展 Element Traversal规范 Selector API 众多JavaScript库中,最常用的一个功能就是根据css选择符选择与某个模式匹配的DOM元素 Selector API Level1的核心是两个方法: querySelector.querySelectorAll 可以通过Document及Element的实例来调用他们.当使用Element调用时,首先会在整个文章中查询,然后取出在Element子节点中的元素返回.如果传入了不

javascript高级程序设计 第十一章--DOM扩展

javascript高级程序设计 第十一章--DOM扩展DOM最主要的扩展就是选择符API.HTML5和Element Traversal Selectors API:定义了两个方法 querySelector() 和 querySelectorAll(),能够基于CSS选择符从DOM中取得元素.querySelector()方法接收一个CSS选择符,返回该模式匹配的第一个元素,querySelectorAll()接收的参数一样,但是返回NodeList实例: matchesSelector()

JavaScript学习 八、DOM扩展

对DOM的两个主要扩展是Selectors API(选择符API)和HTML5.这两个扩展都是源自开发社区.此外还有一个不那么因为瞩目的ELement Traversal(元素遍历)规范.为DOM添加了一些属性. 选择符API 众多JavaScript 库中最常用的一项功能,就是根据CSS选择符选择与某个模式匹配的DOM元素. 实际上 jQuery 的核心就是通过CSS选择符查询DOM 文档取得元素的引用,从而抛开了 getElementById() 和 getElementsByTagName

DOM扩展学习笔记

对DOM的两个主要扩展是Selectors API(选择符API)和HTML5,还有一个不太瞩目的Element Traversal元素遍历规范为DOM添加了一些属性,另外还有一些专有扩展. 选择符API 元素遍历 HTML5 专有扩展 选择符API 让浏览器原生支持css查询,原理就是所有实现这一功能的JavaScript库都会写一个基础的CSS解析器,然后再使用已有的DOM方法查询文档并找到匹配的节点.当把这个功能变成原生API后,解析和树查询操作可以在浏览器内部通过编译后的代码来完成,极大

DOM扩展：DOM API的进一步增强[总结篇-下]

本文承接<DOM扩展:DOM API的进一步增强[总结篇-上]>,继续总结DOM扩展相关的功能和API. 3.6 插入标记 DOM1级中的接口已经提供了向文档中插入内容的接口,但是在给文档插入大量HTML标记的时候操作还是很繁杂的,每次插入一个元素,不仅要调用创建元素和文本节点的接口,还要调用appendChild等向文档中添加元素的接口,而且在添加时还要按照正确的顺序.而如果使用插入标记的方法,直接向文档中插入HTML字符串,由执行环境自动解析HTML字符串并创建相应的节点并添加到文档中,这

JavaScript的DOM扩展

虽然 DOM 为与 XML 及 HTML 文档交互制定了一系列核心 API,但仍然有几个规范对标准的 DOM进行了扩展.这些扩展中有很多原来是浏览器专有的,但后来成为了事实标准,于是其他浏览器也都提供了相同的实现.本章介绍的三个这方面的规范如下. 1 Selectors API,定义了两个方法,让开发人员能够基于 CSS 选择符从 DOM中取得元素,这两个方法是 querySelector() 和 querySelectorAll() . 2 Element Traversal,为 DOM 元素

10. javacript高级程序设计-DOM扩展

1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有匹配的NodeList元素 1.2 HTML5 1.2.1 与类相关的扩充 l getElementsByClassName() 接收一个参数,一个包含一或者多个类名的字符串,返回带有指定类的所有元素的NodeList l classList属性,add(value),contains(value)

JavaScript学习笔记（十一）---- DOM扩展

(一)DOM扩展 对DOM的主要的扩展是SelectorsAPI(选择符API)和HTML5,还有一个Element Travesal规范. 1.选择符API jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用,从而抛开了getElementById( ) 和 getElementsByTagName( ). Selectors API Level 1的核心是两个方法:querySelector( )和 querySelectorAll( ). querySelector( ):