From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../documentfragment/documentfragment/index.html | 89 ++++++++++++++ files/zh-cn/web/api/documentfragment/index.html | 133 +++++++++++++++++++++ .../api/documentfragment/queryselector/index.html | 81 +++++++++++++ .../documentfragment/queryselectorall/index.html | 61 ++++++++++ 4 files changed, 364 insertions(+) create mode 100644 files/zh-cn/web/api/documentfragment/documentfragment/index.html create mode 100644 files/zh-cn/web/api/documentfragment/index.html create mode 100644 files/zh-cn/web/api/documentfragment/queryselector/index.html create mode 100644 files/zh-cn/web/api/documentfragment/queryselectorall/index.html (limited to 'files/zh-cn/web/api/documentfragment') diff --git a/files/zh-cn/web/api/documentfragment/documentfragment/index.html b/files/zh-cn/web/api/documentfragment/documentfragment/index.html new file mode 100644 index 0000000000..9aef8b1e82 --- /dev/null +++ b/files/zh-cn/web/api/documentfragment/documentfragment/index.html @@ -0,0 +1,89 @@ +--- +title: DocumentFragment() +slug: Web/API/DocumentFragment/DocumentFragment +translation_of: Web/API/DocumentFragment/DocumentFragment +--- +

{{ApiRef("DOM")}}{{seeCompatTable}}

+ +

DocumentFragment() 构造函数返回一个新创建的 {{domxref("DocumentFragment")}} 对象。

+ +

语法

+ +
fragment = new DocumentFragment()
+ +

示例

+ +
fragment = new DocumentFragment();
+ +

标准

