一、选择符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. JavaScript DOM编程艺术-学习笔记（第十二章）

    第十二章 1.本章是综合前面章节的所有东西的,一个综合实例 2.流程:①项目简介:a.获取原始资料(包括文本.图片.音视频等) b.站点结构(文件目录结构) c.页面(文件)结构 ②设计(切图) ③c ...

  2. css display属性介绍

    none此元素不会被显示. block此元素将显示为块级元素,此元素前后会带有换行符. inline默认.此元素会被显示为内联元素,元素前后没有换行符. inline-block行内块元素.(CSS2 ...

  3. LEK-Introduction-Installation-Usage-new

    LEK is a set of tools which can take data from any source and search, analyze, and visualize it in r ...

  4. URAL 6089 Nine

    水题,找误差范围之内9最多的时间,如果有多个,选择误差最小的一个,如果还有多个,选择字典序最小的一个.同一个时间可以有不同的表示方法,例如60:15也可以表示为59:75. #include<s ...

  5. IE6/IE7浏览器中"float: right"自动换行的解决方法

    在项目中,调试IE6/IE7,发现一个bug,那就是:在同一个div包裹着,几个块级元素并列为一行的情况下,设置了float:right的块级元素会自动换行: 代码如下: <p> < ...

  6. [ An Ac a Day ^_^ ] UVALive 2635 Housing Complexes 二分图最大匹配

    快要比赛了 看看原来做过的题 感觉这道题当时做的还是挺费劲的 所以发一下 题意: 一个土豪要建别墅 因为有的地区地方不够大 所以要拆屋子 每个地方的字母就是对应开发商的地盘 没有字母的就是自由土地 一 ...

  7. aspose 解决插入html后字体问题

    /// <summary> /// 添加html /// </summary> /// <param name="strText"></p ...

  8. 1010 Robot Motion

    Problem Description A robot has been programmed to follow the instructions in its path. Instructions ...

  9. RFC3489 STUN之客户端所处环境探测流程与部分属性含义说明

    1 STUN客户端所处环境探测流程 1.1 流程图 1.2 流程图中Binding请求类型说明 类型1:Binding请求消息中不设置CHANGE-REQUEST,或若设置其相应更改IP与端口标志位都 ...

  10. mysql5.6 online ddl—索引

    尝试对mysiam表(1500万)删除索引失败 #uk表字段类型比较简单,都是int/tinyint/timestamp类型. CREATE TABLE `uk` (  `id` int(11) NO ...