DOM扩展

1.选择符API

querySelector()方法      //类似于JQuery的$()方法

querySelectorAll()方法  

matchesSelector()方法:接收一个CSS的选择符,如果调用元素与选择符匹配,返回true,否则,返回false。

2.对于元素间的空格,浏览器会返回文本节点。导致了在使用childNodes和firstNodes等属性时的行为不一致。

所以DOM元素添加了一下5个属性

childELementCount:返回子元素

firstElementChild:指向第一个元素

lastELementChild:指向最后一个元素

previousELementSibling:指向前一个同辈元素

nextELementSibling:指向后一个同辈元素 

3.classList属性(列表是由类名构成的)

add:将给定字符串添加到列表中,如果值已经存在了,就不添加了

contain:表示列表中是否存在给定的值,如果存在则返回true,否则返回false

remove:从列表中删除给定的字符串

toggle:如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它 

4.焦点管理

document.activeELement属性

document.hasFocus()方法

5.插入标记

innerHTML:返回与调用元素的所以子节点(包括元素、注释、和文本节点)对应额HTML标记

outHTML:返回调用它得元素及其所以得子节点的HTML标签。(与innerHTML的区别是会包括元素本身)

insertAdjacentHTML():接收两个从参数,插入位置和要插入的HTML文本

  “beforebegin”,在当前元素之前插入一个紧邻的同辈元素

  “afterbegin”,在当前元素之下插入一个新的子元素或者在第一个子元素之前插入新的子元素

  “beforeend”,在当前元素之下插入一个新的子元素或者在最后一个子元素之后插入新的子元素

  “afterend”,在当前元素之后插入一个紧邻的同辈元素

6.children属性

解决浏览器在处理文本节点中的空白字符的差异

children属性时HTMLCollection的实例,只包含元素中同样还是元素的子节点

7.插入文本

innerText:可以操作元素中包含的所以文本内容,包括子文档中的文本

outerText: 不建议使用

8.滚动

scrollIntoView():可以在所以的HTML元素上调用,通过滚动浏览器窗口或者某个容器元素,调用元素就可以出现在视口中。

9.其他

标准模式:document.compatMode的值为“CSS1Compat”

混合模式:document.compatMode的值为“BackCompat”

给元素自定义添加非标准属性:data-前缀

contains(): 检查某个节点是不是另一个节点的后代

时间: 2024-09-30 09:31:19

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扩展

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

JavaScript高级程序设计学习笔记--DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口). Document类型 文档的子节点 虽然DOM标准规定Document节点的子节点可以是DocumentType,Element,ProcessingInstruction或Comment,但还有两个内置的访问其子节点的快捷方式.第一个就是documnetElement属性,该属性始终指向HTML页面中的<html>元素.另一个就是通过childNodes列表访问文档元素,但通过documentElement属性则

javascript高级程序设计--简介

工作一年多了,这一年的收获真是丰富.结识了许多同事朋友,技术网友,学了许多新的技术知识:当然还要感谢我的朋友们,感谢我的第一家公司. 大学主要学的.net,刚毕业那会对javascript的了解几乎就是空白,后来有机会接触了百度地图,开始了javascript学习之路.现在在项目中也能熟练的使用javascript,jquery等技术,可总感觉缺点什么,有些东西你知道是什么,也能写出来,但就是不知道他是什么,他的原理是什么样的.所以才有了现在的想法,系统的学习一遍javascript.---文笔

javascript高级程序设计 第十三章--事件

javascript高级程序设计 第十三章--事件js与HTML的交互就是通过事件实现的,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流:事件流描述的是从页面中接收事件的顺序,IE的是事件冒泡流,Netscape的是事件捕获流,这个两个是完全相反的事件流概念. 事件冒泡:由最具体的元素接收,然后逐级向上传播到更高级的节点,即事件沿DOM树向上传播,直到document对象. 事件捕获:不大具体的节点应该更早接收到事件,相当于沿DOM节点树向下级传播直到事件的实际目标,在浏览器中,是

JavaScript高级程序设计35.pdf

遍历 "DOM2级遍历和范围"模块定义了两个用于辅助完成顺序遍历DOM结构的类型:NodeIterator和TreeWalker,两个类型能够基于给定的起点对DOM结构执行深度优先(depth-first)的遍历操作,与DOM兼容的浏览器都可以访问到这些类型的对象,IE不支持DOM遍历 使用以下代码检测浏览器对DOM2级的遍历支持情况: var supportsTraversals=document.implementation.hasFeature("Traversal&q

JavaScript高级程序设计38.pdf

比较DOM范围 在有多个范围的情况下,可以使用compareBoundaryPoints()方法来确认这些范围是否有公共的边界,接收两个参数:表示比较方式的常量值和要比较的范围 常量如下 Range.START_TO_START(0):比较第一个范围和第二个范围的起点:Range.START_TO_END(1):比较第一个范围的起点和第二个范围的终点:Range.END_TO_END(2):比较第一个范围和第二个范围的终点:Range.END_TO_START(3):比较第一个范围的终点和第二个

JavaScript高级程序设计39.pdf

第13章 事件 JavaScript与HTML之间的交互式通过事件来实现的. 事件流 事件流描述的是从页面中接收事件的顺序,IE和Netscape提出了完全相反的事件流概念,IE是事件冒泡流,Netscape是事件捕获流 事件冒泡 click一个<div>元素,click事件沿DOM树向上传播,在每一级节点都会发生,直至传播到document对象,现代浏览器则将事件冒泡到window对象 事件捕获 click一个<div>元素,click事件沿DOM树依次向下,直到传播到事件的实际

javascript高级程序设计 第一章--javascript简介

javascript高级程序设计 第一章--javascript简介Netscape开发的javascript最初的目的就是处理由服务器负责的一些输入验证操作,而在js问世之前,必须                    把表单数据发到服务器端用户才能得到反馈.如今的js不再局限于简单的数据验证,而且具备了与浏览器窗口及其内容等所有方面的交互能力,js已经发展成功能全面的面向客户端的编程语言.javascript由Netscape公司开发,原名Livescript,是为了迎合当时的java热,所

JavaScript高级程序设计(读书笔记)(六)

本笔记汇总了作者认为"JavaScript高级程序设计"这本书的前七章知识重点,仅供参考. 第六章 面向对象的程序设计 面向对象(Object-Oriented, OO)的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但ECMAScript中没有类的概念,因此它的对象也与基于类的语言中的对象有所不同.ECMAScript把对象定义为:"无序属性的集合,其属性可以包含基本值.对象或者函数."严格来讲,这就相当于说对象是一组没