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),remove(value),toggle(value)

classList获取元素的所有类属性,并通过对应的方法操作对应的类

1.2.2 焦点管理

document.activeElement属性指向当前文档中获得焦点的元素

document.hasFocus()判断当前文档是否获取了焦点

1.2.3 HTMLDocument变化

l readyState属性:

loading:正在加载文档

complete:已经加载完文档

l 兼容模式

标准模式:document.compatMode == “CSS1Compat”

混杂模式:document.compatMode == “BackCompat”

l head属性

var head = document.head || document.getElementsByTagName(“head”)[0];

1.2.4 字符集属性

document.charset 表示当前文档中使用的字符集

1.2.5 自定义属性

HTML5可以为元素添加非标准属性,但要添加前缀data-

获取设置appId自定义属性

var appId = div.dataset.appId;

div.dataset.appId = 23456;

1.2.6 插入标记

l innerHtml:返回当前元素所有子节点对应的HTML标记

l outerHtml:返回当前元素以及对应的所有子元素的HTML标记

1.2.7 scrollIntoView

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

时间: 2024-10-09 20:53:01

10. javacript高级程序设计-DOM扩展的相关文章

10. javacript高级程序设计-DOM

1. DOM DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口) 1.1 节点层次 DOM可以将任何HTML和XML文档描绘成一个由多层节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息及标记. 1.1.1 Node类型 DOM1中定义了一个Node接口,该接口由DOM中所有的节点类型实现,这个Node接口在JavaScript中作为Node类型实现. 每个节点都有一个nodeType属性,因此所有节点类型都共享着相同的基本属性和方法 每个节点都有

3. javacript高级程序设计-基本概念

1.1 语法 ECMAScript借鉴了C和其他类C语言的语法 1.1.1 区分大小写 ECMAScript中的一切(变量,函数和操作符)都是区分大小写的,变量test和Test是不同的变量 1.1.2 标识符 标识符,就是指变量,函数和属性的名字,或者函数的参数.标识符可以是按照以下格式规则组合起来的一或多个字符 (1). 第一个字符必须是一个字母,下划线或者一个美元符号 (2). 其他字符可以是字母.下划线.美元符号或数字 标识符中的字母也可以包含扩展的ASCII或者Unicode字母字符

12. javacript高级程序设计-DOM2和DOM3

1. DOM2和DOM3 DOM2级规范定义了一些模块,用于增强DOM1级.“DOM2级核心”为不同的DOM类型引入了一些与XML命名空间有关的方法,这些变化只在使用XML或者XHTML,对于HTML文档没有实际意义.除了与XML命名空间有关方法外,“DOM2核心”还定义了以编程方式创建Document实例的方法,也支持了创建DocumentType对象. “DOM2级样式”模块主要针对操作元素的样式信息而开发,其简要特性总结如下: l 每个元素都有一个关联的style样式,可以用来确定和修改行

24. javacript高级程序设计-最佳实践

1. 最佳实践 l 来自其他语言的代码约定可以用于决定何时进行注释,以及如何进行缩进,不过JavaScript需要针对其松散类型的性质创造一些特殊的约定 l javascript应该定义行为,html应该定义内容,css应该定义外观 l 这些职责上的混乱会导致难以调试的错误和维护上的问题 l javascript执行所花费的事件直接影响到web页面的性能 l DOM交互的开销很大,需要限制DOM操作的次数 l 可以考虑将javascript文件合并为单个文件 l 使用压缩器将文件尽可能变小 l

1. javacript高级程序设计-JavaScript简介

1. JavaScript简介 JavaScript诞生于1995年,由Netscape公司布兰登·艾奇开发,JavaScript主要包括三个部分: (1). ECMAScript,由ECMA-262定义,提高核心语言功能 (2). 文档对象模型(DOM),提供访问和操作网页内容的方法和接口 (3). 浏览器对象模型(BOM),提供与浏览器交互的方法和接口

13. javacript高级程序设计-事件

1. 事件 1.1 事件流 事件流描述的是从页面中接受事件的顺序,IE的事件是冒泡流,而Netscape Communicator的事件流是事件捕捉流. 1.1.1 事件冒泡 <!DOCTYPE html> <html> <title>xxx</title> <body> <div id="myDiv">click me</div> </body> </html> 如果你点击了页

21. javacript高级程序设计-Ajax与Comet

1. Ajax与Comet 1.1 XMLHttpRequest对象 IE5是第一款引入XHR对象的浏览器,IE5中是通过MSXML库中的一个ActiveX对象实现的.因此在IE中可能存在MSXML2.XMLHttp, MSXML2.XMLHttp.3.0, MSXML2.XMLHttp.6.0,要支持旧浏览器,可以使用如下函数: function createXHR(){ if(typeof XMLHttpRequest != 'undefined'){ return new XMLHttpR

22. javacript高级程序设计-高级技巧

1. 高级技巧 1.1 函数 l 可以使用惰性载入函数,将任何分支推迟到第一个调用函数的时候 l 函数绑定可以让你创建始终在指定环境中运行的函数,同时函数柯里化可以让你创建已经填写了某些参数的函数 l 将绑定和柯里化组合起来,可以在任意环境中以任意参数执行函数的方法 1.2 对象 ECMAScript5允许通过以下几种方式来创建防篡改对象 l 不可扩展对象,不允许给对象添加新的属性或者方法 l 密封的对象,也是不可扩展对象,不允许删除已有的属性和方法 l 冻结的对象,也是密封对象,不允许重新对象

7. javacript高级程序设计- 函数表达式

1. 函数表达式 1.1 函数定义 函数定义的方式有两种:一种是函数声明,另一种就是函数表达式. (1). 函数声明:函数声明的重要特征就是函数声明提示,函数声明会在函数执行前执行 function functionName(arg0,arg1,arh2){ //函数体 } (2). 函数表达式 var functionName = function (arg0,arg1,arh2){ //函数体 } 1.2 递归 递归函数是在一个函数通过名字调用自身的情况下构成的,例如: function f