+ + + + + + + + + + + + + + +
标准状态注释
{{SpecName('DOM WHATWG', '#dom-documentfragment', 'DocumentFragment.DocumentFragment()')}}{{Spec2('DOM WHATWG')}}第一版定义。
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
功能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support31.0{{CompatGeckoDesktop("24.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
功能AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("24.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

参见

+ + diff --git a/files/zh-cn/web/api/documentfragment/index.html b/files/zh-cn/web/api/documentfragment/index.html new file mode 100644 index 0000000000..1e220d6ea3 --- /dev/null +++ b/files/zh-cn/web/api/documentfragment/index.html @@ -0,0 +1,133 @@ +--- +title: DocumentFragment +slug: Web/API/DocumentFragment +tags: + - API + - DOM + - DocumentFragment + - 参考 + - 接口 +translation_of: Web/API/DocumentFragment +--- +
{{ APIRef("DOM") }}
+ +

DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 {{domxref("Document")}} 使用，就像标准的document一样，存储由节点（nodes）组成的文档结构。与document相比，最大的区别是DocumentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的{{Glossary("reflow", "重新渲染")}}，且不会导致性能等问题。

+ +

最常用的方法是使用文档片段作为参数（例如，任何 {{domxref("Node")}} 接口类似 {{domxref("Node.appendChild")}} 和 {{domxref("Node.insertBefore")}} 的方法），这种情况下被添加（append）或被插入（inserted）的是片段的所有子节点, 而非片段本身。因为所有的节点会被一次插入到文档中，而这个操作仅发生一个重渲染的操作，而不是每个节点分别被插入到文档中，因为后者会发生多次重渲染的操作。

+ +

该接口在 Web 组件（Web components）中也非常有用：{{HTMLElement("template")}} 元素在其 {{domxref("HTMLTemplateElement.content")}} 属性中包含了一个 DocumentFragment。

+ +

可以使用{{domxref("document.createDocumentFragment")}} 方法或者构造函数来创建一个空的 DocumentFragment。

+ +

属性

+ +

该接口没有特殊的属性，其属性都继承自 {{domxref("Node")}} ，并补充了 {{domxref("ParentNode")}} 接口中的属性。

+ +
+
{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}
+
返回一个实时（live） {{domxref("HTMLCollection")}} ，包含所有属于 DocumentFragment 的{{domxref("Element","元素")}}类型的子对象。
+
{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}
+
返回 DocumentFragment 的第一个 {{domxref("Element")}} 类型的子对象，如果没有则返回 null 。
+
{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}
+
返回 DocumentFragment 的最后一个 {{domxref("Element")}} 类型的子对象，如果没有则返回 null 。
+
{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}
+
返回一个 unsigned long 给出 DocumentFragment 拥有的子项数量。
+
+ +

构造函数

+ +
+
{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}
+
返回一个空的 DocumentFragment 对象。
+
+ +

方法

+ +

该接口继承 {{domxref("Node")}} 的全部方法，并实现了 {{domxref("ParentNode")}} 接口中的方法。

+ +
+
{{domxref("DocumentFragment.querySelector()")}}
+
返回在DocumentFragment中以文档顺序排列的第一个符合指定选择器的Element节点。
+
{{domxref("DocumentFragment.querySelectorAll()")}}
+
返回在DocumentFragment中所有的符合指定选择器的Element节点组成的NodeList数组。
+
{{domxref("DocumentFragment.getElementById()")}}
+
返回在DocumentFragment中以文档顺序排列的第一个符合指定ID选择器的Element节点。与Document.getElementById()作用相同。
+
+ +

例子

+ +

HTML

+ +
<ul id="list"></ul>
+
+ +

JavaScript

+ +
const list = document.querySelector('#list');
+const fruits = ['Apple', 'Orange', 'Banana', 'Melon'];
+
+const fragment = document.createDocumentFragment();
+
+fruits.forEach(fruit => {
+  const li = document.createElement('li');
+  li.innerHTML = fruit;
+  fragment.appendChild(li);
+});
+
+list.appendChild(fragment);
+
+ +

Result

+ +

{{EmbedLiveSample('Example')}}

+ +

标准

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}{{Spec2('DOM WHATWG')}}添加了构建函数和对 {{domxref("ParentNode")}} 的实现。
{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}{{Spec2('Selectors API Level 1')}}添加 querySelector() 和 querySelectorAll() 方法。
{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM3 Core')}}和 {{SpecName('DOM2 Core')}} 一样
{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM2 Core')}}和 {{SpecName('DOM1')}} 一样
{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM1')}}最初的定义。
+ +

浏览器兼容性

+ + + +

{{Compat("api.DocumentFragment")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/api/documentfragment/queryselector/index.html b/files/zh-cn/web/api/documentfragment/queryselector/index.html new file mode 100644 index 0000000000..33d38501d6 --- /dev/null +++ b/files/zh-cn/web/api/documentfragment/queryselector/index.html @@ -0,0 +1,81 @@ +--- +title: DocumentFragment.querySelector() +slug: Web/API/DocumentFragment/querySelector +translation_of: Web/API/DocumentFragment/querySelector +--- +
{{ApiRef("DOM")}}
+ +

DocumentFragment.querySelector() 方法返回第一个在 {{domxref("DocumentFragment")}} 中的、符合选择器的元素。其使用深度优先，前序遍历规则遍历文档中的节点。如果没有匹配结果，返回 null 。

+ +

如果选择器中指定了 ID 而这个 ID 在当前文档（document）被错误地使用了多次，则返回第一个匹配的元素。

+ +

如果选择器无效，将抛出一个带有 SYNTAX_ERR 值的 {{domxref("DOMException")}} 异常。

+ +

语法

+ +
element = documentfragment.querySelector(selectors);
+ +

参数

+ +
+
selectors
+
为一个 {{domxref("DOMString")}} ，其包含一个或多个CSS选择器，多个选择器用逗号隔开。
+
+ +

例子

+ +

基本示例

+ +

在该示例中，将返回第一个位于 {{domxref("DocumentFragment")}} 的带有 "myclass" 类的元素。

+ +
var el = documentfragment.querySelector(".myclass");
+
+ +

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')     // 啥也不匹配
+document.querySelector('#foo\\:bar')   // 第二个DIV
+</script>
+
+ +

标准

+ + + + + + + + + + + + + + + + + + + +
标准状态注释
{{SpecName('Selectors API Level 2', '#queryselector', 'DocumentFragment.querySelector')}}{{Spec2('Selectors API Level 2')}}无修改，与 {{SpecName('Selectors API Level 1')}} 相同
{{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelector')}}{{Spec2('Selectors API Level 1')}}最初的定义。
+ +

浏览器兼容性

+ + + +

{{Compat("api.DocumentFragment.querySelector")}}

+ +

参考

+ + diff --git a/files/zh-cn/web/api/documentfragment/queryselectorall/index.html b/files/zh-cn/web/api/documentfragment/queryselectorall/index.html new file mode 100644 index 0000000000..d90c170022 --- /dev/null +++ b/files/zh-cn/web/api/documentfragment/queryselectorall/index.html @@ -0,0 +1,61 @@ +--- +title: DocumentFragment.querySelectorAll() +slug: Web/API/DocumentFragment/querySelectorAll +translation_of: Web/API/DocumentFragment/querySelectorAll +--- +
{{ApiRef("DOM")}}
+ +

DocumentFragment.queryselectorall()方法返回{{domxref("NodeList")}}中的元素{{domxref("DocumentFragment")}}(使用文档节点的深度优先顺序遍历)匹配指定的选择器组。

+ +

如果参数中指定的选择器无效，则会引发一个带SYNTAX_ERR值的{{domxref("DOMException")}}。

+ +
+

注意:这个API的定义被移动到{{domxref("ParentNode")}}接口。

+
+ +

语法

+ +
elementList = documentframgment.querySelectorAll(selectors);
+ +

参数

+ +
+
selectors
+
是一个{{domxref("DOMString")}}包含一个或多个用逗号分隔的CSS选择器。
+
+ +

示例

+ +

此示例返回DocumentFragment中所有div元素的列表，其中包含一个类“note”或“alert”:

+ +
var matches = documentfrag.querySelectorAll("div.note, div.alert");
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelectorAll')}}{{Spec2('Selectors API Level 1')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.DocumentFragment.querySelectorAll")}}

+ +

参阅

+ + -- cgit v1.2.3-54-g00ecf