一、选择符API

SelectorsAPILevel 1的核心是两个方法：querySelector()和querySelectorAll()。

1. querySelector()方法

querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。请看下面的例子：

//取得body元素

var body = document.querySelector(“body”)；

//取得ID为”myDiv”的元素

var myDiv = document.querySelector(“#myDiv”)；

//取得类为”selected”的第一个元素

var selected = document.querySelector(“.selected”)；

//取得类为”button”的第一个图像元素

var img = document.body.querySelector(“img.button”)；

2. querySelectorAll()方法

querySelectorAll()方法接收的参数与querySelector()方法一样，都是一个CSS选择符，但返回的是所有匹配的元素而不是一个元素。返回的值是带有属性和方法的NodeList，而其底层实现则类似于一组元素的快照。能够调用querySelectorAll()方法的类型包括：Document、DocumentFragment和Element。下面是几个例子：

//取得某<div>中的所有<em>元素

var ems = document.getElementById(“myDiv”).querySelectorAll(“em”);

//取得类为”selected”的所有元素

var selecteds = document.querySelectorAll(“.selected”);

//取得所有<p>元素中的所有<strong>元素

var strongs = document.querySelectorAll(“p strong”);

3.matchesSelector()方法

Selectors API Level 2 规范为Element类型新增了一个方法matchesSelector()。这个方法接收一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true；否则返回false。看例子：

if ( document.body.matchesSelector( “body.page1” ) ) {

//true

}

在取得某个元素引用的情况下，使用这个方法能够方便地检测它是否会被querySelector()或querySelectorAll()方法返回。

二、元素遍历

Element Traversal API 为DOM元素添加以下5个属性：

childElementCount：返回子元素的个数。

firstElementChild：指向第一个子元素；firstChild的元素版。

lastElementChild：指向最后一个子元素；lastChild的元素版。

previousElementSibling：指向前一个同辈元素；previousSibling的元素版。

nextElementSibling：指向后一个同辈元素；nextSibling的元素版。

三、HTML5

1.与类相关的扩充：

①getElementsByClassName()方法

getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素NodeList。传入多个类名时，类名的先后顺序不重要。

②classList属性

在操作类名时，需要通过className属性添加、删除和替换类名。因为className中是一个字符串，所以即使只修改字符串一部分，也必须每次都设置整个字符串的值。这个新类型定义了如下方法：

add(value)：将给定的字符串值添加到表中。如果值已经存在，就不添加了。

contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。

remove(value)：从列表中删除给定的字符串。

toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

2.焦点管理

HTML5也添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性。这个属性始终会引用DOM中当前获得了焦点的元素。元素获得焦点的方式有页面加载、用户输入和在代码中调用focus()方法。

document.hasFocus()方法用于确定文档是否获得了焦点。

3.HTMLDocument的变化

①readyState属性

Document的readyState属性有两个可能的值：

loading，正在加载文档；

complete，已经加载完文档。

使用document.readyState的最恰当方式，就是通过它来实现一个指示文档已经加载完成的指示器。

②兼容模式

IE为document添加了一个名为compatMode的属性，这个属性就是为了告诉开发人员浏览器采用了哪种渲染模式。就像下面例子中所展示的那样，在标准模式下，

document.compatMode的值等于”CSS1Compat”，而在混杂模式下，document.compatMode的值等于”BackCompat”。

③head属性

作为document.body引用文档的<body>元素的补充，HTML5新增了document.head属性，引用文档的<head>元素。

4.字符集属性

①charset属性表示文档中实际使用的字符集，也可以用来指定新字符集。

②defaultCharset，表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么。

5.自定义数据属性

HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。添加了自定义属性之后，可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例，也就是一个名值对儿的映射。

6.插入标记

①innerHTML属性

在读模式下，innerHTML属性返回与调用元素的所有子节点对应的HTML标记。在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。

②outerHTML属性

在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签。在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。下面是一个例子：

<div  id=”content”>

<p>This is a<strong> paragraph </strong> with a list following it.</p>

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

</div>

如果在<div>元素上调用outerHTML，会返回与上面相同的代码，包括<div>本身。

③insertAdjacentHTML()方法

插入标记的最后一个新增方法是insertAdjacentHTML()方法。这个方法最早也是在IE中出现的，它接收两个参数：插入位置和要插入的HTML文本。第一个参数必须是下列值之一：

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

“afterbegin”，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；

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

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

7. scrollIntoView()方法

scrollIntoView()方法可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。如果给这个方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入false作为参数，调用元素会尽可能全部出现在视口中，不过顶部不一定平齐。

四、专有扩展

1.文档模式

页面的文档模式决定了可以使用什么功能。

2.children属性

处理文本节点中的空白符，与childNodes没有什么区别，即在元素只包含子元素节点时，这两个属性的值相同。下面是访问children属性的示例代码：

var childCount = element.children.length ;

var firstChild = element.children[0];

3.contains()方法

在实际开发中，经常需要知道某个节点是不是另一个节点的后代，IE因此率先引入了contains()方法，以便不通过在DOM文档树中查找即可获得这个信息。

4.插入文本

innerText属性：

通过innerText属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。在通过innerText读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。在通过innerText写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。

outerText属性：

在读取文本值时，outerText与innerText的结果完全一样。但在写模式下，outerText就完全不同了：outerText不只是替换调用它的元素的子节点，而是会替换整个元素。

5.滚动

scrollIntoViewIfNeeded（alignCenter）：只在当前元素在视口中不可见的情况下。

scrollByLines（lineCount）：将元素的内容滚动指定的行高，lineCount值可以是正值，也可以是负值。

scrollByPages（pageCount）：将元素的内容滚动指定的页面高度，具体高度由元素对象的高度决定。

需要注意的是：scrollIntoView（）和scrollIntoViewIfNeeded（）的作用对象时元素的容器，而scrollByLines（）和scrollByPages（）影响的则是元素自身。

JavaScript高级程序设计：第十一章的更多相关文章

  1. 《JavaScript高级程序设计》——第二章在HTML使用JavaScript

    这章讲的是JavaScript在HTML中的使用,也就是<script>元素的属性.书中详细讲了async.defer.src和type四个<script>的属性. 下面是对第 ...

  2. JavaScript高级程序设计第20章JSON 笔记 （学习笔记）

    第二十章 JSON 1.Json 可以表示三种类型的值: 1.简单值: 表示数值:5  表示字符串:“hello wrold”注表示字符串时必须使用双引号 2.对象: {“name”:“mi”,”ag ...

  3. JavaScript 高级程序设计 第5章引用类型 笔记

    第五章 引用类型 一.object类型 1.创建方法: 1.使用new 操作符创建 var person=new object() Person.name=”Nicholasa” Porson.age ...

  4. JavaScript高级程序设计第14章表单脚本 （学习笔记）

    第十四章 表单脚本 1.阻止默认表单提交 1.提交表单数据 1.使用type=submit提交按钮 2.使用submit():方法 注意:当用户点击提交按钮时,会触发submit事件,从而在这里我们有 ...

  5. 《JAVASCRIPT高级程序设计》第一章

    在使用调制解调器的时代,频繁的表单验证对客户端来说是一个很大的负担,javascript,作为一种专门进行表单验证的客户端脚本语言诞生了.到今天,javascript早已超越了当初设定的角色.Java ...

  6. 《JavaScript 高级程序设计》第一章：简介

    JavaScript 历史 JavaScript的诞生的主要是当时的 netspace 公司谋求为自己的浏览器 Navigator 添加一种脚本语言,以便在本地客户端进行一些行为操作,而这一功能的需求 ...

  7. 《JavaScript高级程序设计》——第一章JavaScript简介

    第一章主要讲了JavaScript的诞生和发展.刚刚接触JavaScript的我,似乎对这些内容并不感兴趣,快速看了一遍就开始去看第二章了. 看完第一章,收获也就是了解到JavaScript由ECMA ...

  8. javascript高级程序设计第5章，引用类型

    object类型: 创建object实列的方式有两种,一种是new()方法,一种是对象字面量表示法: 第一种法方:  var obj = new object(); obj.name = 'name' ...

  9. javascript高级程序设计第四章 变量、作用域和内存问题

    变量包含两种,,基本类型和引用类型 基本类型是指一些简单的字段: 引用类型是☞由多个值构成的对象  引用类型的值是保存在内存中的对象,在javascript中是不允许直接访问内存中的位置; 函数的参数 ...

  10. JavaScript高级程序设计：第九章

    第九章 一.使用能力检测 能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力.能力检测的基本模式如下: if ( object.propertyInQuestion ) { //使用object ...

随机推荐

  1. pythonRedis 订阅功能实现

    两天机器做,host要写订阅主机的ip,客户端发消息,服务端订阅消息 cat redis_connector.py #!/usr/bin/env python__author__ = 'Q.Li'im ...

  2. 调试技术（/proc、/sys、/dev、strace）

    一.在/proc中实现文件 当某个进程读取我们的/proc文件时,内核会分配一个内存页,即PAGE_SIZE字节的内存块.驱动程序可以将数据通过这个内存页返回到用户空间. 第一种方法,不采用seq_f ...

  3. open（）的模块

    对文件操作流程: 1.打开文件,得到文件句柄并赋值给一个变量 2.通过句柄对文件进行操作 3.关闭文件 mode can be: *  'r' 只读. * 'w' 写入,如果之前有就覆盖 * 'a' ...

  4. 基于jdk调用天气服务案例及问题

    问题1:解析wsdl文件时出现 把网络上的wsdl保存到本地,把圈起来的那段删掉 代码: 当返回结果不是String类型时: 输入城市编码去查找 所以: 问题二:如果把本地wsdl文件删除的话需要 三 ...

  5. 未知的生成错误 因为没有预加载，所以无法解析程序集 GalaSoft.MvvmLight

    使用wpf开发时,在ViewModel中引用了DevExpress注册的GalaSoft.MvvmLight命名空间,使用其ViewModelBase,在View界面中绑定事件时出现错误: 错误 13 ...

  6. 《Windows编程循序渐进》——进度条

    界面布局如下:

  7. WCF初接触实作

    我们通过实现一个简单的示例来对WCF有个直观而浅显的认识,希望对初次涉及WCF的朋友有所帮助. 可以简单地认为WCF程序分为4部分:契约.服务.宿主.客户端.我们通过一个例子来逐步完成各部分,示例程序 ...

  8. [妙味JS基础]第四课：JS数据类型、类型转换

    知识点总结 JS数据类型:number数字(NaN).string字符串.boolean布尔值.函数类型.object对象(obj.[].{}.null).undefined未定义 typeof 用来 ...

  9. sql表命名规范

    tb_new_Count 新闻内容表:首先表加tb_,如果是视图则加V_存储过程加_p. 下划线后面要大写. 切记.(萌萌的国庆要加油)

  10. MVC3+EF4.1学习系列(一)-------创建EF4.1 code first的第一个实例

    基于EF4.1 code first 简单的CRUD  园子中已经有很多了 ~~ 真不想再写这个了 可是为了做一个完整的小demo 从开始 到后面的一些简单重构 还是决定认真把这个写出来 争取写些别人 ...