一、选择符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. 理解iaas paas saas三种云服务区别

    其实搞懂这个问题也不难,我们可以把云计算理解成一栋大楼,而这栋楼又可以分为顶楼.中间.低层三大块.那么我们就可以把Iass(基础设施).Pass(平台).Sass(软件)理解成这栋楼的三部分.基础设施 ...

  2. UNICODE与ANSI的区别

    什么是ANSI,什么又是UNICODE呢?其实这是两种不同的编码方式标准,ANSI中的字符采用8bit,而UNICODE中的字符采用16bit.(对于字符来说ANSI以单字节存放英文字符,以双字节存放 ...

  3. HDU 2177 取(2堆)石子游戏 （威佐夫博弈）

    题目思路:威佐夫博弈: 当当前局面[a,b]为奇异局时直接输出0 否则: 1.若a==b,输出(0 0): 2.将a,b不停减一,看能否得到奇异局,若有则输出: 3.由于 ak=q*k(q为黄金分割数 ...

  4. 记录下actionbar的翻译

    http://blog.csdn.net/xyz_lmn/article/details/8132420 嗯,actionbarSherLock不错,viewpagerIndicator也不错.

  5. centos6.5安装python3

    1.安装环境 #yum install gcc yum install zlib-devel yum install make 2.下载python版本 #wget http://www.python ...

  6. java 枚举类型和数据二进制等问题思考

    .以下代码的输出结果是什么? int X=100; int Y=200; System.out.println("X+Y="+X+Y); System.out.println(X+ ...

  7. gitignore git提交忽略文件

    从网上找的git忽略文件挺前面的,现在记录下来,以备后用: tomsuite.xml **pom.xml.releaseBackup release.properties gen */seed.txt ...

  8. 4、BufferedIn(out)putStream--->字节输入/输出流的缓冲区类（高效类：高效率读写）

    前言 字节流一次读写一个数组的速度明显比一次读写一个字节的速度快很多,这是加入了数组这样的缓冲区效果,java本身在设计的时候,也考虑到了这样的设计思想(装饰设计模式后面讲解),所以提供了字节缓冲区流 ...

  9. [妙味JS基础]第五课：函数传参、重用、价格计算

    知识点总结 函数传参,传的参数＝数据类型(即:数值.字符串.布尔.函数.对象.未定义) 通过传参来重用代码 1.尽量保证 HTML 代码结构一致,可以通过父级选取子元素 2.把核心主程序实现,用函数包 ...

  10. chrome、safari中的input或textarea

    1.去掉chrome.safari input或textarea在得到焦点时出现黄色边框的方法 input{ outline:0;} 2.去掉chrome.safari textarea右下角可拖动鼠 ...