`等)
-- `Attribute`:网页元素的属性(比如`class="right"`)
+- `Attr`:网页元素的属性(比如`class="right"`)
- `Text`:标签之间或标签包含的文本
- `Comment`:注释
- `DocumentFragment`:文档的片段
@@ -26,7 +26,7 @@ DOM 的最小组成单位叫做节点(node)。文档的树形结构(DOM
## 节点树
-一个文档的所有节点,按照所在的层级,可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点,下一层都是顶层节点的子节点,然后子节点又有自己的子节点,就这样层层衍生出一个金字塔结构,倒过来就像一棵树。
+一个文档的所有节点,按照所在的层级,可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点,下一层都是顶层节点的子节点,然后子节点又有自己的子节点,就这样层层衍生出一个金字塔结构,又像一棵树。
浏览器原生提供`document`节点,代表整个文档。
@@ -35,7 +35,7 @@ document
// 整个文档树
```
-文档的第一层只有一个节点,就是 HTML 网页的第一个标签``,它构成了树结构的根节点(root node),其他 HTML 标签节点都是它的下级节点。
+文档的第一层有两个节点,第一个是文档类型节点(``),第二个是 HTML 网页的顶层容器标签``。后者构成了树结构的根节点(root node),其他 HTML 标签节点都是它的下级节点。
除了根节点,其他节点都有三种层级关系。
@@ -44,4 +44,3 @@ document
- 同级节点关系(sibling):拥有同一个父节点的节点
DOM 提供操作接口,用来获取这三种关系的节点。比如,子节点接口包括`firstChild`(第一个子节点)和`lastChild`(最后一个子节点)等属性,同级节点接口包括`nextSibling`(紧邻在后的那个同级节点)和`previousSibling`(紧邻在前的那个同级节点)属性。
-
diff --git a/docs/dom/mutationobserver.md b/docs/dom/mutationobserver.md
index c3ea8af..0715565 100644
--- a/docs/dom/mutationobserver.md
+++ b/docs/dom/mutationobserver.md
@@ -36,7 +36,7 @@ var observer = new MutationObserver(function (mutations, observer) {
### observe()
-`observe`方法用来启动监听,它接受两个参数。
+`observe()`方法用来启动监听,它接受两个参数。
- 第一个参数:所要观察的 DOM 节点
- 第二个参数:一个配置对象,指定所要观察的特定变动
@@ -44,7 +44,7 @@ var observer = new MutationObserver(function (mutations, observer) {
```javascript
var article = document.querySelector('article');
-var options = {
+var options = {
'childList': true,
'attributes':true
} ;
@@ -52,7 +52,7 @@ var options = {
observer.observe(article, options);
```
-上面代码中,`observe`方法接受两个参数,第一个是所要观察的DOM元素是`article`,第二个是所要观察的变动类型(子节点变动和属性变动)。
+上面代码中,`observe()`方法接受两个参数,第一个是所要观察的DOM元素是`article`,第二个是所要观察的变动类型(子节点变动和属性变动)。
观察器所能观察的 DOM 变动类型(即上面代码的`options`对象),有以下几种。
@@ -60,7 +60,7 @@ observer.observe(article, options);
- **attributes**:属性的变动。
- **characterData**:节点内容或节点文本的变动。
-想要观察哪一种变动类型,就在`option`对象中指定它的值为`true`。需要注意的是,必须同时指定`childList`、`attributes`和`characterData`中的一种或多种,若未均指定将报错。
+想要观察哪一种变动类型,就在`option`对象中指定它的值为`true`。需要注意的是,至少必须同时指定这三种观察的一种,若均未指定将报错。
除了变动类型,`options`对象还可以设定以下属性:
@@ -81,7 +81,7 @@ mutationObserver.observe(document.documentElement, {
});
```
-对一个节点添加观察器,就像使用`addEventListener`方法一样,多次添加同一个观察器是无效的,回调函数依然只会触发一次。但是,如果指定不同的`options`对象,就会被当作两个不同的观察器。
+对一个节点添加观察器,就像使用`addEventListener()`方法一样,多次添加同一个观察器是无效的,回调函数依然只会触发一次。如果指定不同的`options`对象,以后面添加的那个为准,类似覆盖。
下面的例子是观察新增的子节点。
@@ -89,23 +89,24 @@ mutationObserver.observe(document.documentElement, {
var insertedNodes = [];
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
- for (var i = 0; i < mutation.addedNodes.length; i++) + for (var i = 0; i < mutation.addedNodes.length; i++) { insertedNodes.push(mutation.addedNodes[i]); - }) + } + }); + console.log(insertedNodes); }); -observer.observe(document, { childList: true }); -console.log(insertedNodes); +observer.observe(document, { childList: true, subtree: true }); ``` -### disconnect(),takeRecords() +### disconnect(),takeRecords() -`disconnect`方法用来停止观察。调用该方法后,DOM 再发生变动,也不会触发观察器。 +`disconnect()`方法用来停止观察。调用该方法后,DOM 再发生变动,也不会触发观察器。 ```javascript observer.disconnect(); ``` -`takeRecords`方法用来清除变动记录,即不再处理未处理的变动。该方法返回变动记录的数组。 +`takeRecords()`方法用来清除变动记录,即不再处理未处理的变动。该方法返回变动记录的数组。 ```javascript observer.takeRecords(); @@ -127,7 +128,7 @@ DOM 每次发生变化,就会生成一条变动记录(MutationRecord 实例 `MutationRecord`对象包含了DOM的相关信息,有如下属性: -- `type`:观察的变动类型(`attribute`、`characterData`或者`childList`)。 +- `type`:观察的变动类型(`attributes`、`characterData`或者`childList`)。 - `target`:发生变动的DOM节点。 - `addedNodes`:新增的DOM节点。 - `removedNodes`:删除的DOM节点。 @@ -189,7 +190,7 @@ mo.observe(element, options); ### 取代 DOMContentLoaded 事件 -网页加载的时候,DOM 节点的生成会产生变动记录,因此只要观察 DOM 的变动,就能在第一时间触发相关事件,因此也就没有必要使用`DOMContentLoaded`事件。 +网页加载的时候,DOM 节点的生成会产生变动记录,因此只要观察 DOM 的变动,就能在第一时间触发相关事件,也就没有必要使用`DOMContentLoaded`事件。 ```javascript var observer = new MutationObserver(callback); @@ -199,7 +200,7 @@ observer.observe(document.documentElement, { }); ``` -上面代码中,监听`document.documentElement`(即HTML节点)的子节点的变动,`subtree`属性指定监听还包括后代节点。因此,任意一个网页元素一旦生成,就能立刻被监听到。 +上面代码中,监听`document.documentElement`(即网页的``HTML 节点)的子节点的变动,`subtree`属性指定监听还包括后代节点。因此,任意一个网页元素一旦生成,就能立刻被监听到。
下面的代码,使用`MutationObserver`对象封装一个监听 DOM 生成的函数。
@@ -253,6 +254,7 @@ observer.observe(document.documentElement, {
})(this);
+// 使用方法
ready('.foo', function(element){
// ...
});
diff --git a/docs/dom/node.md b/docs/dom/node.md
index 6ed7d65..fe5c35d 100644
--- a/docs/dom/node.md
+++ b/docs/dom/node.md
@@ -68,7 +68,7 @@ div.nodeName // "DIV"
`nodeValue`属性返回一个字符串,表示当前节点本身的文本值,该属性可读写。
-只有文本节点(text)和注释节点(comment)有文本值,因此这两类节点的`nodeValue`可以返回结果,其他类型的节点一律返回`null`。同样的,也只有这两类节点可以设置`nodeValue`属性的值,其他类型的节点设置无效。
+只有文本节点(text)、注释节点(comment)和属性节点(attr)有文本值,因此这三类节点的`nodeValue`可以返回结果,其他类型的节点一律返回`null`。同样的,也只有这三类节点可以设置`nodeValue`属性的值,其他类型的节点设置无效。
```javascript
// HTML 代码如下
@@ -102,7 +102,7 @@ document.getElementById('foo').textContent = 'GoodBye!
';
上面代码在插入文本时,会将``标签解释为文本,而不会当作标签处理。
-对于文本节点(text)和注释节点(comment),`textContent`属性的值与`nodeValue`属性相同。对于其他类型的节点,该属性会将每个子节点的内容连接在一起返回,但是不包括注释节点。如果一个节点没有子节点,则返回空字符串。
+对于文本节点(text)、注释节点(comment)和属性节点(attr),`textContent`属性的值与`nodeValue`属性相同。对于其他类型的节点,该属性会将每个子节点(不包括注释节点)的内容连接在一起返回。如果一个节点没有子节点,则返回空字符串。
文档节点(document)和文档类型节点(doctype)的`textContent`属性为`null`。如果要读取整个文档的内容,可以使用`document.documentElement.textContent`。
@@ -145,8 +145,8 @@ d === document // true
```javascript
// HTML 代码如下
//
hello
world
-var div1 = document.getElementById('d1');
-var div2 = document.getElementById('d2');
+var d1 = document.getElementById('d1');
+var d2 = document.getElementById('d2');
d1.nextSibling === d2 // true
```
@@ -175,8 +175,8 @@ while (el !== null) {
```javascript
// HTML 代码如下
// hello
world
-var div1 = document.getElementById('d1');
-var div2 = document.getElementById('d2');
+var d1 = document.getElementById('d1');
+var d2 = document.getElementById('d2');
d2.previousSibling === d1 // true
```
@@ -295,7 +295,7 @@ test.isConnected // true
### Node.prototype.appendChild()
-`appendChild`方法接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点。该方法的返回值就是插入文档的子节点。
+`appendChild()`方法接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点。该方法的返回值就是插入文档的子节点。
```javascript
var p = document.createElement('p');
@@ -304,17 +304,16 @@ document.body.appendChild(p);
上面代码新建一个``节点,将其插入`document.body`的尾部。
-如果参数节点是 DOM 已经存在的节点,`appendChild`方法会将其从原来的位置,移动到新位置。
+如果参数节点是 DOM 已经存在的节点,`appendChild()`方法会将其从原来的位置,移动到新位置。
```javascript
-var element = document
- .createElement('div')
- .appendChild(document.createElement('b'));
+var div = document.getElementById('myDiv');
+document.body.appendChild(div);
```
-上面代码的返回值是``,而不是``。
+上面代码中,插入的是一个已经存在的节点`myDiv`,结果就是该节点会从原来的位置,移动到`document.body`的尾部。
-如果`appendChild`方法的参数是`DocumentFragment`节点,那么插入的是`DocumentFragment`的所有子节点,而不是`DocumentFragment`节点本身。返回值是一个空的`DocumentFragment`节点。
+如果`appendChild()`方法的参数是`DocumentFragment`节点,那么插入的是`DocumentFragment`的所有子节点,而不是`DocumentFragment`节点本身。返回值是一个空的`DocumentFragment`节点。
### Node.prototype.hasChildNodes()
@@ -475,7 +474,7 @@ nodeA.contains(nodeA) // true
### Node.prototype.compareDocumentPosition()
-`compareDocumentPosition`方法的用法,与`contains`方法完全一致,返回一个七个比特位的二进制值,表示参数节点与当前节点的关系。
+`compareDocumentPosition`方法的用法,与`contains`方法完全一致,返回一个六个比特位的二进制值,表示参数节点与当前节点的关系。
二进制值 | 十进制值 | 含义
---------|------|-----
@@ -539,7 +538,7 @@ p1.isSameNode(p1) // true
### Node.prototype.normalize()
-`normailize`方法用于清理当前节点内部的所有文本节点(text)。它会去除空的文本节点,并且将毗邻的文本节点合并成一个,也就是说不存在空的文本节点,以及毗邻的文本节点。
+`normalize`方法用于清理当前节点内部的所有文本节点(text)。它会去除空的文本节点,并且将毗邻的文本节点合并成一个,也就是说不存在空的文本节点,以及毗邻的文本节点。
```javascript
var wrapper = document.createElement('div');
@@ -558,7 +557,7 @@ wrapper.childNodes.length // 1
### Node.prototype.getRootNode()
-`getRootNode`方法返回当前节点所在文档的根节点,与`ownerDocument`属性的作用相同。
+`getRootNode()`方法返回当前节点所在文档的根节点`document`,与`ownerDocument`属性的作用相同。
```javascript
document.body.firstChild.getRootNode() === document
@@ -567,3 +566,9 @@ document.body.firstChild.getRootNode() === document.body.firstChild.ownerDocumen
// true
```
+该方法可用于`document`节点自身,这一点与`document.ownerDocument`不同。
+
+```javascript
+document.getRootNode() // document
+document.ownerDocument // null
+```
diff --git a/docs/dom/nodelist.md b/docs/dom/nodelist.md
index b646b8e..bda3939 100644
--- a/docs/dom/nodelist.md
+++ b/docs/dom/nodelist.md
@@ -63,11 +63,11 @@ children.length // 19
`length`属性返回 NodeList 实例包含的节点数量。
```javascript
-document.getElementsByTagName('xxx').length
+document.querySelectorAll('xxx').length
// 0
```
-上面代码中,`document.getElementsByTagName`返回一个 NodeList 集合。对于那些不存在的 HTML 标签,`length`属性返回`0`。
+上面代码中,`document.querySelectorAll`返回一个 NodeList 集合。对于那些不存在的 HTML 标签,`length`属性返回`0`。
### NodeList.prototype.forEach()
@@ -136,7 +136,7 @@ for (var entry of children.entries()) {
`HTMLCollection`是一个节点对象的集合,只能包含元素节点(element),不能包含其他类型的节点。它的返回值是一个类似数组的对象,但是与`NodeList`接口不同,`HTMLCollection`没有`forEach`方法,只能使用`for`循环遍历。
-返回`HTMLCollection`实例的,主要是一些`Document`对象的集合属性,比如`document.links`、`docuement.forms`、`document.images`等。
+返回`HTMLCollection`实例的,主要是一些`Document`对象的集合属性,比如`document.links`、`document.forms`、`document.images`等。
```javascript
document.links instanceof HTMLCollection // true
@@ -179,7 +179,7 @@ var img0 = c.item(0);
### HTMLCollection.prototype.namedItem()
-`namedItem`方法的参数是一个字符串,表示`id`属性或`name`属性的值,返回对应的元素节点。如果没有对应的节点,则返回`null`。
+`namedItem`方法的参数是一个字符串,表示`id`属性或`name`属性的值,返回当前集合中对应的元素节点。如果没有对应的节点,则返回`null`。
```javascript
// HTML 代码如下
@@ -189,3 +189,5 @@ var pic = document.getElementById('pic');
document.images.namedItem('pic') === pic // true
```
+`Collection.namedItem('value')`等同于`Collection['value']`。
+
diff --git a/docs/dom/parentnode.md b/docs/dom/parentnode.md
index e18f851..a4183a1 100644
--- a/docs/dom/parentnode.md
+++ b/docs/dom/parentnode.md
@@ -1,10 +1,10 @@
# ParentNode 接口,ChildNode 接口
-节点对象除了继承 Node 接口以外,还会继承其他接口。`ParentNode`接口表示当前节点是一个父节点,提供一些处理子节点的方法。`ChildNode`接口表示当前节点是一个子节点,提供一些相关方法。
+节点对象除了继承 Node 接口以外,还拥有其他接口。`ParentNode`接口表示当前节点是一个父节点,提供一些处理子节点的方法。`ChildNode`接口表示当前节点是一个子节点,提供一些相关方法。
## ParentNode 接口
-如果当前节点是父节点,就会继承`ParentNode`接口。由于只有元素节点(element)、文档节点(document)和文档片段节点(documentFragment)拥有子节点,因此只有这三类节点会继承`ParentNode`接口。
+如果当前节点是父节点,就会混入了(mixin)`ParentNode`接口。由于只有元素节点(element)、文档节点(document)和文档片段节点(documentFragment)拥有子节点,因此只有这三类节点会拥有`ParentNode`接口。
### ParentNode.children
@@ -54,9 +54,11 @@ document.body.childElementCount // 13
### ParentNode.append(),ParentNode.prepend()
-`append`方法为当前节点追加一个或多个子节点,位置是最后一个元素子节点的后面。
+**(1)ParentNode.append()**
-该方法不仅可以添加元素子节点,还可以添加文本子节点。
+`append()`方法为当前节点追加一个或多个子节点,位置是最后一个元素子节点的后面。
+
+该方法不仅可以添加元素子节点(参数为元素节点),还可以添加文本子节点(参数为字符串)。
```javascript
var parent = document.body;
@@ -78,17 +80,25 @@ var p = document.createElement('p');
parent.append('Hello', p);
```
-注意,该方法没有返回值。
+该方法没有返回值。
+
+注意,该方法与`Node.prototype.appendChild()`方法有三点不同。
+
+- `append()`允许字符串作为参数,`appendChild()`只允许子节点作为参数。
+- `append()`没有返回值,而`appendChild()`返回添加的子节点。
+- `append()`可以添加多个子节点和字符串(即允许多个参数),`appendChild()`只能添加一个节点(即只允许一个参数)。
-`prepend`方法为当前节点追加一个或多个子节点,位置是第一个元素子节点的前面。它的用法与`append`方法完全一致,也是没有返回值。
+**(2)ParentNode.prepend()**
+
+`prepend()`方法为当前节点追加一个或多个子节点,位置是第一个元素子节点的前面。它的用法与`append()`方法完全一致,也是没有返回值。
## ChildNode 接口
-如果一个节点有父节点,那么该节点就继承了`ChildNode`接口。
+如果一个节点有父节点,那么该节点就拥有了`ChildNode`接口。
### ChildNode.remove()
-`remove`方法用于从父节点移除当前节点。
+`remove()`方法用于从父节点移除当前节点。
```javascript
el.remove()
@@ -98,7 +108,9 @@ el.remove()
### ChildNode.before(),ChildNode.after()
-`before`方法用于在当前节点的前面,插入一个或多个同级节点。两者拥有相同的父节点。
+**(1)ChildNode.before()**
+
+`before()`方法用于在当前节点的前面,插入一个或多个同级节点。两者拥有相同的父节点。
注意,该方法不仅可以插入元素节点,还可以插入文本节点。
@@ -119,11 +131,13 @@ el.before(p, p1);
el.before(p, 'Hello');
```
-`after`方法用于在当前节点的后面,插入一个或多个同级节点,两者拥有相同的父节点。用法与`before`方法完全相同。
+**(2)ChildNode.after()**
+
+`after()`方法用于在当前节点的后面,插入一个或多个同级节点,两者拥有相同的父节点。用法与`before`方法完全相同。
### ChildNode.replaceWith()
-`replaceWith`方法使用参数节点,替换当前节点。参数可以是元素节点,也可以是文本节点。
+`replaceWith()`方法使用参数节点,替换当前节点。参数可以是元素节点,也可以是文本节点。
```javascript
var span = document.createElement('span');
diff --git a/docs/dom/text.md b/docs/dom/text.md
index ca86815..c4ebc10 100644
--- a/docs/dom/text.md
+++ b/docs/dom/text.md
@@ -118,7 +118,7 @@ pElementText.insertData(7, 'Hello ');
// 页面显示 Hello WHello
pElementText.replaceData(7, 5, 'World');
// 页面显示 Hello WWorld
-pElementText.substringData(7, 10);
+pElementText.substringData(7, 10);
// 页面显示不变,返回"World "
```
@@ -186,7 +186,7 @@ document.querySelector('ul').appendChild(docFrag);
```javascript
document
- .queryselector('ul')
+ .querySelector('ul')
.appendChild(docFrag.cloneNode(true));
```
@@ -208,4 +208,3 @@ function reverse(n) {
- `firstElementChild`:返回当前`DocumentFragment`对象的第一个子元素节点,如果没有则返回`null`。
- `lastElementChild`:返回当前`DocumentFragment`对象的最后一个子元素节点,如果没有则返回`null`。
- `childElementCount`:返回当前`DocumentFragment`对象的所有子元素数量。
-
diff --git a/docs/elements/a.md b/docs/elements/a.md
index 467fb74..6277fe7 100644
--- a/docs/elements/a.md
+++ b/docs/elements/a.md
@@ -22,7 +22,7 @@
```javascript
// HTML 代码如下
-// test
+// test
var a = document.getElementById('test');
a.hash // "#foo"
a.host // "example.com:8081"
@@ -46,7 +46,7 @@ a.username // "user"
```javascript
// HTML 代码如下
// test
-var a = document.getElementById('a');
+var a = document.getElementById('test');
a.accessKey = 'k';
```
diff --git a/docs/elements/button.md b/docs/elements/button.md
index 0faf84a..339857d 100644
--- a/docs/elements/button.md
+++ b/docs/elements/button.md
@@ -97,4 +97,3 @@ for(var i = 0; i < button.labels.length; i++) { **(17)HTMLButtonElement.willValidate** `HTMLButtonElement.willValidate`属性是一个布尔值,表示该按钮提交表单时是否将被校验,默认为`false`。该属性只读。 - diff --git a/docs/elements/form.md b/docs/elements/form.md index c02e47d..9d38305 100644 --- a/docs/elements/form.md +++ b/docs/elements/form.md @@ -11,7 +11,7 @@ - `target`:字符串,表示表单提交后,服务器返回的数据的展示位置。 - `action`:字符串,表示表单提交数据的 URL。 - `enctype`(或`encoding`):字符串,表示表单提交数据的编码方法,可能的值有`application/x-www-form-urlencoded`、`multipart/form-data`和`text/plain`。 -- `acceptCharset`:字符串,表示服务器所能接受的字符编码,多个编码格式之间或空格分隔。 +- `acceptCharset`:字符串,表示服务器所能接受的字符编码,多个编码格式之间使用逗号或空格分隔。 - `autocomplete`:字符串`on`或`off`,表示浏览器是否要对``控件提供自动补全。
- `noValidate`:布尔值,表示是否关闭表单的自动校验。
@@ -30,4 +30,3 @@ f.action = '/cgi-bin/some.cgi';
f.method = 'POST';
f.submit();
```
-
diff --git a/docs/elements/image.md b/docs/elements/image.md
index cdf3bd6..0f6b577 100644
--- a/docs/elements/image.md
+++ b/docs/elements/image.md
@@ -191,7 +191,7 @@ function loadImage() {
}
```
-图像加载完成,会触发`onerror`属性指定的回调函数。
+图像加载过程中发生错误,会触发`onerror`属性指定的回调函数。
```javascript
// HTML 代码为
diff --git a/docs/elements/input.md b/docs/elements/input.md
index f08f20b..fce544a 100644
--- a/docs/elements/input.md
+++ b/docs/elements/input.md
@@ -38,7 +38,8 @@
- `min`:字符串,表示该节点的最小数值或日期,且不能大于`max`属性。该属性可读写。
- `max`:字符串,表示该节点的最大数值或日期,且不能小于`min`属性。该属性可读写。
- `selectionStart`:整数,表示选中文本的起始位置。如果没有选中文本,返回光标在``元素内部的位置。该属性可读写。
-- `selectionEnd`:整数,表示选中文本的结束位置。如果没有选中文本,返回光标在``元素内部的位置。该属性可读写。- `selectionDirection`:字符串,表示选中文本的方向。可能的值包括`forward`(与文字书写方向一致)、`backward`(与文字书写方向相反)和`none`(文字方向未知)。该属性可读写。
+- `selectionEnd`:整数,表示选中文本的结束位置。如果没有选中文本,返回光标在``元素内部的位置。该属性可读写。
+- `selectionDirection`:字符串,表示选中文本的方向。可能的值包括`forward`(与文字书写方向一致)、`backward`(与文字书写方向相反)和`none`(文字方向未知)。该属性可读写。
### 复选框和单选框的特有属性
@@ -74,7 +75,18 @@
- `labels`:返回一个`NodeList`实例,代表绑定当前``节点的`