举个例子
<script> function dragstart_handler(ev) { console.log("dragStart"); - // 设置拖动的格式和数据。使用事件目标的id作为数据 + // 设置拖动的格式和数据。使用事件目标的 id 作为数据 ev.dataTransfer.setData("text/plain", ev.target.id); // 创建一个图像并且使用它作为拖动图像 // 请注意： 改变 "example.gif" 为一个已经存在的图片 @@ -88,7 +88,7 @@举个例子
function drop_handler(ev) { console.log("Drop"); ev.preventDefault(); - // 获取拖放目标的id数据 + // 获取拖放目标的 id 数据 var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } diff --git a/files/zh-cn/web/api/datatransfer/types/index.html b/files/zh-cn/web/api/datatransfer/types/index.html index 3fb941756d18de..723876ee106037 100644 --- a/files/zh-cn/web/api/datatransfer/types/index.html +++ b/files/zh-cn/web/api/datatransfer/types/index.html @@ -6,9 +6,9 @@{{APIRef("HTML Drag and Drop API")}}
-DataTransfer.types 是只读属性。它返回一个我们在{{event("dragstart")}}事件中设置的拖动数据格式(如 {{domxref("DOMString","字符串")}}) 的数组。 格式顺序与拖动操作中包含的数据顺序相同。
DataTransfer.types 是只读属性。它返回一个我们在{{event("dragstart")}}事件中设置的拖动数据格式 (如 {{domxref("DOMString","字符串")}}) 的数组。 格式顺序与拖动操作中包含的数据顺序相同。
这些格式是指定数据类型或格式的Unicode字符串，通常由MIME类型给出。 一些非MIME类型的值是由于历史遗留原因（例如“text”）而特殊设置的。
+这些格式是指定数据类型或格式的 Unicode 字符串，通常由 MIME 类型给出。 一些非 MIME 类型的值是由于历史遗留原因（例如“text”）而特殊设置的。
语法
@@ -39,8 +39,8 @@举个例子
<script> function dragstart_handler(ev) { console.log("dragStart: target.id = " + ev.target.id); - // 将这个元素的id添加到drag载荷中， - // 以便drop事件知道将哪个元素添加到其树中。 + // 将这个元素的 id 添加到 drag 载荷中， + // 以便 drop 事件知道将哪个元素添加到其树中。 ev.dataTransfer.setData("text/plain", ev.target.id); ev.dataTransfer.effectAllowed = "move"; } @@ -48,7 +48,7 @@举个例子
function drop_handler(ev) { console.log("drop: target.id = " + ev.target.id); ev.preventDefault(); - // 得到目标的id并且将移动的元素添加到目标DOM中 + // 得到目标的 id 并且将移动的元素添加到目标 DOM 中 var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); // 打印每种格式类型 @@ -57,7 +57,7 @@举个例子
console.log("... types[" + i + "] = " + ev.dataTransfer.types[i]); } } - // 打印每个item的“kind”和“type”属性值 + // 打印每个 item 的“kind”和“type”属性值 if (ev.dataTransfer.items != null) { for (var i=0; i < ev.dataTransfer.items.length; i++) { console.log("... items[" + i + "].kind = " + ev.dataTransfer.items[i].kind + " ; type = " + ev.dataTransfer.items[i].type); @@ -68,7 +68,7 @@举个例子
function dragover_handler(ev) { console.log("dragOver"); ev.preventDefault(); - // 设置dropEffect属性值为move + // 设置 dropEffect 属性值为 move ev.dataTransfer.dropEffect = "move" } </script> diff --git a/files/zh-cn/web/api/datatransferitem/getasfile/index.html b/files/zh-cn/web/api/datatransferitem/getasfile/index.html index 87e39270ec4545..aa563a72f324b3 100644 --- a/files/zh-cn/web/api/datatransferitem/getasfile/index.html +++ b/files/zh-cn/web/api/datatransferitem/getasfile/index.html @@ -8,7 +8,7 @@ ---如果DataTransferItem是一个文件, 那 DataTransferItem.getAsFile() 方法将返回拖拽项数据的 {{domxref("File")}} 对象. 如果拖拽项的数据不是一个文件，则返回 null.
如果DataTransferItem是一个文件，那 DataTransferItem.getAsFile() 方法将返回拖拽项数据的 {{domxref("File")}} 对象。如果拖拽项的数据不是一个文件，则返回 null.
语法
@@ -17,18 +17,18 @@语法
参数
-无.
+无。
返回值
- {{domxref("File")}} -
- 如果拖拽项的对象是一个文件, 则返回 {{domxref("File")}} 对象; 否则返回
null.
+ - 如果拖拽项的对象是一个文件，则返回 {{domxref("File")}} 对象; 否则返回
null.
例子
-下面这个例子中使用 getAsFile() 。放在 {{event("drop")}} 事件处理里面.
下面这个例子中使用 getAsFile() 。放在 {{event("drop")}} 事件处理里面。
function drop_handler(ev) {
console.log("Drop");
@@ -47,7 +47,7 @@ 例子
console.log("... Drop: HTML");
} else if ((data[i].kind == 'string') &&
(data[i].type.match('^text/uri-list'))) {
- // 拖拽项的数据是URI
+ // 拖拽项的数据是 URI
console.log("... Drop: URI");
} else if ((data[i].kind == 'file') &&
(data[i].type.match('^image/'))) {
diff --git a/files/zh-cn/web/api/datatransferitem/getasstring/index.html b/files/zh-cn/web/api/datatransferitem/getasstring/index.html
index cc88842d7e5491..d8887f9314a5ad 100644
--- a/files/zh-cn/web/api/datatransferitem/getasstring/index.html
+++ b/files/zh-cn/web/api/datatransferitem/getasstring/index.html
@@ -5,7 +5,7 @@
---
{{APIRef("HTML Drag and Drop API")}}
- DataTransferItem.getAsString() 当DataTransferItem对象的kind属性是一个普通Unicode字符串时，该方法会用 DataTransferItem对象的kind属性作为入参来执行传入的回调函数 (i.e. kind is string).
+ DataTransferItem.getAsString() 当 DataTransferItem 对象的 kind 属性是一个普通 Unicode 字符串时，该方法会用 DataTransferItem 对象的 kind 属性作为入参来执行传入的回调函数 (i.e. kind is string).
示例
diff --git a/files/zh-cn/web/api/datatransferitem/index.html b/files/zh-cn/web/api/datatransferitem/index.html
index ec46d9e333d58a..0ca61e8991fc16 100644
--- a/files/zh-cn/web/api/datatransferitem/index.html
+++ b/files/zh-cn/web/api/datatransferitem/index.html
@@ -15,18 +15,18 @@ 属性
string 或是 file。方法
- {{domxref("DataTransferItem.getAsFile()")}} -
- 返回一个关联拖拽项的 {{domxref("File")}} 对象 （当拖拽项不是一个文件时返回 null）。 +
- 返回一个关联拖拽项的 {{domxref("File")}} 对象（当拖拽项不是一个文件时返回 null）。
- {{domxref("DataTransferItem.getAsString()")}}
- 使用拖拽项的字符串作为参数执行指定回调函数。
- {{domxref("DataTransferItem.webkitGetAsEntry()")}} {{Non-standard_inline}} -
- 返回一个基于 {{domxref("FileSystemEntry")}} 的对象来表示文件系统中选中的项目。通常是返回一个{{domxref("FileSystemFileEntry")}} 或是 {{domxref("FileSystemDirectoryEntry")}} 对象. +
- 返回一个基于 {{domxref("FileSystemEntry")}} 的对象来表示文件系统中选中的项目。通常是返回一个{{domxref("FileSystemFileEntry")}} 或是 {{domxref("FileSystemDirectoryEntry")}} 对象。
例子
diff --git a/files/zh-cn/web/api/datatransferitem/kind/index.html b/files/zh-cn/web/api/datatransferitem/kind/index.html index 36ea486d48f230..6b0dbd881cbe39 100644 --- a/files/zh-cn/web/api/datatransferitem/kind/index.html +++ b/files/zh-cn/web/api/datatransferitem/kind/index.html @@ -14,7 +14,7 @@ ---DataTransferItem.kind 是一个只读属性，它返回一个 {{domxref("DataTransferItem")}} 用来表示拖拽项(drag data item)的类型: 一些文本或者一些文件。
DataTransferItem.kind 是一个只读属性，它返回一个 {{domxref("DataTransferItem")}} 用来表示拖拽项 (drag data item) 的类型: 一些文本或者一些文件。
语法
@@ -23,7 +23,7 @@语法
返回值
-{{domxref("DOMString")}} 用来表示拖拽项(drag data item)的类型. 它的值必须是以下值中的一个:
+{{domxref("DOMString")}} 用来表示拖拽项 (drag data item) 的类型. 它的值必须是以下值中的一个：
'file'
@@ -34,7 +34,7 @@ - {{domxref("DataTransfer.type()")}} -
- MIME类型不完整列表 +
- MIME 类型不完整列表
- 文件和目录条目API -
- 文件系统API简介 +
- 文件和目录条目 API +
- 文件系统 API 简介
- {{domxref("DataTransferItem")}}
- {{domxref("FileSystemEntry")}}，{{domxref("FileSystemFileEntry")}}和{{domxref("FileSystemDirectoryEntry")}}
- 活动：{{event("dragover")}}和{{event("drop")}} diff --git a/files/zh-cn/web/api/datatransferitemlist/index.html b/files/zh-cn/web/api/datatransferitemlist/index.html index f6badcae53a4cd..c75744ec06c1a6 100644 --- a/files/zh-cn/web/api/datatransferitemlist/index.html +++ b/files/zh-cn/web/api/datatransferitemlist/index.html @@ -26,7 +26,7 @@
- {{domxref("DataTransferItemList.clear()")}}
- 清空拖动项列表。
- {{domxref("DataTransferItemList.DataTransferItem()")}} -
- 取值方法：返回给定下标的{{domxref("DataTransferItem")}}对象. +
- 取值方法：返回给定下标的{{domxref("DataTransferItem")}}对象。
返回值
例子
-下面这个例子是 kind 属性的用法.
下面这个例子是 kind 属性的用法。
function drop_handler(ev) {
console.log("Drop");
diff --git a/files/zh-cn/web/api/datatransferitem/type/index.html b/files/zh-cn/web/api/datatransferitem/type/index.html
index 04f79c5b0270a6..370bfc973956cf 100644
--- a/files/zh-cn/web/api/datatransferitem/type/index.html
+++ b/files/zh-cn/web/api/datatransferitem/type/index.html
@@ -5,9 +5,9 @@
---
{{APIRef("HTML Drag and Drop API")}}
-只读属性DataTransferItem.type 返回代表拖动数据项的 {{domxref("DataTransferItem")}} 对象的类型（格式）。 type 是一个Unicode字符串，通常由MIME给出，不过不需要MIME类型。
+只读属性DataTransferItem.type 返回代表拖动数据项的 {{domxref("DataTransferItem")}} 对象的类型（格式）。 type 是一个 Unicode 字符串，通常由 MIME 给出，不过不需要 MIME 类型。
-举例一些类型: text/plain 和 text/html.
+举例一些类型：text/plain 和 text/html.
语法
@@ -65,5 +65,5 @@ 另见
如果由文件描述的项目DataTransferItem是文件，则webkitGetAsEntry()返回FileSystemFileEntry或FileSystemDirectoryEntry表示它。如果该项不是文件，null则返回。
此功能webkitGetAsEntry()在此时非包含Firefox的非WebKit浏览器中实现; 它可能会getAsEntry()在以后简单地重命名，所以你应该进行防御性编码，寻找两者。
此功能webkitGetAsEntry()在此时非包含 Firefox 的非 WebKit 浏览器中实现; 它可能会getAsEntry()在以后简单地重命名，所以你应该进行防御性编码，寻找两者。
语法
@@ -19,15 +19,15 @@参数
返回值
-FileSystemEntry基于A 的对象描述被删除的项目。这将是FileSystemFileEntry或FileSystemDirectoryEntry。
FileSystemEntry基于 A 的对象描述被删除的项目。这将是FileSystemFileEntry或FileSystemDirectoryEntry。
示例
在此示例中，创建了一个放置区域，该放置区域drop通过扫描已删除的文件和目录来响应事件，从而输出分层目录列表。
HTML内容
+HTML 内容
-HTML建立了放置区本身，它是<div>具有ID 的元素"dropzone"，以及带有ID 的无序列表元素"listing"。
HTML 建立了放置区本身，它是<div>具有 ID 的元素"dropzone"，以及带有 ID 的无序列表元素"listing"。
<p>Drag files and/or directories to the box below!</p>
@@ -42,7 +42,7 @@ HTML内容
<ul id="listing">
</ul>CSS内容
+CSS 内容
此处显示示例使用的样式。
@@ -70,12 +70,12 @@CSS内容
font: 14px "Arial", sans-serif; } -JavaScript内容
+JavaScript 内容
首先，让我们看一下递归scanFiles()函数。该函数将FileSystemEntry表示要扫描和处理的文件系统中的条目（item参数）和插入内容列表（container参数）的元素作为输入。
请注意，要读取目录中的所有文件，readEntries需要重复调用，直到它返回一个空数组。在基于Chromium的浏览器中，以下示例仅返回最多100个条目。
请注意，要读取目录中的所有文件，readEntries需要重复调用，直到它返回一个空数组。在基于 Chromium 的浏览器中，以下示例仅返回最多 100 个条目。
let dropzone = document.getElementById("dropzone");
@@ -101,11 +101,11 @@ JavaScript内容
scanFiles()首先创建一个新<li>元素来表示正在扫描的项目，将项目的名称作为文本内容插入其中，然后将其附加到容器中。容器在此示例中始终是列表元素，您很快就会看到。
-一旦当前项目在列表中，isDirectory就会检查项目的属性。如果该项目是目录，我们需要递归到该目录。第一步是创建一个FileSystemDirectoryReaderto来处理获取目录的内容。这是通过调用item的createReader()方法完成的。然后<ul>创建一个new 并将其附加到父列表; 这将包含列表层次结构中下一级别的目录内容。
+一旦当前项目在列表中，isDirectory就会检查项目的属性。如果该项目是目录，我们需要递归到该目录。第一步是创建一个FileSystemDirectoryReaderto 来处理获取目录的内容。这是通过调用 item 的createReader()方法完成的。然后<ul>创建一个 new 并将其附加到父列表; 这将包含列表层次结构中下一级别的目录内容。
之后，directoryReader.readEntries()调用读取目录中的所有条目。反过来，这些都被传递到递归调用scanFiles()以处理它们。其中任何文件都只是插入到列表中; 将任何目录插入到列表中，并在下面添加列表层次结构的新级别，依此类推。
-然后是事件处理程序。首先，我们阻止dragover事件由默认处理程序处理，以便我们的drop区域可以接收drop：
+然后是事件处理程序。首先，我们阻止dragover事件由默认处理程序处理，以便我们的 drop 区域可以接收 drop：
dropzone.addEventListener("dragover", function(event) {
event.preventDefault();
@@ -160,7 +160,7 @@ Specifications
-此API没有官方的W3C或WHATWG规范。
+此 API 没有官方的 W3C 或 WHATWG 规范。
浏览器兼容性
@@ -169,8 +169,8 @@ 浏览器兼容性也可以看看
-
-
方法
示例
diff --git a/files/zh-cn/web/api/datatransferitemlist/length/index.html b/files/zh-cn/web/api/datatransferitemlist/length/index.html index c8db1233a1d948..1a774c0e3d6da2 100644 --- a/files/zh-cn/web/api/datatransferitemlist/length/index.html +++ b/files/zh-cn/web/api/datatransferitemlist/length/index.html @@ -3,7 +3,7 @@ slug: Web/API/DataTransferItemList/length translation_of: Web/API/DataTransferItemList/length --- -{{domxref("DataTransferItemList")}} 接口的只读属性length 返回当前拖动项列表中项目的数量.
{{domxref("DataTransferItemList")}} 接口的只读属性length 返回当前拖动项列表中项目的数量。
语法
@@ -12,7 +12,7 @@语法
值
-列表中拖动项的数量，如果列表为空或禁用则为0。如果列表的{{domxref("DataTransfer")}}对象未与拖动数据存储关联，则认为拖动列表被禁用。
+列表中拖动项的数量，如果列表为空或禁用则为 0。如果列表的{{domxref("DataTransfer")}}对象未与拖动数据存储关联，则认为拖动列表被禁用。
示例
diff --git a/files/zh-cn/web/api/devicemotionevent/acceleration/index.html b/files/zh-cn/web/api/devicemotionevent/acceleration/index.html index 5754f8f4c8c2ea..65ff6151a096be 100644 --- a/files/zh-cn/web/api/devicemotionevent/acceleration/index.html +++ b/files/zh-cn/web/api/devicemotionevent/acceleration/index.html @@ -11,9 +11,9 @@ ---{{ ApiRef("Device Orientation Events") }}
-acceleration属性会返回设备的加速度记录（单位：m / s2）。
+acceleration 属性会返回设备的加速度记录（单位：m / s2）。
-语法
@@ -26,11 +26,11 @@值
x
- - 表示x轴（西到东）上的加速度 +
- 表示 x 轴（西到东）上的加速度
y
- - 表示y轴（南到北）上的加速度 +
- 表示 y 轴（南到北）上的加速度
z
- - 表示z轴（下到上）上的加速度 +
- 表示 z 轴（下到上）上的加速度
说明
diff --git a/files/zh-cn/web/api/devicemotionevent/accelerationincludinggravity/index.html b/files/zh-cn/web/api/devicemotionevent/accelerationincludinggravity/index.html index 88f8730fd7f8c7..d97ef81ce54fab 100644 --- a/files/zh-cn/web/api/devicemotionevent/accelerationincludinggravity/index.html +++ b/files/zh-cn/web/api/devicemotionevent/accelerationincludinggravity/index.html @@ -11,7 +11,7 @@ ---{{ ApiRef("Device Orientation Events") }}
-accelerationIncludingGravity属性返回设备的加速度的记录，单位为米每秒平方（m / s2）。与已移除重力加速度的{{domxref("DeviceMotionEvent.acceleration")}}不同，此值是由用户引起的设备的加速度和由重力加速度的总和。
+accelerationIncludingGravity 属性返回设备的加速度的记录，单位为米每秒平方（m / s2）。与已移除重力加速度的{{domxref("DeviceMotionEvent.acceleration")}}不同，此值是由用户引起的设备的加速度和由重力加速度的总和。
此值通常不如{{domxref("DeviceMotionEvent.acceleration")}}实用，但是在部分不能自动从加速度数据中移除重力加速度的设备（例如没有陀螺仪的设备），是唯一可用值。
@@ -26,11 +26,11 @@值
x
- - 表示x轴（西到东）上的加速度 +
- 表示 x 轴（西到东）上的加速度
y
- - 表示y轴（南到北）上的加速度 +
- 表示 y 轴（南到北）上的加速度
z
- - 表示z轴（下到上）上的加速度 +
- 表示 z 轴（下到上）上的加速度
说明
diff --git a/files/zh-cn/web/api/devicemotionevent/devicemotionevent/index.html b/files/zh-cn/web/api/devicemotionevent/devicemotionevent/index.html index 72de7a63f32d5f..a756a8e1641fb7 100644 --- a/files/zh-cn/web/api/devicemotionevent/devicemotionevent/index.html +++ b/files/zh-cn/web/api/devicemotionevent/devicemotionevent/index.html @@ -19,9 +19,9 @@参数
options{{Optional_Inline}}-
-
acceleration: 一个对象，包含设备在X，Y和Z三个轴线上的加速度。加速度的单位为m/s2.
- accelerationIncludingGravity: 一个对象，包含设备在X，Y和Z三个轴线上，重力作用下的加速度。加速度的单位为m/s2.
- rotationRate: 一个对象，包含设备的定向在三个定向轴alpha, beta 和 gamma上的偏移比率。偏移比率的单位是每秒偏移的角度。
+ acceleration: 一个对象，包含设备在 X，Y 和 Z 三个轴线上的加速度。加速度的单位为m/s2.
+ accelerationIncludingGravity: 一个对象，包含设备在 X，Y 和 Z 三个轴线上，重力作用下的加速度。加速度的单位为m/s2.
+ rotationRate: 一个对象，包含设备的定向在三个定向轴 alpha, beta 和 gamma 上的偏移比率。偏移比率的单位是每秒偏移的角度。interval: 时间间隔，单位毫秒，表示设备获取数据的间隔时间。
{{apiref("Device Orientation Events")}}{{SeeCompatTable}}
-DeviceMotionEvent 为web开发者提供了关于设备的位置和方向的改变速度的信息。
DeviceMotionEvent 为 web 开发者提供了关于设备的位置和方向的改变速度的信息。
警告：目前，Firefox 和 Chrome 处理坐标的方式不同。 使用时要多加注意。
@@ -31,11 +31,11 @@属性
- {{domxref("DeviceMotionEvent.acceleration")}} {{readonlyinline}} -
- 提供了设备在X,Y,Z轴方向上加速度的对象。加速度的单位为 m/s2。 +
- 提供了设备在 X,Y,Z 轴方向上加速度的对象。加速度的单位为 m/s2。
- {{domxref("DeviceMotionEvent.accelerationIncludingGravity")}} {{readonlyinline}} -
- 提供了设备在X,Y,Z轴方向上带重力的加速度的对象。加速度的单位为 m/s2 +
- 提供了设备在 X,Y,Z 轴方向上带重力的加速度的对象。加速度的单位为 m/s2
- {{domxref("DeviceMotionEvent.rotationRate")}} {{readonlyinline}} -
- 提供了设备在 alpha，beta， gamma轴方向上旋转的速率的对象。旋转速率的单位为度每秒。 +
- 提供了设备在 alpha，beta， gamma 轴方向上旋转的速率的对象。旋转速率的单位为度每秒。
- {{domxref("DeviceMotionEvent.interval")}} {{readonlyinline}}
- 表示从设备获取数据的间隔时间，单位是毫秒。
返回设备围绕其每个轴（x、y、z）旋转的速率（单位：度/秒）。
-语法
@@ -23,15 +23,15 @@语法
值
-rotationRates属性是一个只读对象，用于描述设备围绕其每个轴的旋转速率：
+rotationRates 属性是一个只读对象，用于描述设备围绕其每个轴的旋转速率：
alpha
- - 设备绕其Z轴旋转的速率（即绕垂直于屏幕的线旋转） +
- 设备绕其 Z 轴旋转的速率（即绕垂直于屏幕的线旋转）
beta
- - 设备绕其X轴旋转的速率（即从前到后旋转） +
- 设备绕其 X 轴旋转的速率（即从前到后旋转）
gamma
- - 设备绕其Y轴旋转的速率（即从一侧到另一侧） +
- 设备绕其 Y 轴旋转的速率（即从一侧到另一侧）
说明
diff --git a/files/zh-cn/web/api/devicemotioneventacceleration/index.html b/files/zh-cn/web/api/devicemotioneventacceleration/index.html index aa61e31d363123..414ffe7d695f2d 100644 --- a/files/zh-cn/web/api/devicemotioneventacceleration/index.html +++ b/files/zh-cn/web/api/devicemotioneventacceleration/index.html @@ -21,11 +21,11 @@属性
- {{domxref("DeviceAcceleration.x")}} {{readonlyInline}} -
- 沿X轴的加速度量（只读） +
- 沿 X 轴的加速度量（只读）
- {{domxref("DeviceAcceleration.y")}} {{readonlyInline}} -
- 沿Y轴的加速度量（只读） +
- 沿 Y 轴的加速度量（只读）
- {{domxref("DeviceAcceleration.z")}} {{readonlyInline}} -
- 沿Z轴的加速度量（只读） +
- 沿 Z 轴的加速度量（只读）
说明
diff --git a/files/zh-cn/web/api/deviceorientationevent/absolute/index.html b/files/zh-cn/web/api/deviceorientationevent/absolute/index.html index 2448d502c9e5e5..cf643fbdb5e05e 100644 --- a/files/zh-cn/web/api/deviceorientationevent/absolute/index.html +++ b/files/zh-cn/web/api/deviceorientationevent/absolute/index.html @@ -5,7 +5,7 @@ ---{{ apiref("Device Orientation Events") }}
-表示该设备是否提供绝对定位数据 (这个数据是关于地球的坐标系) 或者使用了由设备决定的专门的坐标系. 查看更多关于 Orientation and motion data explained 的细节.
+表示该设备是否提供绝对定位数据 (这个数据是关于地球的坐标系) 或者使用了由设备决定的专门的坐标系。查看更多关于 Orientation and motion data explained 的细节。
语法
diff --git a/files/zh-cn/web/api/deviceorientationevent/alpha/index.html b/files/zh-cn/web/api/deviceorientationevent/alpha/index.html index aef196c6f23df2..87abf137fea8da 100644 --- a/files/zh-cn/web/api/deviceorientationevent/alpha/index.html +++ b/files/zh-cn/web/api/deviceorientationevent/alpha/index.html @@ -8,7 +8,7 @@ ---{{ ApiRef("Device Orientation Events") }}
-返回设备旋转时Z轴的值；即：设备围绕屏幕中心扭转的角度。 详细信息请查看方向和运动数据。
+返回设备旋转时 Z 轴的值；即：设备围绕屏幕中心扭转的角度。 详细信息请查看方向和运动数据。
Syntax
diff --git a/files/zh-cn/web/api/deviceorientationevent/beta/index.html b/files/zh-cn/web/api/deviceorientationevent/beta/index.html index 4b942e1482f48d..7bcf13a8bd398f 100644 --- a/files/zh-cn/web/api/deviceorientationevent/beta/index.html +++ b/files/zh-cn/web/api/deviceorientationevent/beta/index.html @@ -5,7 +5,7 @@ ---{{ ApiRef("Device Orientation Events") }}
-返回设备旋转时X轴的值. 即: 角度的数值, 范围介于-180 ------ 180之间 表示设备正在向前或向后倾斜.更多信息见 方向和运动数据详解
+返回设备旋转时 X 轴的值。即: 角度的数值，范围介于-180 ------ 180 之间 表示设备正在向前或向后倾斜。更多信息见 方向和运动数据详解
语法
diff --git a/files/zh-cn/web/api/deviceorientationevent/gamma/index.html b/files/zh-cn/web/api/deviceorientationevent/gamma/index.html index d838394f7f02af..ac4f82b299302a 100644 --- a/files/zh-cn/web/api/deviceorientationevent/gamma/index.html +++ b/files/zh-cn/web/api/deviceorientationevent/gamma/index.html @@ -5,7 +5,7 @@ ---{{ apiref("Device Orientation Events") }}
-返回设备旋转时Y轴的值;即，多少度，介于之间-90和90，通过该装置被接通向左或向右。见方向和运动数据解释的细节。
返回设备旋转时 Y 轴的值;即，多少度，介于之间-90和90，通过该装置被接通向左或向右。见方向和运动数据解释的细节。
Syntax
diff --git a/files/zh-cn/web/api/deviceorientationevent/index.html b/files/zh-cn/web/api/deviceorientationevent/index.html index 7393c8147c3805..d643ed3f142eeb 100644 --- a/files/zh-cn/web/api/deviceorientationevent/index.html +++ b/files/zh-cn/web/api/deviceorientationevent/index.html @@ -5,10 +5,10 @@ ---{{apiref("Device Orientation Events")}}{{SeeCompatTable}}
-DeviceOrientationEvent提供给网页开发者当设备（指手机，平板等移动设备）在浏览页面时物理旋转的信息。
DeviceOrientationEvent 提供给网页开发者当设备（指手机，平板等移动设备）在浏览页面时物理旋转的信息。
警告: 当前,火狐浏览器和谷歌浏览器并未能用同一种方式实现，在使用请注意。（见后文）
+警告： 当前，火狐浏览器和谷歌浏览器并未能用同一种方式实现，在使用请注意。（见后文）
属性
@@ -17,12 +17,12 @@属性
例子
diff --git a/files/zh-cn/web/api/document_object_model/examples/index.html b/files/zh-cn/web/api/document_object_model/examples/index.html index 0b3e4b75e8a91a..70cd538f99a408 100644 --- a/files/zh-cn/web/api/document_object_model/examples/index.html +++ b/files/zh-cn/web/api/document_object_model/examples/index.html @@ -3,10 +3,10 @@ slug: Web/API/Document_Object_Model/Examples tags: - DOM - - DOM参考 + - DOM 参考 translation_of: Web/API/Document_Object_Model/Examples --- -本章介绍提供了一些长例子来介绍如何使用 DOM 进行 Web 以及 XML 开发。在可能的情况下，例子只使用普通API ，技巧以及JavaScript模式来操作文档对象。
+本章介绍提供了一些长例子来介绍如何使用 DOM 进行 Web 以及 XML 开发。在可能的情况下，例子只使用普通 API ，技巧以及 JavaScript 模式来操作文档对象。
示例 1: 高度和宽度
@@ -97,7 +97,7 @@示例 2
示例 3: 操作样式
-
在下面这个简单的例子中，使用的element(DOM元素)的style对象即对象的 CSS 样式属性来获取一个HTML段落元素的一些基本样式属性，DOM 可以检索和设置CSS 样式。在本例中，你可以直接控制单个样式属性。在下一个的例子里（见例4），你可以使用stylesheets对象(样式表)及其cssRules对象改变整个文档的样式。
+在下面这个简单的例子中，使用的 element(DOM 元素) 的 style 对象即对象的 CSS 样式属性来获取一个 HTML 段落元素的一些基本样式属性，DOM 可以检索和设置 CSS 样式。在本例中，你可以直接控制单个样式属性。在下一个的例子里（见例 4），你可以使用 stylesheets 对象 (样式表) 及其 cssRules 对象改变整个文档的样式。
<!DOCTYPE html> <html lang="en"> @@ -127,7 +127,7 @@
示例 4: 使用样式表
-styleSheets是document对象的一个属性，返回的是载入文档的样式列表。你可以通过styleSheets、style和CSSRule对象来获取样式表和每条样式规则，下面的例子把所有的样式规则中的选择器文本（字符串）打印到控制台中。
+styleSheets 是 document 对象的一个属性，返回的是载入文档的样式列表。你可以通过 styleSheets、style 和 CSSRule 对象来获取样式表和每条样式规则，下面的例子把所有的样式规则中的选择器文本（字符串）打印到控制台中。
ss = document.styleSheets; @@ -263,7 +263,7 @@--
不同浏览器之间事件对象的属性有很大不同，W3C DOM2事件规范规定了事件的标准属性，然而，许多浏览器都大大扩展了这些。
+不同浏览器之间事件对象的属性有很大不同，W3C DOM2 事件规范规定了事件的标准属性，然而，许多浏览器都大大扩展了这些。
将下面的代码放到一个空白的文本文件，并将其加载到各种浏览器，你一定会对各种浏览器之间的不一致（事件属性的名称及其数量）感到惊讶。你可能还喜欢在这个页面加入一些元素，并调用不同的事件处理函数。
@@ -329,7 +329,7 @@示例 8: 使用 DOM Table 接口(Interface)
+示例 8: 使用 DOM Table 接口 (Interface)
DOM HTMLTableElement 接口提供了一些方便的方法用于创建和操作表。两种常用的方法是{{domxref("HTMLTableElement.insertRow")}}和{{domxref("tableRow.insertCell")}}。
diff --git a/files/zh-cn/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/zh-cn/web/api/document_object_model/how_to_create_a_dom_tree/index.html index f10cc40ff73dab..c3a6f66555ce67 100644 --- a/files/zh-cn/web/api/document_object_model/how_to_create_a_dom_tree/index.html +++ b/files/zh-cn/web/api/document_object_model/how_to_create_a_dom_tree/index.html @@ -1,9 +1,9 @@ --- -title: 如何创建一个DOM树 +title: 如何创建一个 DOM 树 slug: Web/API/Document_Object_Model/How_to_create_a_DOM_tree translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree --- -这个页面讲的是如何利用 JavaScript 中的 DOM Core API 来创建和修改 DOM 对象。它适用于特权（扩展）和非特权（网页）代码中的所有基于Gecko的应用程序（如Firefox）。
+这个页面讲的是如何利用 JavaScript 中的 DOM Core API 来创建和修改 DOM 对象。它适用于特权（扩展）和非特权（网页）代码中的所有基于 Gecko 的应用程序（如 Firefox）。
Dynamically creating a DOM tree
diff --git a/files/zh-cn/web/api/document_object_model/index.html b/files/zh-cn/web/api/document_object_model/index.html index 656ca763f8913a..850ef766f111ac 100644 --- a/files/zh-cn/web/api/document_object_model/index.html +++ b/files/zh-cn/web/api/document_object_model/index.html @@ -10,9 +10,9 @@ ---{{DefaultAPISidebar("DOM")}}
-文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。
+文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM 模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点 (node)，每个节点都包含着对象 (objects)。DOM 的方法 (methods) 让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。
-这里还有一篇关于DOM的 介绍 。
+这里还有一篇关于 DOM 的 介绍 。
DOM 接口
@@ -60,7 +60,7 @@DOM 接口过时的 DOM 接口
-DOM模型已经被高度简化了。为此，以下出现在DOM level 3或更早的规范里的接口已经被移除了。 现在不是非常确定是否有一些会被重新引进，但是当前应该把它们看作废弃的，应当避免使用:
+DOM 模型已经被高度简化了。为此，以下出现在 DOM level 3 或更早的规范里的接口已经被移除了。 现在不是非常确定是否有一些会被重新引进，但是当前应该把它们看作废弃的，应当避免使用：
@@ -88,7 +88,7 @@
HTML 接口
{{domxref("HTMLDocument")}} 接口描述了包含 HTML 的文档。注意：HTML 规范也继承了{{domxref("Document")}} 接口。
-一个
+HTMLDocument对象还可以访问浏览器的各种功能：例如使用 {{domxref("Window")}} 接口来绘制的标签或窗口，与之关联的样式 {{domxref("window.style", "Style")}}（通常是CSS），浏览器相对于上下文的历史记录 {{domxref("window.history", "History")}}，以及文档内的选区 {{domxref("Selection")}} 等。一个
HTMLDocument对象还可以访问浏览器的各种功能：例如使用 {{domxref("Window")}} 接口来绘制的标签或窗口，与之关联的样式 {{domxref("window.style", "Style")}}（通常是 CSS），浏览器相对于上下文的历史记录 {{domxref("window.history", "History")}}，以及文档内的选区 {{domxref("Selection")}} 等。HTML 元素接口
@@ -295,7 +295,7 @@-
注意: Starting in {{Gecko("5.0")}},the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed like arrays; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.
+注意： Starting in {{Gecko("5.0")}},the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed like arrays; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.
Static type
diff --git a/files/zh-cn/web/api/document_object_model/introduction/index.html b/files/zh-cn/web/api/document_object_model/introduction/index.html index 5672ada4ec6cb7..d165da7cab2cf6 100644 --- a/files/zh-cn/web/api/document_object_model/introduction/index.html +++ b/files/zh-cn/web/api/document_object_model/introduction/index.html @@ -1,5 +1,5 @@ --- -title: DOM概述 +title: DOM 概述 slug: Web/API/Document_Object_Model/Introduction tags: - DOM @@ -12,17 +12,17 @@- +什么是 DOM?
-文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
+文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将 web 页面和脚本或程序语言连接起来。
-一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。 DOM是web页面的完全的面向对象表述，它能够使用如 JavaScript等脚本语言进行修改。
+一个 web 页面是一个文档。这个文档可以在浏览器窗口或作为 HTML 源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。 DOM 是 web 页面的完全的面向对象表述，它能够使用如 JavaScript 等脚本语言进行修改。
-W3C DOM 和WHATWG DOM标准在绝大多数现代浏览器中都有对DOM的基本实现。许多浏览器提供了对W3C标准的扩展，所以在使用时必须注意，文档可能会在多种浏览器上使用不同的DOM来访问。
+W3C DOM 和WHATWG DOM标准在绝大多数现代浏览器中都有对 DOM 的基本实现。许多浏览器提供了对 W3C 标准的扩展，所以在使用时必须注意，文档可能会在多种浏览器上使用不同的 DOM 来访问。
例如，W3C DOM 中指定下面代码中的
@@ -32,17 +32,17 @@getElementsByTagName方法必须要返回所有<P>元素的列表：什么是 DOM?
alert(paragraphs[0].nodeName);所有操作和创建web页面的属性，方法和事件都会被组织成对象的形式（例如，
+document对象表示文档本身，table对象实现了特定的HTMLTableElementDOM 接口来访问HTML 表格等）。本文会介绍基于 Gecko浏览器的 DOM 面向对象引用。所有操作和创建 web 页面的属性，方法和事件都会被组织成对象的形式（例如，
document对象表示文档本身，table对象实现了特定的HTMLTableElementDOM 接口来访问 HTML 表格等）。本文会介绍基于 Gecko 浏览器的 DOM 面向对象引用。DOM 和 JavaScript
-上面简短的示例和这个参考文档中几乎所有的示例一样，都使用了JavaScript。也就是说，它虽然是用JavaScript编写的， 却可以通过 DOM 来访问文档和其中的元素。DOM 并不是一个编程语言，但如果没有DOM， JavaScript 语言也不会有任何网页，XML页面以及涉及到的元素的概念或模型。在文档中的每个元素— 包括整个文档，文档头部， 文档中的表格，表头，表格中的文本 — 都是文档所属于的文档对象模型（DOM）的一部分，因此它们可以使用DOM和一个脚本语言如 JavaScript，来访问和处理。
+上面简短的示例和这个参考文档中几乎所有的示例一样，都使用了JavaScript。也就是说，它虽然是用 JavaScript 编写的， 却可以通过 DOM 来访问文档和其中的元素。DOM 并不是一个编程语言，但如果没有 DOM， JavaScript 语言也不会有任何网页，XML 页面以及涉及到的元素的概念或模型。在文档中的每个元素— 包括整个文档，文档头部， 文档中的表格，表头，表格中的文本 — 都是文档所属于的文档对象模型（DOM）的一部分，因此它们可以使用 DOM 和一个脚本语言如 JavaScript，来访问和处理。
-开始的时候，JavaScript和DOM是交织在一起的，但它们最终演变成了两个独立的实体。JavaScript可以访问和操作存储在DOM中的内容，因此我们可以写成这个近似的等式：
+开始的时候，JavaScript 和 DOM 是交织在一起的，但它们最终演变成了两个独立的实体。JavaScript 可以访问和操作存储在 DOM 中的内容，因此我们可以写成这个近似的等式：
API (web 或 XML 页面) = DOM + JS (脚本语言)
-DOM 被设计成与特定编程语言相独立，使文档的结构化表述可以通过单一，一致的API获得。尽管我们在本参考文档中会专注于使用JavaScript， 但DOM 也可以使用其他的语言来实现， 以Python为例，代码如下：
+DOM 被设计成与特定编程语言相独立，使文档的结构化表述可以通过单一，一致的 API 获得。尽管我们在本参考文档中会专注于使用 JavaScript， 但 DOM 也可以使用其他的语言来实现， 以 Python 为例，代码如下：
# Python DOM example import xml.dom.minidom as m @@ -51,20 +51,20 @@-DOM 和 JavaScript
p_list = doc.getElementsByTagName("para");要获取更多在网页上使用JavaScript的信息，可以参考 JavaScript technologies overview.
+要获取更多在网页上使用 JavaScript 的信息，可以参考 JavaScript technologies overview.
如何访问 DOM?
-在使用DOM时，您不需要做任何其他特殊的操作。不同的浏览器都有对DOM不同的实现， 这些实现对当前的DOM标准而言，都会呈现出不同程度的一致性，每个web浏览器都会使用一些文档对象模型，从而使页面可以被脚本语言访问。
+在使用 DOM 时，您不需要做任何其他特殊的操作。不同的浏览器都有对 DOM 不同的实现， 这些实现对当前的 DOM 标准而言，都会呈现出不同程度的一致性，每个 web 浏览器都会使用一些文档对象模型，从而使页面可以被脚本语言访问。
-当您在创建一个脚本时-无论是使用内嵌
+<script>元素或者使用在web页面脚本加载的方法— 您都可以使用document或window元素的API来操作文档本身或获取文档的子类（web页面中的各种元素）。当您在创建一个脚本时 - 无论是使用内嵌
-<script>元素或者使用在 web 页面脚本加载的方法— 您都可以使用document或window元素的 API 来操作文档本身或获取文档的子类（web 页面中的各种元素）。您的DOM编程代码可能会像下面例子一样非常简单，如使用
+window对象的alert()函数显示一个警告信息，或者使用比较复杂的方法来创建一个新的内容，如下面内容较长的实例所示。您的 DOM 编程代码可能会像下面例子一样非常简单，如使用
window对象的alert()函数显示一个警告信息，或者使用比较复杂的方法来创建一个新的内容，如下面内容较长的实例所示。<body onload="window.alert('welcome to my home page!');">-除了定义 JavaScript的 <script> 元素外， 当文档被装载（以及当整个DOM可以被有效使用时），JavaScript可以设定一个函数来运行。下面的函数会创建一个新的 H1元素，为元素添加文本，并将H1添加在文档树中。
+除了定义 JavaScript 的 <script> 元素外， 当文档被装载（以及当整个 DOM 可以被有效使用时），JavaScript 可以设定一个函数来运行。下面的函数会创建一个新的 H1 元素，为元素添加文本，并将 H1 添加在文档树中。
<html> <head> @@ -87,7 +87,7 @@如何访
重要的数据类型
-本参考文档会试图以尽可能简单的方式描述各种对象和类型。但在API中传入的不同的数据类型需要我们去注意。为简单起见，在API参考文档中的语法实例通常会使用element(s) 指代节点，使用nodeList（s）或
+element(s)来指代节点数组，使用attribute(s)来指代属性节点。本参考文档会试图以尽可能简单的方式描述各种对象和类型。但在 API 中传入的不同的数据类型需要我们去注意。为简单起见，在 API 参考文档中的语法实例通常会使用 element(s) 指代节点，使用 nodeList（s）或
element(s)来指代节点数组，使用attribute(s)来指代属性节点。下面的表格简单则描述了这些数据类型。
@@ -95,11 +95,11 @@重要的数据类型<
- document当一个成员返回 +document对象 （例如，元素的ownerDocument属性返回它所属于document) ，这个对象就是rootdocument对象本身。 DOMdocumentReference 一章对document对象进行了描述。当一个成员返回 document对象（例如，元素的ownerDocument属性返回它所属于document) ，这个对象就是 rootdocument对象本身。 DOMdocumentReference 一章对document对象进行了描述。- element+ element是指由 DOM API 中成员返回的类型为element的一个元素或节点。 例如， document.createElement() 方法会返回一个node的对象引用，也就是说这个方法返回了在DOM中创建的element。element对象实现了 DOMElement接口以及更基本的Node接口，参考文档将两者都包含在内。element是指由 DOM API 中成员返回的类型为element的一个元素或节点。 例如， document.createElement() 方法会返回一个node的对象引用，也就是说这个方法返回了在 DOM 中创建的element。element对象实现了 DOMElement接口以及更基本的Node接口，参考文档将两者都包含在内。@@ -112,24 +112,24 @@ nodeList重要的数据类型<
- attribute当 +attribute通过成员函数 (例如，通过createAttribute()方法) 返回时，它是一个为属性暴露出专门接口的对象引用。DOM中的属性也是节点，就像元素一样，只不过您可能会很少使用它。当 attribute通过成员函数 (例如，通过createAttribute()方法) 返回时，它是一个为属性暴露出专门接口的对象引用。DOM 中的属性也是节点，就像元素一样，只不过您可能会很少使用它。- namedNodeMap+ namedNodeMap和数组类似，但是条目是由name或index访问的，虽然后一种方式仅仅是为了枚举方便，因为在 list 中本来就没有特定的顺序。 出于这个目的，namedNodeMap有一个 item() 方法，你也可以从namedNodeMap添加或移除条目。namedNodeMap和数组类似，但是条目是由 name 或 index 访问的，虽然后一种方式仅仅是为了枚举方便，因为在 list 中本来就没有特定的顺序。 出于这个目的，namedNodeMap有一个 item() 方法，你也可以从namedNodeMap添加或移除条目。DOM 接口
-本指南对你可以用来操作DOM层级的对象以及事物进行了介绍。例如，
+HTML form元素从HTMLFormElement接口中获取它的name属性，从HTMLElement接口中获取className属性。在上面情况中，您要获取的属性都只在form对象中。本指南对你可以用来操作 DOM 层级的对象以及事物进行了介绍。例如，
-HTML form元素从HTMLFormElement接口中获取它的name属性，从HTMLElement接口中获取className属性。在上面情况中，您要获取的属性都只在 form 对象中。但是由DOM实现的对象和接口间的关系是容易被混淆的，因此本节会尝试去对DOM 标准中的一些常用的接口进行说明以及它们是怎样生效的。
+但是由 DOM 实现的对象和接口间的关系是容易被混淆的，因此本节会尝试去对 DOM 标准中的一些常用的接口进行说明以及它们是怎样生效的。
接口及对象
-许多对象都实现了多个接口。例如，table对象实现了 HTML Table Element Interface, 其中包括
+createCaption和insertRow方法。但由于table对象也是一个HTML元素，table也实现了Element接口（在 DOMelementReference 一章有对应描述）。最后，由于HTML元素对DOM来说也是组成web页面或XML页面节点树中的一个节点， table元素也实现更基本的Node接口，Element对象也继承这个接口。许多对象都实现了多个接口。例如，table 对象实现了 HTML Table Element Interface, 其中包括
createCaption和insertRow方法。但由于 table 对象也是一个 HTML 元素，table也实现了Element接口（在 DOMelementReference 一章有对应描述）。最后，由于 HTML 元素对 DOM 来说也是组成 web 页面或 XML 页面节点树中的一个节点， table 元素也实现更基本的Node接口，Element对象也继承这个接口。正如下面的例子，当你得到一个
@@ -144,13 +144,13 @@table对象的引用时，你经常会轮流使用对象实现的三个不同接口的方法，但并不知其所以然。接口及对象 -
DOM中核心接口
+DOM 中核心接口
-本节列出了在DOM中最常用的一些接口。此处并不会描述这些API在做什么，但是会让你了解当你使用DOM时常用的各种方法和属性。 这些常用的API在本文档最后的 DOM Examples 章节中(包含更长的实例)中有使用。
+本节列出了在 DOM 中最常用的一些接口。此处并不会描述这些 API 在做什么，但是会让你了解当你使用 DOM 时常用的各种方法和属性。 这些常用的 API 在本文档最后的 DOM Examples 章节中 (包含更长的实例) 中有使用。
-您在DOM编程时，通常使用的最多的就是
+Document和window对象。简单的说，window对象表示浏览器中的内容，而document对象是文档本身的根节点。Element继承了通用的Node接口, 将这两个接口结合后就提供了许多方法和属性可以供单个元素使用。在处理这些元素所对应的不同类型的数据时，这些元素可能会有专用的接口，如上节中的table对象的例子。您在 DOM 编程时，通常使用的最多的就是
-Document和window对象。简单的说，window对象表示浏览器中的内容，而document对象是文档本身的根节点。Element继承了通用的Node接口， 将这两个接口结合后就提供了许多方法和属性可以供单个元素使用。在处理这些元素所对应的不同类型的数据时，这些元素可能会有专用的接口，如上节中的table对象的例子。下面是在web和XML页面脚本中使用DOM时，一些常用的API简要列表。
+下面是在 web 和 XML 页面脚本中使用 DOM 时，一些常用的 API 简要列表。
document.getElementById(id)
@@ -168,13 +168,13 @@ window.scrollTo()
DOM中核
测试DOM API
+测试 DOM API
-本文档提供了每一个接口的样本示例，您可以在自身进行web开发时使用。在有些情况下， 样例是一个完整的HTML页面，通过使用 <script> 元素标签进行DOM访问, 包含必须的接口 (如 buttons)来触发表单中的脚本， 以及DOM所操作的HTML元素。 此时，您可以将实例进行剪切和复制到一个新的HTML文档中，保存完成后，在浏览器中运行该实例。
本文档提供了每一个接口的样本示例，您可以在自身进行 web 开发时使用。在有些情况下， 样例是一个完整的 HTML 页面，通过使用 <script> 元素标签进行 DOM 访问，包含必须的接口 (如 buttons) 来触发表单中的脚本， 以及 DOM 所操作的 HTML 元素。 此时，您可以将实例进行剪切和复制到一个新的 HTML 文档中，保存完成后，在浏览器中运行该实例。
然而在一些情况下，例子会更简洁。想要运行那些仅仅用来展示HTML元素接口之间基本关系的示例，你可能会想创建一个测试页面，在里面你可以通过脚本使用这些接口。下面这个非常简单的网页在header中提供了一个<script>元素，这里面你可以使用测试接口的函数，一些你可以获取、设置或者操纵的HTML元素及其属性，以及必须的web user接口来从浏览器调用这些接口。
然而在一些情况下，例子会更简洁。想要运行那些仅仅用来展示 HTML 元素接口之间基本关系的示例，你可能会想创建一个测试页面，在里面你可以通过脚本使用这些接口。下面这个非常简单的网页在 header 中提供了一个<script>元素，这里面你可以使用测试接口的函数，一些你可以获取、设置或者操纵的 HTML 元素及其属性，以及必须的 web user 接口来从浏览器调用这些接口。
你可以使用这个测试页面代码，也可以自己创建一个类似的页面来测试感兴趣的DOM接口，观察他们是如何在浏览器平台上面工作的。你可以根据需要更新test()函数里的内容，创建更多的button或者任何其他元素。
你可以使用这个测试页面代码，也可以自己创建一个类似的页面来测试感兴趣的 DOM 接口，观察他们是如何在浏览器平台上面工作的。你可以根据需要更新test()函数里的内容，创建更多的 button 或者任何其他元素。
<html> <head> @@ -219,13 +219,13 @@-测试DOM API
为了在单个页面内测试大量接口，比如会影响网页颜色的一系列属性，你可以创建一个类似的测试页面，里面有一个全面控制台，包含了button、textfield和其他HTML元素。下面的截图可以给你一些启发如何来组合使用这些接口。
+为了在单个页面内测试大量接口，比如会影响网页颜色的一系列属性，你可以创建一个类似的测试页面，里面有一个全面控制台，包含了 button、textfield 和其他 HTML 元素。下面的截图可以给你一些启发如何来组合使用这些接口。
在这个例子中，下拉菜单可以动态更新DOM可以改变的网页部件，比如背景颜色（bgColor），链接的颜色（aLink），文字的颜色（text）。当然，设计你的测试页面，测试这些你看到的接口，对你学习使用DOM更有重要意义。
在这个例子中，下拉菜单可以动态更新 DOM 可以改变的网页部件，比如背景颜色（bgColor），链接的颜色（aLink），文字的颜色（text）。当然，设计你的测试页面，测试这些你看到的接口，对你学习使用 DOM 更有重要意义。
规范
diff --git a/files/zh-cn/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/zh-cn/web/api/document_object_model/locating_dom_elements_using_selectors/index.html index cccb00156900ab..b3834f741b4fdc 100644 --- a/files/zh-cn/web/api/document_object_model/locating_dom_elements_using_selectors/index.html +++ b/files/zh-cn/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -1,13 +1,13 @@ --- -title: 使用选择器定位DOM元素 +title: 使用选择器定位 DOM 元素 slug: Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors tags: - querySelector - querySelectorAll - - 使用选择器定位DOM元素 + - 使用选择器定位 DOM 元素 translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors --- -Selectors API提供了通过与一组选择器匹配来快速轻松地从DOM检索 Element节点的方法。这比以前的技术要快得多，其中有必要使用JavaScript代码中的循环来定位您需要查找的特定项目。
Selectors API 提供了通过与一组选择器匹配来快速轻松地从 DOM 检索 Element节点的方法。这比以前的技术要快得多，其中有必要使用 JavaScript 代码中的循环来定位您需要查找的特定项目。
NodeSelector 接口
@@ -15,12 +15,12 @@NodeSelector 接口
querySelector
- - 返回节点子树内与之相匹配的第一个
Element节点。如果没有匹配的节点，则返回null。
+ - 返回节点子树内与之相匹配的第一个
Element节点。如果没有匹配的节点，则返回 null。 querySelectorAll
- - 返回一个
NodeList包含节点子树内所有与之相匹配的Element节点，如果没有相匹配的，则返回一个空节点列表。
+ - 返回一个
NodeList包含节点子树内所有与之相匹配的 Element 节点，如果没有相匹配的，则返回一个空节点列表。
querySelectorAll()返回的节点列表不是动态实时的。这和其他DOM查询方法返回动态实时节点列表不一样。querySelectorAll()返回的节点列表不是动态实时的。这和其他 DOM 查询方法返回动态实时节点列表不一样。这里有更多的例子和细节：querySelector() and querySelectorAll() ，Code snippets for querySelector.
Selectors
选择器方法接受一个或多个逗号分隔的选择器来确定应该返回哪些元素。
-例如，要选择文档中所有CSS的类(class)是warning或者note的段落(p)元素,可以这样写：
+例如，要选择文档中所有 CSS 的类 (class) 是 warning 或者 note 的段落 (p) 元素，可以这样写：
var special = document.querySelectorAll( "p.warning, p.note" );也可以通过ID来查询，例如：
+也可以通过 ID 来查询，例如：
var el = document.querySelector( "#main, #basic, #exclamation" );执行上面的代码后，el就包含了文档中元素的ID是main，basic或exclamation的所有元素中的第一个元素。
+执行上面的代码后，el 就包含了文档中元素的 ID 是 main，basic 或 exclamation 的所有元素中的第一个元素。
-querySelector() and querySelectorAll() 里可以使用任何CSS选择器。
querySelector() and querySelectorAll() 里可以使用任何 CSS 选择器。
另请参阅
diff --git a/files/zh-cn/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html b/files/zh-cn/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html index eb5726e34a1a42..8e64a1b1f23227 100644 --- a/files/zh-cn/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html +++ b/files/zh-cn/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html @@ -1,56 +1,55 @@ --- -title: 使用Javascript和DOM Interfaces来处理HTML +title: 使用 Javascript 和 DOM Interfaces 来处理 HTML slug: >- Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces tags: - DOM translation_of: >- Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces -original_slug: 使用Javascript和DOM_Interfaces来处理HTML ---简介
-本文概述了一些强大的，基本的DOM 1 级别中的方法以及如何在JavaScript中使用它们。你将会如何动态地创建，访问，控制以及移除HTML元素。这里提到的DOM方法，并非是HTML专有的；它们在XML中同样适用。这里所有的示例，在任何全面支持DOM level1 的浏览器里都能正常工作；例如Mozilla浏览器或者其他基于Mozilla的浏览器，像网景公司的下一代导航者（Navigatior）浏览器等。这里的示例代码在IE5中也能正常工作。
+本文概述了一些强大的，基本的 DOM 1 级别中的方法以及如何在 JavaScript 中使用它们。你将会如何动态地创建，访问，控制以及移除 HTML 元素。这里提到的 DOM 方法，并非是 HTML 专有的；它们在 XML 中同样适用。这里所有的示例，在任何全面支持 DOM level1 的浏览器里都能正常工作；例如 Mozilla 浏览器或者其他基于 Mozilla 的浏览器，像网景公司的下一代导航者（Navigatior）浏览器等。这里的示例代码在 IE5 中也能正常工作。
-Sample1.html概览
+Sample1.html 概览
-这段文字是通过一个实例代码来介绍了DOM的。那么我们从下面的HTML示例来开始吧。这段示例使用了DOM1的方法，从JavaScript动态创建了一个HTML表格。它创建了一个包含了四个单元格，并且在每个单元格中含有文本。单元中文字内容是“这个单元式y行x列”，来展示单元格在表格中所处的位置。
+这段文字是通过一个实例代码来介绍了 DOM 的。那么我们从下面的 HTML 示例来开始吧。这段示例使用了 DOM1 的方法，从 JavaScript 动态创建了一个 HTML 表格。它创建了一个包含了四个单元格，并且在每个单元格中含有文本。单元中文字内容是“这个单元式 y 行 x 列”，来展示单元格在表格中所处的位置。
<head>
<title>样例代码 - 使用 JavaScript 和 DOM 接口创建一个 HTML 表格</title>
<script>
function start() {
- // 获得从body的引用
+ // 获得从 body 的引用
var mybody=document.getElementsByTagName("body").item(0);
- // 创建一个TABLE的元素
+ // 创建一个 TABLE 的元素
var mytable = document.createElement("TABLE");
- // 创建一个TBODY的元素
+ // 创建一个 TBODY 的元素
var mytablebody = document.createElement("TBODY");
// 创建所有的单元格
for(j=0;j<2;j++) {
- // 创建一个TR元素
+ // 创建一个 TR 元素
var mycurrent_row=document.createElement("TR");
for(i=0;i<2;i++) {
- // 创建一个TD元素
+ // 创建一个 TD 元素
var mycurrent_cell=document.createElement("TD");
// 创建一个文本（text）节点
var currenttext=document.createTextNode("cell is row "+j+", column "+i);
- // 将我们创建的这个文本节点添加在TD元素里
+ // 将我们创建的这个文本节点添加在 TD 元素里
mycurrent_cell.appendChild(currenttext);
- // 将TD元素添加在TR里
+ // 将 TD 元素添加在 TR 里
mycurrent_row.appendChild(mycurrent_cell);
}
- // 将TR元素添加在TBODY里
+ // 将 TR 元素添加在 TBODY 里
mytablebody.appendChild(mycurrent_row);
}
- // 将TBODY元素添加在TABLE里
+ // 将 TBODY 元素添加在 TABLE 里
mytable.appendChild(mytablebody);
- // 将TABLE元素添加在BODY里
+ // 将 TABLE 元素添加在 BODY 里
mybody.appendChild(mytable);
- // 设置mytable的边界属性border为2
+ // 设置 mytable 的边界属性 border 为 2
mytable.setAttribute("border","2");
}
</script>
@@ -63,36 +62,36 @@ Sa
注意我们创建元素和文本节点的顺序：
- - 首先我们创建了TABLE元素。
- - 然后，我们创建了TABLE的子元素--TBODY。
- - 然后，我们使用循环语句创建了TBODY的子元素--TR。
- - 对于每一个TR元素，我们使用一个循环语句创建它的子元素--TD。
- - 对于每一个TD元素，我们创建单元格内的文本节点。
+ - 首先我们创建了 TABLE 元素。
+ - 然后，我们创建了 TABLE 的子元素--TBODY。
+ - 然后，我们使用循环语句创建了 TBODY 的子元素--TR。
+ - 对于每一个 TR 元素，我们使用一个循环语句创建它的子元素--TD。
+ - 对于每一个 TD 元素，我们创建单元格内的文本节点。
-现在，我们创建了TABLE，TBODY，TR，TD等元素，然后创建了文本节点；接下来，我们将每一个对象接在各自的父节点上，使用逆序：
+现在，我们创建了 TABLE，TBODY，TR，TD 等元素，然后创建了文本节点；接下来，我们将每一个对象接在各自的父节点上，使用逆序：
- - 首先，我们将每一个文本节点接在TD元素上
+
- 首先，我们将每一个文本节点接在 TD 元素上
mycurrent_cell.appendChild(currenttext);
- - 然后，我们将每一个TD元素接在他的父TR元素上。
+
- 然后，我们将每一个 TD 元素接在他的父 TR 元素上。
mycurrent_row.appendChild(mycurrent_cell);
- - 然后，我们将每一个TR元素接在他们的父TBODY元素上。
+
- 然后，我们将每一个 TR 元素接在他们的父 TBODY 元素上。
mytablebody.appendChild(mycurrent_row);
- - 下一步,我们将TBODY元素接在他的父TABLE元素上
+
- 下一步，我们将 TBODY 元素接在他的父 TABLE 元素上
mytable.appendChild(mytablebody);
- - 最后，我们将TABLE元素接在他的父元素BODY上。
+
- 最后，我们将 TABLE 元素接在他的父元素 BODY 上。
mybody.appendChild(mytable);
-请记住这个机制。你将会在W3C DOM编程中经常使用它。首先，你从上到下的创建元素；然后你从下向上的将子元素接在他们的父元素上。
+请记住这个机制。你将会在 W3C DOM 编程中经常使用它。首先，你从上到下的创建元素；然后你从下向上的将子元素接在他们的父元素上。
-下面是由javascript代码生成的HTML代码：
+下面是由 javascript 代码生成的 HTML 代码：
...
<table border="2">
@@ -104,28 +103,28 @@ Sa
...
-下面是由代码生成的TABLE及其子元素的DOM对象树：
+下面是由代码生成的 TABLE 及其子元素的 DOM 对象树：
-你可以只用一些DOM方法来创建这个表格和它内部的子元素。请在脑海中时刻保留你想要创建的数据结构的树之模型，这样有利于更简便的写出必须的代码。在图1的TABLE树中，TABLE有一个子元素TBODY。TBODY有两个子元素。每一个TR又含有两个子元素（TD）。最后，每一个TD有一个子元素--文本节点。
+你可以只用一些 DOM 方法来创建这个表格和它内部的子元素。请在脑海中时刻保留你想要创建的数据结构的树之模型，这样有利于更简便的写出必须的代码。在图 1 的 TABLE 树中，TABLE 有一个子元素 TBODY。TBODY 有两个子元素。每一个 TR 又含有两个子元素（TD）。最后，每一个 TD 有一个子元素 -- 文本节点。
-基本DOM方法 - Sample2.html
+基本 DOM 方法 - Sample2.html
getElementByTagName是文档接口（Document interface）和元素接口（Element interface）的中的方法，所以不管是根文档对象还是所有的元素对象都含有方法getElementByTagName。用来通过它们的标签名称（tag name）来获得某些元素的一系列子元素。你可以使用的方法是：element.getElementsByTagName(tagname)。
-getElementsByTagName返回一个有特定标签名称（tagname）的子元素列表。从这个子元素列表中，你可以通过调用item和你想得到的元素的下标，来获得单个元素。列表中第一个元素的下标是0。上面的方法很简单，但是当你操作一个巨大的数据结构时还是应该小心一些。 OK，我们下一个话题中要继续对我们的表格例子进行修改。下面的示例更加简单，它意图展示一些基础的方法：
+getElementsByTagName返回一个有特定标签名称（tagname）的子元素列表。从这个子元素列表中，你可以通过调用item和你想得到的元素的下标，来获得单个元素。列表中第一个元素的下标是 0。上面的方法很简单，但是当你操作一个巨大的数据结构时还是应该小心一些。 OK，我们下一个话题中要继续对我们的表格例子进行修改。下面的示例更加简单，它意图展示一些基础的方法：
<html>
<head>
<title>样例代码 - 使用 JavaScript 和 DOM 接口操作 HTML 表格</title>
<script>
function start() {
- // 获得所有的body元素列表（在这里将只有一个）
+ // 获得所有的 body 元素列表（在这里将只有一个）
myDocumentElements=document.getElementsByTagName("body");
- // 我们所需要body元素是这个列表的第一个元素
+ // 我们所需要 body 元素是这个列表的第一个元素
myBody=myDocumentElements.item(0);
- // 现在，让我们获得body的子元素中所有的p元素
+ // 现在，让我们获得 body 的子元素中所有的 p 元素
myBodyElements=myBody.getElementsByTagName("p");
// 我们所需要的是这个列表中的第二个单元元素
myP=myBodyElements.item(1);
@@ -139,16 +138,16 @@ document.getElementsByTagName("body")
- myBody=myDocumentElements.item(0);
myBodyElements=myBody.getElementsByTagName("p");
-
一旦你取得了HTML元素的DOM对象，你就可以设置它的属性了。比如，如果你希望设置背景色属性，你只需要添加：
+一旦你取得了 HTML 元素的 DOM 对象，你就可以设置它的属性了。比如，如果你希望设置背景色属性，你只需要添加：
myP.style.background="rgb(255,0,0)"; -// 设置inline的背景色风格 +// 设置 inline 的背景色风格-
使用document.createTextNode(..)创建文本节点
+使用 document.createTextNode(..) 创建文本节点
-使用文档对象来调用一个createTextNode方法并创建你自己的文本节点。你只需要传递文字内容给这个函数。返回的值就是一个展示那个文本节点信息的对象。
+使用文档对象来调用一个 createTextNode 方法并创建你自己的文本节点。你只需要传递文字内容给这个函数。返回的值就是一个展示那个文本节点信息的对象。
myTextNode=document.createTextNode("world");
-这表示你已经创建了一个TEXT——NODE（一个文字片断）类型的节点，并且它的内容是“world”，任何你对myTextNode的引用都指向这个节点对象。如果想将这个文本插入到HTML页面中，你还需要将它作为其他节点元素的子元素。
+这表示你已经创建了一个 TEXT——NODE（一个文字片断）类型的节点，并且它的内容是“world”，任何你对 myTextNode 的引用都指向这个节点对象。如果想将这个文本插入到 HTML 页面中，你还需要将它作为其他节点元素的子元素。
-使用appendChild(..)插入元素
+使用 appendChild(..) 插入元素
-那么，通过调用myP.appendChild({{ mediawiki.external('node_element') }})你可以将这个元素设置成为第二个P的一个新的子元素。
+那么，通过调用 myP.appendChild({{ mediawiki.external('node_element') }}) 你可以将这个元素设置成为第二个 P 的一个新的子元素。
myP.appendChild(myTextNode);-
在测试了这个例子之后，我们注意到，hello和world单词被组合在了一个：helloworld。事实上，当你看到HTML页面时，hello和world两个文字节点看起来更像是一个节点。但是请记住它们在文档模型中的形式--是两个节点。第二个节点是一个TEXT_NODE类型的新节点，也是第二个P标签的第二个子元素。下面的图标将在文档树种展示最近创建的文本节点对象。
+在测试了这个例子之后，我们注意到，hello 和 world 单词被组合在了一个：helloworld。事实上，当你看到 HTML 页面时，hello 和 world 两个文字节点看起来更像是一个节点。但是请记住它们在文档模型中的形式 -- 是两个节点。第二个节点是一个 TEXT_NODE 类型的新节点，也是第二个 P 标签的第二个子元素。下面的图标将在文档树种展示最近创建的文本节点对象。
使用文档对象和createElement(..)方法创建新的元素
+使用文档对象和 createElement(..) 方法创建新的元素
-你可以使用createElement来创建新的HTML元素或者任何其它你想要的元素。比如，如果你想要创建一个新的P作为BODY的子元素，你可以使用前面例子的myBody并给它接上一个新的元素节点。使用 document.createElement("tagname")可以方便的创建一个节点。如下：
+你可以使用 createElement 来创建新的 HTML 元素或者任何其它你想要的元素。比如，如果你想要创建一个新的 P 作为 BODY 的子元素，你可以使用前面例子的 myBody 并给它接上一个新的元素节点。使用 document.createElement("tagname") 可以方便的创建一个节点。如下：
myNewPTAGnode=document.createElement("p");
myBody.appendChild(myNewPTAGnode);
@@ -197,14 +196,14 @@
-使用removeChild(..)方法移除节点
+使用 removeChild(..) 方法移除节点
-
每一个节点都可以被移除.下面的一行代码移除了包含在myP(第二个p元素)下面的文本节点world。
+每一个节点都可以被移除。下面的一行代码移除了包含在 myP(第二个 p 元素) 下面的文本节点 world。
myP.removeChild(myTextNode);
-最后你可以将myTextNode（那个包含了world单词的节点）添加给我们最后创建的P元素：
+最后你可以将 myTextNode（那个包含了 world 单词的节点）添加给我们最后创建的 P 元素：
myNewPTAGnode.appendChild(myTextNode);
@@ -213,58 +212,58 @@
-动态创建一个表格(回到Sample1.html)
+动态创建一个表格 (回到 Sample1.html)
-
这一段落的剩余部分我们将继续修改我们sample1.html。下面的图展示了我们在示例中创建的表格的对象树的结构。
+这一段落的剩余部分我们将继续修改我们 sample1.html。下面的图展示了我们在示例中创建的表格的对象树的结构。
-复习一下HTML表格结构
+复习一下 HTML 表格结构
创建元素节点并将他们插入到文档树中
-sample1.html中创建表格的基本步骤是：
+sample1.html 中创建表格的基本步骤是：
-
-
- 获得body对象（文档对象的第一个元素） +
- 获得 body 对象（文档对象的第一个元素）
- 创建所有元素。 -
- 最后，根据表格结构（上面图中所示）将每一个孩子节点拼接起来。下面的一段源码是经过修改的sample1.html +
- 最后，根据表格结构（上面图中所示）将每一个孩子节点拼接起来。下面的一段源码是经过修改的 sample1.html
<head>
-<title>示例代码 - 使用Javascript和DOM Interfaces来处理HTML</title>
+<title>示例代码 - 使用 Javascript 和 DOM Interfaces 来处理 HTML</title>
<script>
function start() {
- // 获得body的引用
+ // 获得 body 的引用
var mybody=document.getElementsByTagName("body").item(0);
- // 创建一个标签名称为TABLE的元素
+ // 创建一个标签名称为 TABLE 的元素
mytable = document.createElement("TABLE");
- // 创建一个标签名称为在TBODY的元素
+ // 创建一个标签名称为在 TBODY 的元素
mytablebody = document.createElement("TBODY");
// 创建所有的单元格
for(j=0;j<2;j++) {
- // 创建一个标签名称为在TR的元素
+ // 创建一个标签名称为在 TR 的元素
mycurrent_row=document.createElement("TR");
for(i=0;i<2;i++) {
- // 创建一个标签名称为在TD的元素
+ // 创建一个标签名称为在 TD 的元素
mycurrent_cell=document.createElement("TD");
// 创建一个文字节点
currenttext=document.createTextNode("cell is row "+j+", column "+i);
- // 将文字节点添加到TD单元格内
+ // 将文字节点添加到 TD 单元格内
mycurrent_cell.appendChild(currenttext);
- // 将TD单元格添加到TR行中
+ // 将 TD 单元格添加到 TR 行中
mycurrent_row.appendChild(mycurrent_cell);
}
- // 将TR行添加到TBODY中
+ // 将 TR 行添加到 TBODY 中
mytablebody.appendChild(mycurrent_row);
}
- // 将TBODY添加到TABLE中
+ // 将 TBODY 添加到 TABLE 中
mytable.appendChild(mytablebody);
- // 将TABLE添加到BODY中
+ // 将 TABLE 添加到 BODY 中
mybody.appendChild(mytable);
- // 设置边界属性为2
+ // 设置边界属性为 2
mytable.setAttribute("border","2");
}
</script>
@@ -274,36 +273,36 @@ 使用CSS和DOM来操作表格
+使用 CSS 和 DOM 来操作表格
从表格中获得一个文字节点
-
示例介绍了两个新的DOM属性。首先，使用childNodes属性来获得mycel的孩子节点列表。childNodes列表包括所有的孩子节点，无论它们的名称或类型是什么。像getElemengByTagName一样，它返回了一个节点列表。不同的是，getElementByTagName只返回指定标签名称的元素。一旦你获得了返回的列表，你可以使用item(x)方法来使用指定的元素。这个例子在表格的第二行第二个单元格中的myceltext中保存了一个文字节点。然后，运行这个例子并观察结果，他创建了一个新的文字节点，这个文字节点的内容是myceltext的值，并且将这个文字节点作为了BODY元素的一个孩子。
+示例介绍了两个新的 DOM 属性。首先，使用 childNodes 属性来获得 mycel 的孩子节点列表。childNodes 列表包括所有的孩子节点，无论它们的名称或类型是什么。像 getElemengByTagName 一样，它返回了一个节点列表。不同的是，getElementByTagName 只返回指定标签名称的元素。一旦你获得了返回的列表，你可以使用 item(x) 方法来使用指定的元素。这个例子在表格的第二行第二个单元格中的 myceltext 中保存了一个文字节点。然后，运行这个例子并观察结果，他创建了一个新的文字节点，这个文字节点的内容是 myceltext 的值，并且将这个文字节点作为了 BODY 元素的一个孩子。
-如果你的对象是一个文字节点，你可以使用data属性来回收（retrieve）节点的文字内容
+如果你的对象是一个文字节点，你可以使用 data 属性来回收（retrieve）节点的文字内容
mybody=document.getElementsByTagName("body").item(0);
mytable=mybody.getElementsByTagName("table").item(0);
mytablebody=mytable.getElementsByTagName("tbody").item(0);
myrow=mytablebody.getElementsByTagName("tr").item(1);
mycel=myrow.getElementsByTagName("td").item(1);
-// mycel的孩子节点列表的第一个元素
+// mycel 的孩子节点列表的第一个元素
myceltext=mycel.childNodes.item(0);
-// currenttext的内容是myceltext的内容
+// currenttext 的内容是 myceltext 的内容
currenttext=document.createTextNode(myceltext.data);
mybody.appendChild(currenttext);
获得一个属性的值
-在sample1的最后我们在mytable对象上调用了setAttribute。这个调用是用来设置表格的边界属性的。然后是用了getAttribute方法来获得一个属性的值：
+在 sample1 的最后我们在 mytable 对象上调用了 setAttribute。这个调用是用来设置表格的边界属性的。然后是用了 getAttribute 方法来获得一个属性的值：
mytable.getAttribute("border");
通过改变样式属性来隐藏一列
-一旦你在你的javascript变量中保存了一个对象，你就可以直接为它设置样式属性了。下面的代码是修改后的sample1.html，在这里，第二列的每一个单元格都被隐藏了。而且第一列中的每一个单元格改为使用红色背景。注意，样式属性是被直接设置的。
+一旦你在你的 javascript 变量中保存了一个对象，你就可以直接为它设置样式属性了。下面的代码是修改后的 sample1.html，在这里，第二列的每一个单元格都被隐藏了。而且第一列中的每一个单元格改为使用红色背景。注意，样式属性是被直接设置的。
<html>
<body onload="start()">
@@ -320,7 +319,7 @@ W3C 的 Dom Level 1 核心是一个用于修改文档内容树的强大的对象模型。它被所有主流浏览器支持着，包括火狐浏览器和微软IE浏览器。它是网页脚本编程的强大基础。
+
W3C 的 Dom Level 1 核心是一个用于修改文档内容树的强大的对象模型。它被所有主流浏览器支持着，包括火狐浏览器和微软 IE 浏览器。它是网页脚本编程的强大基础。
什么是内容树？
-很多HTML作者认为HTML是平面的东西 -- 一堆文字被标签包围在中间。当然还有比这个更多的内容。任何HTML文档 （或者说任何SGML文档或者 XML 文档) 是一个树状结构。 比如，以下的文档和树状结构是相似的 (虽然不是完全一致 -- 更多信息请参考 whitespace in the DOM):
+很多 HTML 作者认为 HTML 是平面的东西 -- 一堆文字被标签包围在中间。当然还有比这个更多的内容。任何 HTML 文档（或者说任何 SGML 文档或者 XML 文档) 是一个树状结构。 比如，以下的文档和树状结构是相似的 (虽然不是完全一致 -- 更多信息请参考 whitespace in the DOM):
<html>
<head>
@@ -22,13 +22,13 @@ 什么是内
-当Mozilla解析文档的时候，它首先构建一个内容树然后用它来显示这个文档。
+当 Mozilla 解析文档的时候，它首先构建一个内容树然后用它来显示这个文档。
-用于描述树状结构的术语通常出现在DOM Level 1的核心中。 我上面画的每一个方块都是这个树的一个节点。 节点上面的线条表示父子关系: 上面的父节点, 而位于下方的是子节点. 位于一个父节点下面的两个子节点是相邻的。 类似地，我们可以指代祖先和后代。（不过，表亲们太乱了。）
+用于描述树状结构的术语通常出现在 DOM Level 1 的核心中。 我上面画的每一个方块都是这个树的一个节点。 节点上面的线条表示父子关系：上面的父节点，而位于下方的是子节点。位于一个父节点下面的两个子节点是相邻的。 类似地，我们可以指代祖先和后代。（不过，表亲们太乱了。）
-DOM Level 1 核心能让我们做什么?
+DOM Level 1 核心能让我们做什么？
-W3C的DOM Level 1允许你随意改变内容树。其功能之强大足以从零构建出任何HTML文档。它允许作者在任何时候，都可以通过脚本来修改文档里的任何内容。这是网页制作者通过JavaScript动态改变DOM的最简单途径。在版本较旧的浏览器里，使用JavaScript都是通过访问全局对象 document 属性来得到文档。文档对象实现了W3C的DOM Level 1规定的文档接口。
+W3C 的 DOM Level 1 允许你随意改变内容树。其功能之强大足以从零构建出任何 HTML 文档。它允许作者在任何时候，都可以通过脚本来修改文档里的任何内容。这是网页制作者通过 JavaScript 动态改变 DOM 的最简单途径。在版本较旧的浏览器里，使用 JavaScript 都是通过访问全局对象 document 属性来得到文档。文档对象实现了 W3C 的 DOM Level 1 规定的文档接口。
一个简单例子
@@ -74,9 +74,9 @@ JavaScript Content
想学习更多？
-现在您已经熟悉了DOM的基本概念，有一个文档解释了 DOM Level 1的基本方法的基本方法。这是本文的补充。
+现在您已经熟悉了 DOM 的基本概念，有一个文档解释了 DOM Level 1 的基本方法的基本方法。这是本文的补充。
-也可以查看W3C的 DOM Level 1 核心规范文档。尽管是正式的规范文档，但十分清晰易于理解。其对于网页制作者主要有用的内容是描述不同的DOM对象及其所有属性和方法。可以继续阅读我们其它关于DOM的文档。
+也可以查看 W3C 的 DOM Level 1 核心规范文档。尽管是正式的规范文档，但十分清晰易于理解。其对于网页制作者主要有用的内容是描述不同的 DOM 对象及其所有属性和方法。可以继续阅读我们其它关于DOM 的文档。
Original Document Information
diff --git a/files/zh-cn/web/api/document_object_model/whitespace/index.html b/files/zh-cn/web/api/document_object_model/whitespace/index.html
index 929b77472ac181..534bc4be06b5bf 100644
--- a/files/zh-cn/web/api/document_object_model/whitespace/index.html
+++ b/files/zh-cn/web/api/document_object_model/whitespace/index.html
@@ -1,11 +1,11 @@
---
-title: DOM中的空白符
+title: DOM 中的空白符
slug: Web/API/Document_Object_Model/Whitespace
translation_of: Web/API/Document_Object_Model/Whitespace
---
问题说明
-DOM 中的空白符会让处理节点结构时增加不少麻烦。在Mozilla 的软件中，原始文件里所有空白符都会在 DOM 中出现（不包括标签内含的空白符）。这样的处理方式有其必要之处，一方面编辑器中可迳行排列文字、二方面 CSS 里的 white-space: pre 也才能发挥作用。 如此一来就表示：
+DOM 中的空白符会让处理节点结构时增加不少麻烦。在 Mozilla 的软件中，原始文件里所有空白符都会在 DOM 中出现（不包括标签内含的空白符）。这样的处理方式有其必要之处，一方面编辑器中可迳行排列文字、二方面 CSS 里的 white-space: pre 也才能发挥作用。 如此一来就表示：
- 有些空白符会自成一个文本节点。
@@ -38,10 +38,10 @@
-
DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 {{domxref("Document")}} 使用，就像标准的document一样，存储由节点（nodes）组成的文档结构。与document相比，最大的区别是DocumentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的{{Glossary("reflow", "重新渲染")}}，且不会导致性能等问题。
+DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 {{domxref("Document")}} 使用，就像标准的 document 一样，存储由节点（nodes）组成的文档结构。与 document 相比，最大的区别是 DocumentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的{{Glossary("reflow", "重新渲染")}}，且不会导致性能等问题。
-最常用的方法是使用文档片段作为参数（例如，任何 {{domxref("Node")}} 接口类似 {{domxref("Node.appendChild")}} 和 {{domxref("Node.insertBefore")}} 的方法），这种情况下被添加（append）或被插入（inserted）的是片段的所有子节点, 而非片段本身。因为所有的节点会被一次插入到文档中，而这个操作仅发生一个重渲染的操作，而不是每个节点分别被插入到文档中，因为后者会发生多次重渲染的操作。
+最常用的方法是使用文档片段作为参数（例如，任何 {{domxref("Node")}} 接口类似 {{domxref("Node.appendChild")}} 和 {{domxref("Node.insertBefore")}} 的方法），这种情况下被添加（append）或被插入（inserted）的是片段的所有子节点，而非片段本身。因为所有的节点会被一次插入到文档中，而这个操作仅发生一个重渲染的操作，而不是每个节点分别被插入到文档中，因为后者会发生多次重渲染的操作。
该接口在 Web 组件（Web components）中也非常有用：{{HTMLElement("template")}} 元素在其 {{domxref("HTMLTemplateElement.content")}} 属性中包含了一个 DocumentFragment。
@@ -25,7 +25,7 @@ 属性
- {{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}
- - 返回一个实时（live） {{domxref("HTMLCollection")}} ，包含所有属于
DocumentFragment 的{{domxref("Element","元素")}}类型的子对象。
+ - 返回一个实时（live）{{domxref("HTMLCollection")}}，包含所有属于
DocumentFragment 的{{domxref("Element","元素")}}类型的子对象。
- {{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}
- 返回
DocumentFragment 的第一个 {{domxref("Element")}} 类型的子对象，如果没有则返回 null 。
- {{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}
@@ -51,7 +51,7 @@ 方法
- {{domxref("DocumentFragment.querySelectorAll()")}}
- 返回在
DocumentFragment中所有的符合指定选择器的Element节点组成的NodeList数组。
- {{domxref("DocumentFragment.getElementById()")}}
- - 返回在
DocumentFragment中以文档顺序排列的第一个符合指定ID选择器的Element节点。与Document.getElementById()作用相同。
+ - 返回在
DocumentFragment中以文档顺序排列的第一个符合指定 ID 选择器的Element节点。与Document.getElementById()作用相同。
例子
diff --git a/files/zh-cn/web/api/documentfragment/queryselector/index.html b/files/zh-cn/web/api/documentfragment/queryselector/index.html
index e1f0ecff5452a8..140eaad0e9c754 100644
--- a/files/zh-cn/web/api/documentfragment/queryselector/index.html
+++ b/files/zh-cn/web/api/documentfragment/queryselector/index.html
@@ -19,7 +19,7 @@ 参数
- selectors
- - 为一个 {{domxref("DOMString")}} ，其包含一个或多个CSS选择器，多个选择器用逗号隔开。
+ - 为一个 {{domxref("DOMString")}}，其包含一个或多个 CSS 选择器，多个选择器用逗号隔开。
例子
@@ -33,16 +33,16 @@ 基本示例
CSS 语法和方法的参数问题
-传递给 querySelector 的字符串参数遵循 CSS 语法。如果 ID 或选择器不符合 CSS 语法(比如使用了半角分号和空格)，必须使用双反斜杠对字符做转义。
+传递给 querySelector 的字符串参数遵循 CSS 语法。如果 ID 或选择器不符合 CSS 语法 (比如使用了半角分号和空格)，必须使用双反斜杠对字符做转义。
<div id="foo\bar"></div>
<div id="foo:bar"></div>
<script>
document.querySelector('#foo\bar') // 啥也不匹配
-document.querySelector('#foo\\\\bar') // 第一个DIV
+document.querySelector('#foo\\\\bar') // 第一个 DIV
document.querySelector('#foo:bar') // 啥也不匹配
-document.querySelector('#foo\\:bar') // 第二个DIV
+document.querySelector('#foo\\:bar') // 第二个 DIV
</script>
diff --git a/files/zh-cn/web/api/documentfragment/queryselectorall/index.html b/files/zh-cn/web/api/documentfragment/queryselectorall/index.html
index 334b2cd22a8ec5..063d74cdf8ff9a 100644
--- a/files/zh-cn/web/api/documentfragment/queryselectorall/index.html
+++ b/files/zh-cn/web/api/documentfragment/queryselectorall/index.html
@@ -5,12 +5,12 @@
---
{{ApiRef("DOM")}}
-DocumentFragment.queryselectorall()方法返回{{domxref("NodeList")}}中的元素{{domxref("DocumentFragment")}}(使用文档节点的深度优先顺序遍历)匹配指定的选择器组。
+DocumentFragment.queryselectorall() 方法返回{{domxref("NodeList")}}中的元素{{domxref("DocumentFragment")}}(使用文档节点的深度优先顺序遍历) 匹配指定的选择器组。
-如果参数中指定的选择器无效，则会引发一个带SYNTAX_ERR值的{{domxref("DOMException")}}。
+如果参数中指定的选择器无效，则会引发一个带 SYNTAX_ERR 值的{{domxref("DOMException")}}。
-注意:这个API的定义被移动到{{domxref("ParentNode")}}接口。
+注意：这个 API 的定义被移动到{{domxref("ParentNode")}}接口。
语法
@@ -21,12 +21,12 @@ 参数
- selectors
- - 是一个{{domxref("DOMString")}}包含一个或多个用逗号分隔的CSS选择器。
+ - 是一个{{domxref("DOMString")}}包含一个或多个用逗号分隔的 CSS 选择器。
示例
-此示例返回DocumentFragment中所有div元素的列表，其中包含一个类“note”或“alert”:
+此示例返回 DocumentFragment 中所有 div 元素的列表，其中包含一个类“note”或“alert”:
var matches = documentfrag.querySelectorAll("div.note, div.alert");
diff --git a/files/zh-cn/web/api/documenttype/index.html b/files/zh-cn/web/api/documenttype/index.html
index e3c6e45caf1395..bd7df12b0ddb04 100644
--- a/files/zh-cn/web/api/documenttype/index.html
+++ b/files/zh-cn/web/api/documenttype/index.html
@@ -17,11 +17,11 @@
属性
-继承自父节点 {{domxref("Node")}}, 并实现了 {{domxref("ChildNode")}} 接口.
+继承自父节点 {{domxref("Node")}}, 并实现了 {{domxref("ChildNode")}} 接口。
- {{domxref("DocumentType.entities")}} {{readonlyInline}} {{obsolete_Inline}}
- - 一个在文档类型定义(DTD)中声明的实体{{domxref("NamedNodeMap")}}，在这个映射（map）中的每个节点实现了{{domxref("Entity")}}接口
+ - 一个在文档类型定义 (DTD) 中声明的实体{{domxref("NamedNodeMap")}}，在这个映射（map）中的每个节点实现了{{domxref("Entity")}}接口
- {{domxref("DocumentType.internalSubset")}} {{readonlyInline}} {{obsolete_Inline}}
- 一个表示内部子集的{{domxref("DOMString")}}，如果没有的话则为
null ，例："<!ELEMENT foo (bar)>"
- {{domxref("DocumentType.name")}} {{readonlyInline}}
@@ -29,18 +29,18 @@ 属性
- {{domxref("DocumentType.notations")}} {{readonlyInline}} {{obsolete_Inline}}
- 在文档类型定义（DTD）中声明符号的{{domxref("NamedNodeMap")}}，在这个映射（map）中的所有节点实现了{{domxref("Notation")}}接口
- {{domxref("DocumentType.publicId")}} {{readonlyInline}}
- - 一个{{domxref("DOMString")}}，例：HTML5中的空字符串——
"-//W3C//DTD HTML 4.01//EN"。
+ - 一个{{domxref("DOMString")}}，例：HTML5 中的空字符串——
"-//W3C//DTD HTML 4.01//EN"。
- {{domxref("DocumentType.systemId")}} {{readonlyInline}}
- - 一个{{domxref("DOMString")}}，例：HTML5中的空字符串——
"http://www.w3.org/TR/html4/strict.dtd"。
+ - 一个{{domxref("DOMString")}}，例：HTML5 中的空字符串——
"http://www.w3.org/TR/html4/strict.dtd"。
方法
-继承方法自父节点,{{domxref("Node")}}, 并实现了 {{domxref("ChildNode")}} 接口.
+继承方法自父节点，{{domxref("Node")}}, 并实现了 {{domxref("ChildNode")}} 接口。
- {{domxref("ChildNode.remove()")}} {{experimental_inline}}
- - 从父节点的子节点的列表中移除这个对象.
+ - 从父节点的子节点的列表中移除这个对象。
规范
diff --git a/files/zh-cn/web/api/dragevent/datatransfer/index.html b/files/zh-cn/web/api/dragevent/datatransfer/index.html
index 35995464104d2c..e21e3e383c5366 100644
--- a/files/zh-cn/web/api/dragevent/datatransfer/index.html
+++ b/files/zh-cn/web/api/dragevent/datatransfer/index.html
@@ -7,7 +7,7 @@
-DataEvent.dataTransfer 属性保存着拖拽操作中的数据（作为一个DataTransfer对象）
+DataEvent.dataTransfer 属性保存着拖拽操作中的数据（作为一个 DataTransfer 对象）
This property is {{readonlyInline}}.
diff --git a/files/zh-cn/web/api/dragevent/index.html b/files/zh-cn/web/api/dragevent/index.html
index 73dcd7838cc0cd..9ec5c6840785c2 100644
--- a/files/zh-cn/web/api/dragevent/index.html
+++ b/files/zh-cn/web/api/dragevent/index.html
@@ -5,7 +5,7 @@
---
{{APIRef("HTML Drag and Drop API")}}
-DragEvent 是一个表示拖、放交互的一个{{domxref("Event","DOM event")}} 接口。用户通过将指针设备（例如鼠标）放置在触摸表面上并且然后将指针拖动到新位置（诸如另一个DOM元素）来发起拖动。 应用程序可以按应用程序特定的方式自由解释拖放交互。
+DragEvent 是一个表示拖、放交互的一个{{domxref("Event","DOM event")}} 接口。用户通过将指针设备（例如鼠标）放置在触摸表面上并且然后将指针拖动到新位置（诸如另一个 DOM 元素）来发起拖动。 应用程序可以按应用程序特定的方式自由解释拖放交互。
这个接口继承 {{domxref("MouseEvent")}} 和{{domxref("Event")}}属性