/* ... */ 中放入代码，并不会执行。
有时候，可以很方便地临时禁用代码：
+=======
+The content of comments is ignored, so if we put code inside /* ... */, it won't execute.
+
+Sometimes it can be handy to temporarily disable a part of code:
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```js run
/* 注释代码
@@ -135,8 +201,13 @@ alert('Hello');
alert('World');
```
+<<<<<<< HEAD
```smart header="使用热键！"
在大多数的编辑器中，一行代码可以使用 `key:Ctrl+/` 热键进行单行注释，诸如 `key:Ctrl+Shift+/` 的热键可以进行多行注释（选择代码，然后按下热键）。对于 Mac 电脑，应使用 `key:Cmd` 而不是 `key:Ctrl`。
+=======
+```smart header="Use hotkeys!"
+In most editors, a line of code can be commented out by pressing the `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey). For Mac, try `key:Cmd` instead of `key:Ctrl`.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```
````warn header="不支持注释嵌套！"
@@ -154,6 +225,12 @@ alert( 'World' );
注释你的代码，请不要有任何迟疑。
+<<<<<<< HEAD
注释会增加代码总量，但这一点也不是问题。有很多工具可以在你部署到服务器之前缩减代码。这些工具会移除注释，所以注释不会出现在发布的脚本中。所以，注释对我们的生产没有任何负面影响。
在进一步的教程中，会有一章 true 和 false | `1` and `0` |
| `string` | 去掉首尾空格后的纯数字字符串中含有的数字。如果字符串只由空格字符组成，返回 `0`。
如果字符串不是纯数字，则返回 `NaN`。 | +======= +|
true and false | `1` and `0` |
+| `string` | Whitespaces from the start and end are removed. If the remaining string is empty, the result is `0`. Otherwise, the number is "read" from the string. An error gives `NaN`. |
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
例如：
@@ -79,31 +113,53 @@ alert( Number(true) ); // 1
alert( Number(false) ); // 0
```
+<<<<<<< HEAD
请注意 `null` 和 `undefined` 有点不同。`null` 变成数字 `0`，`undefined` 变成 `NaN`。
````smart header="加号'+' 连接字符串"
几乎所有的算术运算符都将值转换为数字，加号 `+` 是个例外。如果其中一个运算元是字符串，则另一个也会转换为字符串。
然后，连接两者：
+=======
+Please note that `null` and `undefined` behave differently here: `null` becomes zero while `undefined` becomes `NaN`.
+
+````smart header="Addition '+' concatenates strings"
+Almost all mathematical operations convert values to numbers. A notable exception is addition `+`. If one of the added values is a string, the other one is also converted to a string.
+
+Then, it concatenates (joins) them:
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```js run
alert( 1 + '2' ); // '12' (字符串在加号右边)
alert( '1' + 2 ); // '12' (字符串在加号左边)
```
+<<<<<<< HEAD
这仅仅发生在其中一方为字符串（译者注：或者双方都为字符串）的情况下。其他情况下会被转换为数字。
+=======
+This only happens when at least one of the arguments is a string. Otherwise, values are converted to numbers.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
````
## ToBoolean
转换为 boolean 类型是最为简单的一个。
+<<<<<<< HEAD
逻辑操作或显式调用 `Boolean(value)` 会触发 boolean 类型转换。
+=======
+It happens in logical operations (later we'll meet condition tests and other similar things) but can also be performed explicitly with a call to `Boolean(value)`.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
转换规则如下：
+<<<<<<< HEAD
- 假值，比如 `0`、空的字符串、`null`、`undefined` 和 `NaN` 变成 `false`。
- 其他值变成 `true`。
+=======
+- Values that are intuitively "empty", like `0`, an empty string, `null`, `undefined`, and `NaN`, become `false`.
+- Other values become `true`.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
比如：
@@ -115,8 +171,13 @@ alert( Boolean("hello") ); // true
alert( Boolean("") ); // false
```
+<<<<<<< HEAD
````warn header="请注意: 包含 0 的字符串 `\"0\"` 是 `true`"
一些编程语言（比如 PHP）视 `"0"` 为 `false`。但在 JavaScript 中，非空的字符串总是 `true`。
+=======
+````warn header="Please note: the string with zero `\"0\"` is `true`"
+Some languages (namely PHP) treat `"0"` as `false`. But in JavaScript, a non-empty string is always `true`.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```js run
alert( Boolean("0") ); // true
@@ -127,11 +188,19 @@ alert( Boolean(" ") ); // 空白, 也是 true (任何非空字符串是 true)
## 总结
+<<<<<<< HEAD
有三种常用的类型转换：转换为 string 类型、转换为 number 类型和转换为 boolean 类型。
**`ToString`** —— 输出内容时 `ToString` 发生转换，或通过 `String(value)` 进行显式转换。原始类型值的 string 类型转换通常是可预见的。
**`ToNumber`** -- 进行算术操作时发生 `ToNumber` 转换，或通过 `Number(value)` 进行显式转换。
+=======
+The three most widely used type conversions are to string, to number, and to boolean.
+
+**`ToString`** -- Occurs when we output something. Can be performed with `String(value)`. The conversion to string is usually obvious for primitive values.
+
+**`ToNumber`** -- Occurs in math operations. Can be performed with `Number(value)`.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
`ToNumber` 转换遵循以下规则：
@@ -142,7 +211,11 @@ alert( Boolean(" ") ); // 空白, 也是 true (任何非空字符串是 true)
|true / false | `1 / 0` |
| `string` | 字符串“按原样读取”，两端的空白被忽略。空字符串变成 `0`。出错变成 `NaN`。 |
+<<<<<<< HEAD
**`ToBoolean`** -- 进行逻辑操作时发生 `ToBoolean` 转换。或通过 `Boolean(value)` 进行显式转换。
+=======
+**`ToBoolean`** -- Occurs in logical operations. Can be performed with `Boolean(value)`.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
`ToBoolean` 遵循以下规则：
@@ -157,4 +230,8 @@ alert( Boolean(" ") ); // 空白, 也是 true (任何非空字符串是 true)
- `undefined` 进行 `ToNumber` 时变成 `NaN`，而非 `0`。
- `"0"` 和只有空格的字符串(比如：`" "` )在进行 `ToBoolean` 变成 `true`。
+<<<<<<< HEAD
对象的转换并未在此提及，我们会在章节 a > b，a < b。
- 大于等于 / 小于等于：a >= b，a <= b。
- 检测两个值的相等写为 `a == b`（注意表达式中是两个等号 `=`，若写为单个等号 `a = b` 则表示赋值）。
- 检测两个值的不等，在数学中使用 ≠ 符号，而在 JavaScript 中则通过在赋值符号前增加叹号表示：a != b。
+=======
+We know many comparison operators from maths:
+
+- Greater/less than: a > b, a < b.
+- Greater/less than or equals: a >= b, a <= b.
+- Equals: `a == b` (please note the double equals sign `=`. A single symbol `a = b` would mean an assignment).
+- Not equals. In maths the notation is ≠, but in JavaScript it's written as an assignment with an exclamation sign before it: a != b.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
## 比较结果为 Boolean 类型
+<<<<<<< HEAD
和其他操作符一样，比较操作符也会有返回值，其类型为布尔值（Boolean）。
- `true` —— 表示“yes（是）”，“correct（正确）”或“the truth（真理）”。
- `false` —— 表示“no（否）”，“wrong（错误）”或“a lie（谎言）”。
+=======
+Like all other operators, a comparison returns a value. In this case, the value is a boolean.
+
+- `true` -- means "yes", "correct" or "the truth".
+- `false` -- means "no", "wrong" or "not the truth".
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
示例：
@@ -31,7 +47,11 @@ alert( result ); // true
## 字符串间的比较
+<<<<<<< HEAD
在比较字符串的大小时，会使用“字典”或“词典”顺序进行判定。
+=======
+To see whether a string is greater than another, JavaScript uses the so-called "dictionary" or "lexicographical" order.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
换言之，字符串是按字符（母）逐个进行比较的。
@@ -45,6 +65,7 @@ alert( 'Bee' > 'Be' ); // true
字符串间的比较算法非常简单：
+<<<<<<< HEAD
1. 首先比较两个字符串的首位字符大小。
2. 如果一方字符较大（或较小），则该字符串大于（或小于）另一个字符串。算法结束。
3. 否则，两个字符串中的字符相等，继续取出各自的后一位字符进行比较。
@@ -54,20 +75,40 @@ alert( 'Bee' > 'Be' ); // true
在上面的例子中，`'Z' > 'A'` 在算法的第 1 步就得到了返回结果。
字符串 `"Glow"` 和 `"Glee"` 会按字符逐个进行比较：
+=======
+1. Compare the first character of both strings.
+2. If the first character from the first string is greater (or less) than the other string's, then the first string is greater (or less) than the second. We're done.
+3. Otherwise, if both strings' first characters are the same, compare the second characters the same way.
+4. Repeat until the end of either string.
+5. If both strings end at the same length, then they are equal. Otherwise, the longer string is greater.
+
+In the examples above, the comparison `'Z' > 'A'` gets to a result at the first step while the strings `"Glow"` and `"Glee"` are compared character-by-character:
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
1. `G` 和 `G` 相等。
2. `l` 和 `l` 相等。
3. `o` 比 `e` 大，算法停止，第一个字符串大于第二个。
+<<<<<<< HEAD
```smart header="非真正的字典顺序，而是 Unicode 编码顺序"
在上面的算法中，比较大小的逻辑与字典或电话簿中的排序很像，但也不完全相同。
比如说，算法中的比较对大小写是敏感的。大写的 `"A"` 并不等于小写的 `"a"`。哪一个更大呢？实际上小写的 `"a"` 更大。至于原因嘛，这是因为在内部的编码表中（Unicode），小写字母的字符索引更大。我们会在 func`string`。函数 `func` 被自动调用，接收字符串和嵌入式表达式，并处理它们。你可以在 [docs](mdn:/JavaScript/Reference/Template_literals#Tagged_template_literals) 中阅读更多关于它们的信息。这叫做 "tagged templates"。此功能可以更轻松地将字符串包装到自定义模版或其他函数中，但这很少使用。
+<<<<<<< HEAD
## 特殊字符
通过使用换行符 `\n` 来创建带有单引号的多行字符串，它表示中断：
+=======
+## Special characters
+
+It is still possible to create multiline strings with single and double quotes by using a so-called "newline character", written as `\n`, which denotes a line break:
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```js run
let guestList = "Guests:\n * John\n * Pete\n * Mary";
@@ -60,39 +77,62 @@ let guestList = "Guests:\n * John\n * Pete\n * Mary";
alert(guestList); // a multiline list of guests
```
+<<<<<<< HEAD
例如，这两行描述相同：
+=======
+For example, these two lines are equal, just written differently:
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```js run
-alert( "Hello\nWorld" ); // two lines using a "newline symbol"
+let str1 = "Hello\nWorld"; // two lines using a "newline symbol"
// two lines using a normal newline and backticks
-alert( `Hello
-World` );
+let str2 = `Hello
+World`;
+
+alert(str1 == str2); // true
```
+<<<<<<< HEAD
还有其他不常见的“特殊字符”，列表如下：
+=======
+There are other, less common "special" characters.
+
+Here's the full list:
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
| 字符 | 描述 |
|-----------|-------------|
-|`\b`|Backspace|
-|`\f`|Form feed|
|`\n`|New line|
-|`\r`|Carriage return|
+|`\r`|Carriage return: not used alone. Windows text files use a combination of two characters `\r\n` to represent a line break. |
+|`\'`, `\"`|Quotes|
+|`\\`|Backslash|
|`\t`|Tab|
+<<<<<<< HEAD
|`\uNNNN`|16 进制的 `NNNN` 的unicode 符号，例如 `\u00A9`—— 是版权符号的 unicode `©`。它必须是 4 个16 进制数字。 |
|`\u{NNNNNNNN}`|一些罕见字符使用两个 unicode 符号进行编码，最多占用 4 个字节。这个长的 unicode 需要它周围的括号。|
+=======
+|`\b`, `\f`, `\v`| Backspace, Form Feed, Vertical Tab -- kept for compatibility, not used nowadays. |
+|`\xXX`|Unicode character with the given hexadimal unicode `XX`, e.g. `'\x7A'` is the same as `'z'`.|
+|`\uXXXX`|A unicode symbol with the hex code `XXXX` in UTF-16 encoding, for instance `\u00A9` -- is a unicode for the copyright symbol `©`. It must be exactly 4 hex digits. |
+|`\u{X…XXXXXX}` (1 to 6 hex characters)|A unicode symbol with the given UTF-32 encoding. Some rare characters are encoded with two unicode symbols, taking 4 bytes. This way we can insert long codes. |
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
unicode 示例：
```js run
alert( "\u00A9" ); // ©
-alert( "\u{20331}" ); // 佫, a rare chinese hieroglyph (long unicode)
+alert( "\u{20331}" ); // 佫, a rare Chinese hieroglyph (long unicode)
alert( "\u{1F60D}" ); // 😍, a smiling face symbol (another long unicode)
```
所有的特殊字符都以反斜杠字符 `\` 开始。它也被称为“转义字符”。
+<<<<<<< HEAD
如果我们想要在字符串中插入一个引号，我们也会使用它。
+=======
+We might also use it if we wanted to insert a quote into the string.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
例如：
@@ -102,7 +142,11 @@ alert( 'I*!*\'*/!*m the Walrus!' ); // *!*I'm*/!* the Walrus!
正如你所看到的，我们必须用反斜杠 `\'` 来预设值内部引号，否则就表示字符串结束。
+<<<<<<< HEAD
当然，这只不过是指与上文相同的引文。因此，作为更优雅的解决方案，我们可以改用双引号或反引号。
+=======
+Of course, only to the quotes that are the same as the enclosing ones need to be escaped. So, as a more elegant solution, we could switch to double quotes or backticks instead:
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```js run
alert( `I'm the Walrus!` ); // I'm the Walrus!
@@ -120,8 +164,12 @@ alert( `The backslash: \\` ); // The backslash: \
## 字符串长度
+<<<<<<< HEAD
`length` 属性有字符串长度：
+=======
+The `length` property has the string length:
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```js run
alert( `My\n`.length ); // 3
@@ -132,7 +180,11 @@ alert( `My\n`.length ); // 3
```warn header="`length` is a property"
掌握其他语言的人，有时会错误地调用 `str.length()` 而不是 `str.length`。这是行不通的。
+<<<<<<< HEAD
请注意 `str.length` 是一个数字属性，而不是函数。之后不需要添加括号。
+=======
+Please note that `str.length` is a numeric property, not a function. There is no need to add parenthesis after it.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```
## 访问字符。
@@ -189,7 +241,11 @@ alert( str[0] ); // 无法运行
```js run
let str = 'Hi';
+<<<<<<< HEAD
str = 'h' + str[1]; // 字符串替换
+=======
+str = 'h' + str[1]; // replace the string
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
alert( str ); // hi
```
@@ -242,9 +298,12 @@ let str = 'Widget with id';
alert( str.indexOf('id', 2) ) // 12
```
+<<<<<<< HEAD
如果我们对所有存在位置都感兴趣，可以在一个循环中使用 `indexOf`。每一次新的调用都发生在上一匹配位置之后：
-
+=======
+If we're interested in all occurrences, we can run `indexOf` in a loop. Every new call is made with the position after the previous match:
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```js run
let str = 'As sly as a fox, as strong as an ox';
@@ -275,8 +334,13 @@ while ((pos = str.indexOf(target, pos + 1)) != -1) {
*/!*
```
+<<<<<<< HEAD
```smart header="`str.lastIndexOf(subStr, pos)`"
还有一个类似的方法 [str.lastIndexOf(subStr, pos)](mdn:js/String/lastIndexOf)，他从字符串的末尾开始搜索。
+=======
+```smart header="`str.lastIndexOf(substr, position)`"
+There is also a similar method [str.lastIndexOf(substr, position)](mdn:js/String/lastIndexOf) that searches from the end of a string to its beginning.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
它会以相反的顺序列出事件。
```
@@ -305,10 +369,18 @@ if (str.indexOf("Widget") != -1) {
}
```
+<<<<<<< HEAD
````smart header="The bitwise NOT trick"
这里使用的一个老技巧是 [bitwise NOT](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT) `~` 运算符。它将该数字转换为 32-bit 整数（如果存在，则删除小数部分），然后反转其二进制表示中的所有位。
对于 32-bit 整数，调用 `~n` 的意思与 `-(n+1)` 完全一样（由于 IEEE-754 格式）。
+=======
+#### The bitwise NOT trick
+
+One of the old tricks used here is the [bitwise NOT](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT) `~` operator. It converts the number to a 32-bit integer (removes the decimal part if exists) and then reverses all bits in its binary representation.
+
+In practice, that means a simple thing: for 32-bit integers `~n` equals `-(n+1)`.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
例如：
@@ -321,9 +393,15 @@ alert( ~-1 ); // 0, the same as -(-1+1)
*/!*
```
+<<<<<<< HEAD
正如我们看到这样，只有当 `n == -1` 时，`~n` 才为零。
因此，测试 `if ( ~str.indexOf("...") )` 真是 `indexOf` 的结果不是 `-1`。换句话说，当有匹配时。
+=======
+As we can see, `~n` is zero only if `n == -1` (that's for any 32-bit signed integer `n`).
+
+So, the test `if ( ~str.indexOf("...") )` is truthy only if the result of `indexOf` is not `-1`. In other words, when there is a match.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
人们用它来简写 `indexOf` 检查：
@@ -337,8 +415,16 @@ if (~str.indexOf("Widget")) {
通常不建议以非显而易见的方式使用语言特性，但这种特殊技巧在旧代码中仍被广泛使用，所以我们应该理解它。
+<<<<<<< HEAD
只要记住：`if (~str.indexOf(...))` 读作 "if found"。
````
+=======
+Just remember: `if (~str.indexOf(...))` reads as "if found".
+
+To be precise though, as big numbers are truncated to 32 bits by `~` operator, there exist other numbers that give `0`, the smallest is `~4294967295=0`. That makes such check is correct only if a string is not that long.
+
+Right now we can see this trick only in the old code, as modern JavaScript provides `.includes` method (see below).
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
### includes, startsWith, endsWith
@@ -362,8 +448,13 @@ alert( "Midget".includes("id", 3) ); // false, 位置 3 没有 "id"
方法 [str.startsWith](mdn:js/String/startsWith) 和 [str.endsWith](mdn:js/String/endsWith) 完全按照它们所说的执行：
```js run
+<<<<<<< HEAD
alert( "Widget".startsWith("Wid") ); // true, "Widget" 以 "Wid" 开始
alert( "Widget".endsWith("get") ); // true, "Widget" 以 "get" 结束
+=======
+alert( "Widget".startsWith("Wid") ); // true, "Widget" starts with "Wid"
+alert( "Widget".endsWith("get") ); // true, "Widget" ends with "get"
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```
## 获取子字符串
@@ -397,7 +488,6 @@ JavaScript 中有三种获取字符串的方法：`substring`、`substr` 和 `sl
alert( str.slice(-4, -1) ); // */!
```
-
`str.substring(start [, end])`
: 返回 `start` 和 `end` **之间**的字符串部分。
@@ -405,7 +495,6 @@ JavaScript 中有三种获取字符串的方法：`substring`、`substr` 和 `sl
例如：
-
```js run
let str = "st*!*ring*/!*ify";
@@ -421,7 +510,6 @@ JavaScript 中有三种获取字符串的方法：`substring`、`substr` 和 `sl
否定参数（不像 slice）不支持，它们被视为 `0`。
-
`str.substr(start [, length])`
: 从 `start` 开始返回给定 `length` 的字符串部分。
@@ -447,11 +535,14 @@ JavaScript 中有三种获取字符串的方法：`substring`、`substr` 和 `sl
| `substring(start, end)` | between `start` and `end` | negative values mean `0` |
| `substr(start, length)` | from `start` get `length` characters | allows negative `start` |
-
```smart header="Which one to choose?"
他们可以完成这项工作，形式上，`substr` 有一个小缺点：它不是在 JavaScript 核心规范中描述的，而是在附录 B 中，它涵盖了主要由于历史原因而存在的浏览器特性。因此，非浏览器环境可能无法支持它。但实际上它在任何地方都有效。
+<<<<<<< HEAD
作者发现自己几乎一直在使用 `slice`。
+=======
+Of the other two variants, `slice` is a little bit more flexible, it allows negative arguments and shorter to write. So, it's enough to remember solely `slice` of these three methods.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```
## 比较字符串
@@ -514,7 +605,11 @@ alert( str );
// ¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜ
```
+<<<<<<< HEAD
看到？大写字符先走，然后是一些特殊字符，然后是小写字符。
+=======
+See? Capital characters go first, then a few special ones, then lowercase characters, and `Ö` near the end of the output.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
现在很明显为什么 `a > Z`。
@@ -523,10 +618,16 @@ alert( str );
- 所有小写字母都是大写字母，因为它们的代码更大。
- 一些想 `Ö` 的字母与主要字母表不同。这里的代码比从 `a` 到 `z` 的代码都要大。
+<<<<<<< HEAD
### 正确的比较
执行字符串比较的“正确”算法比看起来更复杂，因为不同语言的字母都不相同。相同的字母可能位于不同的字母表中。
+=======
+### Correct comparisons
+
+The "right" algorithm to do string comparisons is more complex than it may seem, because alphabets are different for different languages.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
因此浏览器需要知道要比较的语言。
@@ -534,11 +635,19 @@ alert( str );
它提供了一种特殊的方法来比较不同语言的字符串，遵循它们的规则。
+<<<<<<< HEAD
调用 [str.localeCompare(str2)](mdn:js/String/localeCompare)：
- 根据语言规则，如果 `str` 大于 `str2` 返回 `1`。
- 如果if `str` 小于 `str2` 返回 `-1`。
- 如果相等，返回 `0`。
+=======
+The call [str.localeCompare(str2)](mdn:js/String/localeCompare) returns an integer indicating whether `str` comes before, after or is equivalent to `str2` according to the language rules:
+
+- Returns a negative number if `str` is less than `str2`, i.e. `str` occurs before `str2`.
+- Returns a positive number if `str` is greater than `str2`, i.e. `str` occurs after `str2`.
+- Returns `0` if they are equivalent.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
例如：
@@ -546,19 +655,31 @@ alert( str );
alert( 'Österreich'.localeCompare('Zealand') ); // -1
```
+<<<<<<< HEAD
这个方法实际上在[文档](mdn:js/String/localeCompare)中指定了两个额外的参数，它允许它指定语言（默认从环境中获取）并设置诸如区别大小之类的附加规则，或应该处理将 `"a"` 和 `"á"` 看作相等情况等。
+=======
+This method actually has two additional arguments specified in [the documentation](mdn:js/String/localeCompare), which allows it to specify the language (by default taken from the environment, letter order depends on the language) and setup additional rules like case sensitivity or should `"a"` and `"á"` be treated as the same etc.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
## 内部，Unicode
```warn header="Advanced knowledge"
+<<<<<<< HEAD
这部分会深入字符串内部。如果你计划处理表情符号、罕见的象形文字字符或其他罕见符号，这些知识会对你有用。
+=======
+The section goes deeper into string internals. This knowledge will be useful for you if you plan to deal with emoji, rare mathematical or hieroglyphic characters or other rare symbols.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
如果你不打算支持它们，你可以跳过这一部分。
```
### 代理对
+<<<<<<< HEAD
大部分 symbol 都有一个 2 字节的代码。大多数欧洲语言，数字甚至大多数象形文字中的字母都有 2 字节的表示形式。
+=======
+All frequently used characters have 2-byte codes. Letters in most european languages, numbers, and even most hieroglyphs, have a 2-byte representation.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
但 2 字节只允许 65536 个组合，这对于每个可能的符号都是不够的。所以稀有的符号被称为“代理对”的一对 2 字节符号编码。
@@ -567,7 +688,7 @@ alert( 'Österreich'.localeCompare('Zealand') ); // -1
```js run
alert( '𝒳'.length ); // 2, MATHEMATICAL SCRIPT CAPITAL X
alert( '😂'.length ); // 2, FACE WITH TEARS OF JOY
-alert( '𩷶'.length ); // 2, a rare chinese hieroglyph
+alert( '𩷶'.length ); // 2, a rare Chinese hieroglyph
```
注意，代理对在 JavaScript 被创建时并不存在，因此无法被语言正确代理。
@@ -576,7 +697,11 @@ alert( '𩷶'.length ); // 2, a rare chinese hieroglyph
`String.fromCodePoint` 和 `str.codePointAt` 是几种处理代理对的少数方法。它们最近在出现在语言中。在它们之前，只有 [String.fromCharCode](mdn:js/String/fromCharCode) 和 [str.charCodeAt](mdn:js/String/charCodeAt)。这些方法实际上与 `fromCodePoint/codePointAt` 相同，但是不适用于代理对。
+<<<<<<< HEAD
但是，例如，获取符号可能会非常麻烦，因为代理对被认为是两个字符：
+=======
+Getting a symbol can be tricky, because surrogate pairs are treated as two characters:
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```js run
alert( '𝒳'[0] ); // 奇怪的符号...
@@ -604,7 +729,11 @@ alert( '𝒳'.charCodeAt(1).toString(16) ); // dcb3, 在 0xdc00 和 0xdfff 之
例如，字母 `a` 可以是基本字符：`àáâäãåā`。最常见的“复合”字符在 UTF-16 表中有自己的代码。但不是全部，因为可能的组合太多。
+<<<<<<< HEAD
为了支持任意组合，UTF-16 允许我们使用多个 unicode 字符。基本字符和“装饰”它的一个或多个“标记”字符。
+=======
+To support arbitrary compositions, UTF-16 allows us to use several unicode characters: the base character followed by one or many "mark" characters that "decorate" it.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
例如，如果我们 `S` 后跟有特殊的 "dot above" 字符（代码 `\u0307`），则显示 Ṡ。
@@ -627,10 +756,12 @@ alert( 'S\u0307\u0323' ); // Ṩ
例如：
```js run
-alert( 'S\u0307\u0323' ); // Ṩ, S + dot above + dot below
-alert( 'S\u0323\u0307' ); // Ṩ, S + dot below + dot above
+let s1 = 'S\u0307\u0323'; // Ṩ, S + dot above + dot below
+let s2 = 'S\u0323\u0307'; // Ṩ, S + dot below + dot above
-alert( 'S\u0307\u0323' == 'S\u0323\u0307' ); // false
+alert( `s1: ${s1}, s2: ${s2}` );
+
+alert( s1 == s2 ); // false though the characters look identical (?!)
```
为了解决这个问题，有一个 “unicode 规范化”算法，它将每个字符串都转化成单个“通用”格式。
@@ -649,10 +780,15 @@ alert( "S\u0307\u0323".normalize().length ); // 1
alert( "S\u0307\u0323".normalize() == "\u1e68" ); // true
```
+<<<<<<< HEAD
事实上，情况并非总是如此，因为符号 `Ṩ` “常用”，所以 UTF-16 创建者把它包含在主表中并给了它代码。
+=======
+In reality, this is not always the case. The reason being that the symbol `Ṩ` is "common enough", so UTF-16 creators included it in the main table and gave it the code.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
如果你想了解更多关于规范化规则和变体的信息 —— 它们在 Unicode 标准附录中有详细描述：[Unicode 规范化形式](http://www.unicode.org/reports/tr15/)，但对于大多数实际目的来说，本文的内容就已经足够了。
+<<<<<<< HEAD
## 总结
@@ -664,11 +800,31 @@ alert( "S\u0307\u0323".normalize() == "\u1e68" ); // true
- 字符串的大/小写转换，使用：`toLowerCase/toUpperCase`。
- 查找子字符串时，使用 `indexOf` 或 `includes/startsWith/endsWith` 进行简单检查。
- 根据语言比较字符串时使用 `localeCompare`，否则将按字符代码进行比较。
+=======
+## Summary
+
+- There are 3 types of quotes. Backticks allow a string to span multiple lines and embed expressions `${…}`.
+- Strings in JavaScript are encoded using UTF-16.
+- We can use special characters like `\n` and insert letters by their unicode using `\u...`.
+- To get a character, use: `[]`.
+- To get a substring, use: `slice` or `substring`.
+- To lowercase/uppercase a string, use: `toLowerCase/toUpperCase`.
+- To look for a substring, use: `indexOf`, or `includes/startsWith/endsWith` for simple checks.
+- To compare strings according to the language, use: `localeCompare`, otherwise they are compared by character codes.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
字符串还有其他几种有用的方法：
+<<<<<<< HEAD
- `str.trim()` —— 删除字符串前后的空格 ("trims")。
- `str.repeat(n)` —— 重复字符串 `n` 次。
- ...更多内容细节参见[手册](mdn:js/String)。
字符串还具有用正则表达式执行搜索/替换的方法。但这个话题值得拥有单独的一章，所以我们稍后再说。
+=======
+- `str.trim()` -- removes ("trims") spaces from the beginning and end of the string.
+- `str.repeat(n)` -- repeats the string `n` times.
+- ...and more to be found in the [manual](mdn:js/String).
+
+Strings also have methods for doing search/replace with regular expressions. But that's big topic, so it's explained in a separate tutorial section | Your age: | + ++ + + + | +
getElementsByTagName.
+
+The `"s"` letter is absent in `getElementById`, because it returns a single element. But `getElementsByTagName` returns a collection of elements, so there's `"s"` inside.
+```
+
+````warn header="It returns a collection, not an element!"
+Another widespread novice mistake is to write:
+
+```js
+// doesn't work
+document.getElementsByTagName('input').value = 5;
+```
+
+That won't work, because it takes a *collection* of inputs and assigns the value to it rather than to elements inside it.
+
+We should either iterate over the collection or get an element by its index, and then assign, like this:
+
+```js
+// should work (if there's an input)
+document.getElementsByTagName('input')[0].value = 5;
+```
+````
+
+Looking for `.article` elements:
+
+```html run height=50
+
+
+
+```
+
+## Live collections
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
所有的 `"getElementsBy*"` 方法都会返回 **live** 集合。这类集合总是可以反映出文档的当前状态而且在文档变化时，可以自动更新。
下面的实例中，有两个脚本。
+<<<<<<< HEAD
1. 第一个方法创建了对集合 `` 的引用。到目前为止，它的长度是 `1`。
2. 第二个脚本在浏览器再遇到一个 `
` 时，它的长度会变成 `2`。
+=======
+1. The first one creates a reference to the collection of `
`. As of now, its length is `1`.
+2. The second scripts runs after the browser meets one more `
`, so its length is `2`.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```html run
+CSS-selector
+✔
+-
+
+
+CSS-selector
+✔
+-
+
+
-
@@ -350,29 +504,26 @@ CSS 选择器的伪类，如 `:hover` 和 `:active` 都是被支持的。例如
✔
✔
-
-CSS-selector
-✔
--
-
-
-CSS-selector
-✔
--
-
+<<<<<<< HEAD
请注意，只有在文档 `document.getElementById(...)` 的上下文中才能调用 `getElementById` 和 `getElementsByName`。但元素中没有 `elem.getElementById(...)` 会报错。
也可以在元素上调用其他方法，例如 `elem.querySelectorAll(...)` 将会在 `elem`（在 DOM 子树中）内部进行搜素。
+=======
+By far the most used are `querySelector` and `querySelectorAll`, but `getElementBy*` can be sporadically helpful or found in the old scripts.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
除此以外：
- `elem.matches(css)` 用于检查 `elem` 与给定的 CSS 选择器是否匹配。
- `elem.closest(css)` 用于查找与给定 CSS 选择器相匹配的最近的祖先。`elem` 本身也会被检查。
+<<<<<<< HEAD
最后我们在提一种检查父子关系的方法：
- 如果 `elemB` 在 `elemA`（`elemA` 的后代）中或者当 `elemA==elemB` 时 `elemA.contains(elemB)` 将返回 true。
+=======
+And let's mention one more method here to check for the child-parent relationship, as it's sometimes useful:
+- `elemA.contains(elemB)` returns true if `elemB` is inside `elemA` (a descendant of `elemA`) or when `elemA==elemB`.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md
new file mode 100644
index 0000000000..8a68992a54
--- /dev/null
+++ b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md
@@ -0,0 +1,29 @@
+我们在 `` 中使用循环：
+
+```js
+for (let li of document.querySelectorAll('li')) {
+ ...
+}
+```
+
+<<<<<<< HEAD:2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.md
+循环时，我们需要获取每个 `li` 的文本下标。我们可以直接从第一个节点开始读取，这就是文本节点：
+=======
+In the loop we need to get the text inside every `li`.
+
+We can read the text from the first child node of `li`, that is the text node:
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3:2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md
+
+```js
+for (let li of document.querySelectorAll('li')) {
+ let title = li.firstChild.data;
+
+ // title is the text in before any other nodes
+}
+```
+
+<<<<<<< HEAD:2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.md
+之后我们就可以获取后代 `li.getElementsByTagName('li')` 的数目。
+=======
+Then we can get the number of descendants as `li.getElementsByTagName('li').length`.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3:2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md
diff --git a/2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.view/index.html b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.view/index.html
similarity index 100%
rename from 2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.view/index.html
rename to 2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.view/index.html
diff --git a/2-ui/1-document/04-searching-elements-dom/2-tree-info/source.view/index.html b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/source.view/index.html
similarity index 100%
rename from 2-ui/1-document/04-searching-elements-dom/2-tree-info/source.view/index.html
rename to 2-ui/1-document/05-basic-dom-node-properties/2-tree-info/source.view/index.html
diff --git a/2-ui/1-document/04-searching-elements-dom/2-tree-info/task.md b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md
similarity index 100%
rename from 2-ui/1-document/04-searching-elements-dom/2-tree-info/task.md
rename to 2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md
diff --git a/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md
index 19054430b6..51b8e4ef4c 100644
--- a/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md
+++ b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md
@@ -12,6 +12,12 @@
这几步都发生了什么：
+<<<<<<< HEAD
1. `` 内容被注释所取代
First div
@@ -310,9 +448,13 @@ CSS 选择器的伪类，如 `:hover` 和 `:active` 都是被支持的。例如
现在我们可以很容易地看到不同之处。在文档中出现一个新的 `div` 后，静态集合并没有增加。
+<<<<<<< HEAD
我们在这里使用独立的脚本来说明元素添加是如何影响集合的，但是在此之后的任何 DOM 操作都会影响它们。很快我们就可以看到更多的细节。
## 总结
+=======
+## Summary
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
有 6 种主要的方法，可以在 DOM 中进行搜素：
@@ -327,6 +469,18 @@ CSS 选择器的伪类，如 `:hover` 和 `:active` 都是被支持的。例如
querySelectorquerySelectorAllgetElementByIdidquerySelectorquerySelectorAll<!--BODY-->，因为 `body.tagName == "BODY"`。正如我们所记住的，`tagName` 在 HTML 中总是大写的。
2. 这个注释现在是唯一的子节点，所以我们可以在 `body.firstChild` 中获取。
3. 注释的`data` 属性是它的内容 (inside ``)：`"BODY"`。
+=======
+1. The content of `` is replaced with the comment. The comment is ``, because `body.tagName == "BODY"`. As we remember, `tagName` is always uppercase in HTML.
+2. The comment is now the only child node, so we get it in `body.firstChild`.
+3. The `data` property of the comment is its contents (inside ``): `"BODY"`.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
diff --git a/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md
index 9f030ec6bb..f5d61df70a 100644
--- a/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md
+++ b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md
@@ -27,7 +27,11 @@ alert(document.constructor.name); // HTMLDocument
alert(HTMLDocument.prototype.constructor === HTMLDocument); // true
```
+<<<<<<< HEAD
对于所有原型中的内置类，有一个 `constructor` 引用，我们可以获取 `constructor.name` 来查看类名。我们为 `document` 原型链中的所有对象执行以下操作：
+=======
+To get a name of the class as a string, we can use `constructor.name`. Let's do it for the whole `document` prototype chain, till class `Node`:
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```js run
alert(HTMLDocument.prototype.constructor.name); // HTMLDocument
diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md
index 6d1423c6a3..5cc6dd9b04 100644
--- a/2-ui/1-document/05-basic-dom-node-properties/article.md
+++ b/2-ui/1-document/05-basic-dom-node-properties/article.md
@@ -18,6 +18,7 @@ DOM 节点因为它们的类而具有不同的属性。例如，标记 `` 相
类如下所示：
+<<<<<<< HEAD
- [EventTarget](https://dom.spec.whatwg.org/#eventtarget) —— 是根的“抽象”类。该类的对象从未被创建。它作为一个基础，为了让所有 DOM 节点都支持所谓的“事件”，我们会在之后对它进行学习。
- [Node](http://dom.spec.whatwg.org/#interface-node) —— 也是一个“抽象”类，充当 DOM 节点的基础。它提供了树的核心功能：`parentNode`、`nextSibling`、`childNodes` 等（它们都是 getter）。`Node` 类的对象从未被创建。但是一些具体的节点类却继承自它，例如：`Text` 表示文本节点，`Element` 用于元素节点，以及更多外来的类（如注释节点 `Comment`）。
- [Element](http://dom.spec.whatwg.org/#interface-element) —— 是 DOM 元素的基类。它提供了元素级的导航，比如 `nextElementSibling`、`children` 以及像 `getElementsByTagName`、`querySelector` 这样的搜索方法。浏览器中不仅有 HTML，还会有 XML 和SVG 文档。`Element` 类充当以下更具体类的基类：`SVGElement`、`XMLElement` 和 `HTMLElement`。
@@ -26,6 +27,16 @@ DOM 节点因为它们的类而具有不同的属性。例如，标记 `` 相
- [HTMLBodyElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlbodyelement) —— `` 元素的类，
- [HTMLAnchorElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlanchorelement) —— `` 元素的类，
- 等等，每个标记都有可以为自己提供特定属性和方法的类。
+=======
+- [EventTarget](https://dom.spec.whatwg.org/#eventtarget) -- is the root "abstract" class. Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called "events", we'll study them later.
+- [Node](http://dom.spec.whatwg.org/#interface-node) -- is also an "abstract" class, serving as a base for DOM nodes. It provides the core tree functionality: `parentNode`, `nextSibling`, `childNodes` and so on (they are getters). Objects of `Node` class are never created. But there are concrete node classes that inherit from it, namely: `Text` for text nodes, `Element` for element nodes and more exotic ones like `Comment` for comment nodes.
+- [Element](http://dom.spec.whatwg.org/#interface-element) -- is a base class for DOM elements. It provides element-level navigation like `nextElementSibling`, `children` and searching methods like `getElementsByTagName`, `querySelector`. A browser supports not only HTML, but also XML and SVG. The `Element` class serves as a base for more specific classes: `SVGElement`, `XMLElement` and `HTMLElement`.
+- [HTMLElement](https://html.spec.whatwg.org/multipage/dom.html#htmlelement) -- is finally the basic class for all HTML elements. It is inherited by various HTML elements:
+ - [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) -- the class for `` elements,
+ - [HTMLBodyElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlbodyelement) -- the class for `` elements,
+ - [HTMLAnchorElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlanchorelement) -- the class for `` elements
+ - ...and so on, each tag has its own class that may provide specific properties and methods.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
因此，给定节点的全部属性和方法都是继承的结果。
@@ -38,7 +49,11 @@ DOM 节点因为它们的类而具有不同的属性。例如，标记 `` 相
- `EventTarget` —— 为事件（包括事件本身）提供支持，
- 最后，它继承了 `Object`，因为像 `hasOwnProperty` 的“纯对象”方法也是可用的。
+<<<<<<< HEAD
要查看 DOM 节点类名，我们可以进行回调，因为对象通常都拥有 `constructor` 属性。它引用类的构造函数，`constructor.name` 就是它的名称：
+=======
+To see the DOM node class name, we can recall that an object usually has the `constructor` property. It references the class constructor, and `constructor.name` is its name:
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```js run
alert( document.body.constructor.name ); // HTMLBodyElement
@@ -76,7 +91,11 @@ alert( document.body instanceof EventTarget ); // true
```
````smart header="IDL in the spec"
+<<<<<<< HEAD
在规范中，类不是用 JavaScript 描述的，而是一个特殊的[接口描述语言（IDL）](https://en.wikipedia.org/wiki/Interface_description_language)，它很容易理解。
+=======
+In the specification, DOM classes aren't described by using JavaScript, but a special [Interface description language](https://en.wikipedia.org/wiki/Interface_description_language) (IDL), that is usually easy to understand.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
在 IDL 中，所有的属性都有它们的类型。比如，`DOMString` 和 `boolean` 等等。
@@ -91,7 +110,11 @@ interface HTMLInputElement: HTMLElement {
// 下面是 元素的属性和方法
*!*
+<<<<<<< HEAD
// "DOMString" 意思是这些属性都是字符串
+=======
+ // "DOMString" means that the value of these properties are strings
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
*/!*
attribute DOMString accept;
attribute DOMString alt;
@@ -99,12 +122,20 @@ interface HTMLInputElement: HTMLElement {
attribute DOMString value;
*!*
+<<<<<<< HEAD
// 布尔属性（true/false）
+=======
+ // boolean value property (true/false)
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
attribute boolean autofocus;
*/!*
...
*!*
+<<<<<<< HEAD
//方法 "void" 意思是无返回值
+=======
+ // now the method: "void" means that the method returns no value
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
*/!*
void select();
...
@@ -156,7 +187,11 @@ alert( document.body.nodeName ); // BODY
alert( document.body.tagName ); // BODY
```
+<<<<<<< HEAD
tagName 和 nodeName 之间有何不同？
+=======
+Is there any difference between `tagName` and `nodeName`?
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
当然，差异反映在它们的名字上，但是确实有些微妙。
@@ -175,11 +210,11 @@ tagName 和 nodeName 之间有何不同？
@@ -201,7 +236,11 @@ tagName 和 nodeName 之间有何不同？
[innerHTML](https://w3c.github.io/DOM-Parsing/#widl-Element-innerHTML) 属性允许将元素中的 HTML 作为字符串来获取。
+<<<<<<< HEAD
我们也可以修改它。因此，这是改变页面最有效的方法之一。
+=======
+We can also modify it. So it's one of the most powerful ways to change the page.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
该示例显示了 `document.body` 的内容，然后完全替换它：
@@ -232,14 +271,22 @@ tagName 和 nodeName 之间有何不同？
```
```smart header="Scripts don't execute"
+<<<<<<< HEAD
如果 `innerHTML` 将 `
```
+<<<<<<< HEAD
还有一个非常重要的不同点。DOM 属性的字符串可能跟特性值的字符串所表示的不是同一个东西！
例如 `href` DOM 属性总是一个绝对路径的，而特性值只包含相对路径或者只包含 `#hash` 这一部分。
+=======
+Most properties are strings though.
+
+Quite rarely, even if a DOM property type is a string, it may differ from the attribute. For instance, the `href` DOM property is always a *full* URL, even if the attribute contains a relative URL or just a `#hash`.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
这里有一个例子：
@@ -382,7 +413,11 @@ div.setAttribute('order-state', 'canceled');
- `elem.removeAttribute(name)` —— 移除这个特性
- `elem.attributes` —— 所有特性的集合
+<<<<<<< HEAD
对于大多数需求，DOM 属性已经可以给予很好的支持。应当在 DOM 属性实在无法满足开发需求的情况下才使用特性，比如以下情况：
+=======
+For most situations using DOM properties is preferable. We should refer to attributes only when DOM properties do not suit us, when we need exactly attributes, for instance:
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
- 我们需要一个非标准化的特性。但是如果我们用 `data-` 来设置特性值，那就要使用 `dataset` 来获取属性值。
- 我们想要读取到 HTML 的展示内容。比如 `href` 属性总是一个绝对路径，但是我们只想要相对路径。
diff --git a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
index 7476de912f..fa8f53060a 100644
--- a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
+++ b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
@@ -12,7 +12,7 @@
let text = 'text';
elem1.append(document.createTextNode(text));
- elem2.textContent = text;
- elem3.innerHTML = text;
+ elem2.innerHTML = text;
+ elem3.textContent = text;
```
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
index 728d7a9719..a0ee7551bf 100644
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
@@ -54,10 +54,17 @@
clockStart();
+<<<<<<< HEAD
+=======
+
+
+
+
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
index c97324f508..abbf5efa09 100644
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
@@ -8,4 +8,8 @@ importance: 4
[iframe src="solution" height=60]
-使用 HTML/CSS 进行样式设计，JavaScript 仅仅用来更新元素中的时间。
\ No newline at end of file
+<<<<<<< HEAD
+使用 HTML/CSS 进行样式设计，JavaScript 仅仅用来更新元素中的时间。
+=======
+Use HTML/CSS for the styling, JavaScript only updates time in elements.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
diff --git a/2-ui/1-document/07-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md
index fc32773be0..4aea013c8f 100644
--- a/2-ui/1-document/07-modifying-document/article.md
+++ b/2-ui/1-document/07-modifying-document/article.md
@@ -38,7 +38,11 @@ DOM（document object model 文档对象模型，此文中全部以缩写 DOM
这两种方法都可以创建 DOM 节点：
`document.createElement(tag)`
+<<<<<<< HEAD
: 用给定的标签创建一个新*元素节点（element node）*：
+=======
+: Creates a new *element node* with the given tag:
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```js
let div = document.createElement('div');
@@ -61,13 +65,21 @@ div.className = "alert alert-success";
div.innerHTML = "Hi there! You've read an important message.";
```
+<<<<<<< HEAD
之后，我们就有拥有一个 DOM 元素。现在这个元素仅仅存于一个变量中，我们还不能在页面上看到它。因为它还没有被插入到页面中。
+=======
+After that, we have our DOM element ready. Right now it is just in a variable and we cannot see it. That is because it's not yet inserted into the page.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
## 插值方法
为了让 `div` 显示我们想要的内容，我们需要在 `document` 中找个合适的位置插值，这里我们选择 `document.body`。
+<<<<<<< HEAD
这里有个特定的方法 `appendChild` 来完成这一步：`document.body.appendChild(div)`。
+=======
+There's a special method `appendChild` for that: `document.body.appendChild(div)`.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
这里是完整代码：
@@ -135,7 +147,11 @@ div.innerHTML = "Hi there! You've read an important message.";
*/!*
```
+<<<<<<< HEAD
如果需要把 `newLi` 插入成为第一个子元素，我们可以这样做：
+=======
+ To insert `newLi` as the first element, we can do it like this:
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```js
list.insertBefore(newLi, list.firstChild);
@@ -146,9 +162,15 @@ div.innerHTML = "Hi there! You've read an important message.";
所有这些插入节点的操作都会返回节点。换句话说，`parentElem.appendChild(node)` 返回 `node`。但是通常返回的节点都没有用，只是插入方法的默认返回值。
+<<<<<<< HEAD
以上方法都是“旧三板斧”：它们从很早就存在，我们在老的脚本里能看到它们的影子。很不幸的是它们不够灵活。
例如，我们怎样在 **html** 插入字符串呢？又或者，给定你一个节点，如何在不引用其父节点的情况下删除它？虽然也能完成需求开发，总归不是那么优雅的解决方式。
+=======
+These methods are "old school": they exist from the ancient times and we can meet them in many old scripts. Unfortunately, they are not flexible enough.
+
+For instance, how to insert *html* if we have it as a string? Or, given a node, without reference to its parent, how to remove it? Of course, that's doable, but not in an elegant way.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
所以诞生了两种优雅插入方法来代替这些繁琐的插入操作。
@@ -164,7 +186,13 @@ This set of methods provides more flexible insertions:
所有这些方法都接受 DOM 节点或者文本字符串列表形式。如果给定的是一个字符串，那么它将以文本节点（text node）形式插入。
+<<<<<<< HEAD
下面例子是使用以上提到的方法在列表项前面或后面插入文本：
+=======
+All of them accept a list of DOM nodes and/or text strings. If a string is given it's inserted as a text node.
+
+Here's an example of using these methods to add more items to a list and the text before/after it:
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
```html autorun
-
@@ -238,6 +266,7 @@ after
接下来登场的这个方法就可以做到：`elem.insertAdjacentHTML(where, html)`。
+<<<<<<< HEAD
该方法第一个参数是代码字符串，指定相对于 `elem` 的插入位置，必须是以下四个值之一：
- `"beforebegin"` —— 在 `elem` 开头位置前插入 `html`，
@@ -246,6 +275,16 @@ after
- `"afterend"` —— 在 `elem` 结束位置后插入 `html`。
第二个参数是 HTML 字符串，会以 HTML 的形式插入到页面中。
+=======
+The first parameter is a code word, specifying where to insert relative to `elem`. Must be one of the following:
+
+- `"beforebegin"` -- insert `html` immediately before `elem`,
+- `"afterbegin"` -- insert `html` into `elem`, at the beginning,
+- `"beforeend"` -- insert `html` into `elem`, at the end,
+- `"afterend"` -- insert `html` immediately after `elem`.
+
+The second parameter is an HTML string, that is inserted "as HTML".
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
例如：
@@ -275,10 +314,17 @@ after
这个方法还有两个变种：
+<<<<<<< HEAD
- `elem.insertAdjacentText(where, text)` —— 一样的语法，只不过把 `text` 作为“文本”直接插入到 HTML 中，
- `elem.insertAdjacentElement(where, elem)` —— 一样的语法，只不过插入的是一个元素。
他们存在的意义更多是为了使语法“整齐划一”，在实践中，通常只使用 `insertAdjacentHTML`，因为插入文本和元素的方法可以使用 `append/prepend/before/after` —— 同样的效果这样写起来更简洁。
+=======
+- `elem.insertAdjacentText(where, text)` -- the same syntax, but a string of `text` is inserted "as text" instead of HTML,
+- `elem.insertAdjacentElement(where, elem)` -- the same syntax, but inserts an element.
+
+They exist mainly to make the syntax "uniform". In practice, only `insertAdjacentHTML` is used most of the time. Because for elements and text, we have methods `append/prepend/before/after` -- they are shorter to write and can insert nodes/text pieces.
+>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3
这里有一个展示一条信息的变种写法：
@@ -402,16 +448,92 @@ ul.append(...getListContent()); // append + “...” 操作符 = 一对好朋
```
+<<<<<<< HEAD
我们在这里提及 `DocumentFragment` 主要是因为有一些概念是基于它的，比如 [模板](info:template-element) 元素，我们将在后面的章节中详细介绍它。
## 移除
+=======
+
+## DocumentFragment [#document-fragment]
+
+`DocumentFragment` is a special DOM node that serves as a wrapper to pass around lists of nodes.
+
+We can append other nodes to it, but when we insert it somewhere, then its content is inserted instead.
+
+For example, `getListContent` below generates a fragment with `
- ` items, that are later inserted into `
- `:
+
+```html run
+
- 1 +
- 2 +
- 3 +
-
+
` 包含给定内容。通知应该在 1.5 秒后自动消失。 +======= +Write a function `showNotification(options)` that creates a notification: `` with the given content. The notification should automatically disappear after 1.5 seconds. +>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3 参数： diff --git a/2-ui/1-document/08-styles-and-classes/article.md b/2-ui/1-document/08-styles-and-classes/article.md index ee8d93109b..5991bf456d 100644 --- a/2-ui/1-document/08-styles-and-classes/article.md +++ b/2-ui/1-document/08-styles-and-classes/article.md @@ -1,6 +1,10 @@ # 样式和类 +<<<<<<< HEAD 在我们讨论 JavaScript 处理样式和类的方法之前 —— 有一个重要的规则。尽管这足够明显的，但我们还是要提到这一点。 +======= +Before we get into JavaScript's ways of dealing with styles and classes -- here's an important rule. Hopefully it's obvious enough, but we still have to mention it. +>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3 通常有两种方式来设计元素样式： @@ -65,11 +69,19 @@ elem.style.top = top; // e.g '456px' `classList` 方法： +<<<<<<< HEAD - `elem.classList.add/remove("class")` —— 添加/移除类。 - `elem.classList.toggle("class")` —— 如果类存在就移除，否则添加。 - `elem.classList.contains("class")` —— 返回 `true/false`，检查给定类。 此外，`classList` 是可迭代的，因此我们可以像下述方法一样列出所有类： +======= +- `elem.classList.add/remove("class")` -- adds/removes the class. +- `elem.classList.toggle("class")` -- adds the class if it doesn't exist, otherwise removes it. +- `elem.classList.contains("class")` -- returns `true/false`, checks for the given class. + +Besides, `classList` is iterable, so we can list all classes with `for..of`, like this: +>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3 ```html run @@ -116,7 +128,11 @@ button.style.WebkitBorderRadius = '5px'; 例如，为了隐藏一个元素，我们可以设置 `elem.style.display = "none"`。 +<<<<<<< HEAD 然后，我们可能要移除 `style.display`，就像它没有被设置一样。这里不应该使用 `delete elem.style.display`，而应该使用 `elem.style.display = ""` 将其赋值为空。 +======= +Then later we may want to remove the `style.display` as if it were not set. Instead of `delete elem.style.display` we should assign an empty string to it: `elem.style.display = ""`. +>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3 ```js run // if we run this code, the "blinks" @@ -125,7 +141,11 @@ document.body.style.display = "none"; // hide setTimeout(() => document.body.style.display = "", 1000); // 恢复正常 ``` +<<<<<<< HEAD 如果我们设置 `display` 为空字符串，那么浏览器一般会应用 CSS 类以及内置样式，就像根本没有这样的 `style` 属性。 +======= +If we set `display` to an empty string, then the browser applies CSS classes and its built-in styles normally, as if there were no such `display` property at all. +>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3 ````smart header="用 `style.cssText` 进行重写" 通常，我们使用 `style.*` 来分配单独的样式属性。我们不能将完整的样式设置为 `div.style="color: red; width: 100px"`，因为 `div.style` 是一个对象，而且它是只读的。 @@ -147,7 +167,11 @@ setTimeout(() => document.body.style.display = "", 1000); // 恢复正常 ``` +<<<<<<< HEAD 我们很少使用它，因为这样的赋值会删除所有现有样式：它不会添加，而是替换它们。偶尔会移出所需的东西。但是当我们知道我们不移出一些重要的内容时，仍然可以对新元素进行处理。 +======= +This property is rarely used, because such assignment removes all existing styles: it does not add, but replaces them. May occasionally delete something needed. But we can safely use it for new elements, when we know we won't delete an existing style. +>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3 通过设置属性：`div.setAttribute('style', 'color: red...')` 也可以实现同样的目的。 ```` @@ -207,7 +231,11 @@ setTimeout(() => document.body.style.display = "", 1000); // 恢复正常 ``` +<<<<<<< HEAD ...但如果我们需要，比如说，把边距增加 20px 呢？那么需要当前值作为开始。 +======= +...But what if we need, say, to increase the margin by 20px? We would want the current value of it. +>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3 还有另一种方法：`getComputedStyle`。 @@ -281,7 +309,11 @@ pseudo 但 `getComputedStyle` 不允许访问该颜色，否则任意页面都可以通过在页面上创建连接并通过检查样式来确定用户是否访问了连接。 +<<<<<<< HEAD JavaScript 中我们看不到 `:visited` 应用的样式。此外，CSS 中也有一个限制，禁止在 `:visited` 中应用更改几何的样式。这是为了保证一个不好的页面没有办法来测试是否访问了链接，从而窥探隐私。 +======= +JavaScript may not see the styles applied by `:visited`. And also, there's a limitation in CSS that forbids to apply geometry-changing styles in `:visited`. That's to guarantee that there's no sideway for an evil page to test if a link was visited and hence to break the privacy. +>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3 ``` ## 总结 diff --git a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md index 82ba162df7..7ea407a529 100644 --- a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md +++ b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md @@ -6,6 +6,10 @@ importance: 3 编写返回标准滚动条宽度的代码。 +<<<<<<< HEAD 对于Windows，它通常在 `12px` 和 `20px` 之间变化。如果浏览器不为它保留任何空间，那么它可能是 `0px`。 +======= +For Windows it usually varies between `12px` and `20px`. If the browser doesn't reserve any space for it (the scrollbar is half-translucent over the text, also happens), then it may be `0px`. +>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3 P.S. 代码应该适用于任何HTML文档，且不依赖于它的内容元素。 diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.png b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.png index 098f9eb6d5..67b9019a04 100644 Binary files a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.png and b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.png differ diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field@2x.png b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field@2x.png index 3ecb293753..cdd679855e 100644 Binary files a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field@2x.png and b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field@2x.png differ diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md index 87a501baac..53452479ea 100644 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md @@ -34,9 +34,13 @@ ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'p 当浏览器还不知道图片的宽/高（图片的尺寸可能来自标签属性或 CSS）的时候它会假设它们的尺寸为 `0`直到图片加载完成。 +<<<<<<< HEAD 实际使用过程中，浏览器会在图片第一次加载完成后缓存该图片，方便下次再次访问时立即显示图片。 但是在第一次加载时 `ball.offsetWidth` 的值为 `0`，这会导致错误的坐标出现。 +======= +After the first load browser usually caches the image, and on next loads it will have the size immediately. But on the first load the value of `ball.offsetWidth` is `0`. That leads to wrong coordinates. +>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3 此时我们应该为 `` 添加 `width/height` 属性： diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md index 2e3860fc85..29c3febcdf 100644 --- a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md +++ b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md @@ -1,6 +1,13 @@ 不同点： +<<<<<<< HEAD 1. `clientWidth` 值是数值，然而 `getComputedStyle(elem).width` 返回一个包含 `px` 的字符串。 2. `getComputedStyle` 可能返回非数值的结果，例如内联元素的 `"auto"`。 3. `clientWidth` 是元素的内部内容区域加上内间距，而 CSS 宽度（具有标准的 `box-sizing`）是内部**不包括内间距**的空间区域。 4. 如果有一个滚动条，一般浏览器保留它的空间，有的浏览器从 CSS 宽度中减去这个空间（因为它不再用于内容），而有些则不这样做。`clientWidth` 属性总是相同的：如果保留了滚动条，那么它的宽度将被删去。 +======= +1. `clientWidth` is numeric, while `getComputedStyle(elem).width` returns a string with `px` at the end. +2. `getComputedStyle` may return non-numeric width like `"auto"` for an inline element. +3. `clientWidth` is the inner content area of the element plus paddings, while CSS width (with standard `box-sizing`) is the inner content area *without paddings*. +4. If there's a scrollbar and the browser reserves the space for it, some browser substract that space from CSS width (cause it's not available for content any more), and some do not. The `clientWidth` property is always the same: scrollbar size is substracted if reserved. +>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3 diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md index 79683bbbba..b0c2eb8fa4 100644 --- a/2-ui/1-document/09-size-and-scroll/article.md +++ b/2-ui/1-document/09-size-and-scroll/article.md @@ -38,12 +38,20 @@ JavaScript 中存在许多属性让我们能够读取元素的宽度、高度或 因此，没有滚动条时，内容宽度将是 `300 px`，但是如果滚动条宽度是 `16px`（不同的设备和浏览器，宽度可能会不一样），那么还剩下 `300 - 16＝284px`，这是我们必须考虑到的事。这就是为什么本章的例子总是假设有滚动条的原因。如果没有滚动条，那么事情就会更简单一些。 ``` +<<<<<<< HEAD ```smart header="文本可能会溢出到 `padding-bottom` 中" 内填充通常在插图中显示的是空的，但是如果元素中有很多文本，并且溢出，那么浏览器在 `padding-bottom` 中显示“溢出”文本，这可以在示例中看到。但是填充物仍然存在，除非另有说明。 +======= +```smart header="The `padding-bottom` area may be filled with text" +Usually paddings are shown empty on illustrations, but if there's a lot of text in the element and it overflows, then browsers show the "overflowing" text at `padding-bottom`. + +That's a note to avoid confusion, as `padding-bottom` is set in further examples, unless explicitly specified otherwise. +>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3 ``` ## 几何学 +<<<<<<< HEAD 提供宽度、高度和其他几何形状的元素属性通过数值来计算。它们被假定为像素。 以下是显示总体情况的图片： @@ -51,6 +59,15 @@ JavaScript 中存在许多属性让我们能够读取元素的宽度、高度或  它们有很多属性，很难将它们全部放在单个图片中，但是它们的值很简单，容易理解。 +======= +Here's the overall picture: + + + +Values of these properties are technically numbers, but these numbers are "of pixels", so these are pixel measurements. + +They are many properties, it's difficult to fit them all in the single picture, but their values are simple and easy to understand. +>>>>>>> 4a8d8987dfc3256045e6b4a3bd8810ad3b25d1b3 让我们从元素的外部开始探索它们。 @@ -58,6 +75,7 @@ JavaScript 中存在许多属性让我们能够读取元素的宽度、高度或 这些属性很少出现，但它们仍然是“最外层”的几何属性，所以我们将从它们开始。 +<<<<<<< HEAD `offsetParent` 是最近的祖先元素: 1. CSS 定位（`position` 为 `absolute`、`relative` 或 `fixed`）， @@ -67,6 +85,19 @@ JavaScript 中存在许多属性让我们能够读取元素的宽度、高度或 在大多数实际情况下，我们可以使用 `offsetParent` 来获得最近的 CSS 定位祖先。`offsetLeft/offsetTop` 提供相对于元素左上角的 x/y 坐标。 在下面的例子中，内部 `
` 有 `` 作为 `offsetParent`，并且 `offsetLeft/offsetTop` 让它从左上角位移（`180`）： +======= +The `offsetParent` is the nearest ancestor, that browser uses for calculating coordinates during rendering. + +That's the nearest ancestor, that satisfies following conditions: + +1. CSS-positioned (`position` is `absolute`, `relative`, `fixed` or `sticky`), +2. or ` `, ` `, ` `, +2. or ``. + +Properties `offsetLeft/offsetTop` provide x/y coordinates relative to its upper-left corner. + +In the example below the inner `