diff options
author | MDN <actions@users.noreply.github.com> | 2021-10-12 00:54:10 +0000 |
---|---|---|
committer | MDN <actions@users.noreply.github.com> | 2021-10-12 00:54:10 +0000 |
commit | 80d00ef4100af00196385ee42a50f1cbfa2ab5c7 (patch) | |
tree | f6ff5d785655fa0f3f7e2d23a349c95be0192b17 /files/zh-cn/conflicting | |
parent | dd95228a0c8e1826db1eea883286e21ed40d7a34 (diff) | |
download | translated-content-80d00ef4100af00196385ee42a50f1cbfa2ab5c7.tar.gz translated-content-80d00ef4100af00196385ee42a50f1cbfa2ab5c7.tar.bz2 translated-content-80d00ef4100af00196385ee42a50f1cbfa2ab5c7.zip |
[CRON] sync translated content
Diffstat (limited to 'files/zh-cn/conflicting')
3 files changed, 209 insertions, 0 deletions
diff --git a/files/zh-cn/conflicting/web/api/mutationobserver/observe/index.html b/files/zh-cn/conflicting/web/api/mutationobserver/observe/index.html new file mode 100644 index 0000000000..2d0d8966fa --- /dev/null +++ b/files/zh-cn/conflicting/web/api/mutationobserver/observe/index.html @@ -0,0 +1,97 @@ +--- +title: MutationObserverInit.attributeFilter +slug: conflicting/Web/API/MutationObserver/observe +tags: + - API + - DOM + - DOM WHATWG + - Mutation Observers + - MutationObserverInit + - 变化 + - 属性 + - 属性过滤器 + - 监听器 +translation_of: Web/API/MutationObserverInit/attributeFilter +original_slug: Web/API/MutationObserverInit/attributeFilter +--- +<div>{{APIRef("DOM WHATWG")}}</div> + +<p><span class="seoSummary"><strong>{{domxref("MutationObserverInit")}}</strong> 字典的可选属性 <strong><code>attributeFilter</code></strong> 是一个字符串数组,用于指定要</span>监听<span class="seoSummary">变化的属性名称。</span> 如果指定了该属性,则 {{domxref("MutationObserverInit.attributes", "attributes")}} 无论是否为 <code>true</code>,属性监听都将启用。</p> + +<p>如果属性 {{domxref("MutationObserverInit.attributes", "attributes")}} 设置为 <code>true</code> ,但options对象中未包含 <code>attributeFilter</code> ,则所有属性的变化都会被监听。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">var <em>options</em> = { + <em>attributeFilter</em>: [ <em>"list"</em>, <em>"of"</em>, <em>"attribute"</em>, <em>"names"</em> ] +} +</pre> + +<h3 id="值">值</h3> + +<p>{{domxref("DOMString")}}数组, 每项指定一个要监听其变化的属性名称,没有默认值。</p> + +<p>当使用构造函数{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}创建<code>MutationObserver</code>对象时,如果options对象中存在该属性,则无论{{domxref("MutationObserverInit.attributes", "attributes")}}是否为<code>true</code>,都将启用属性监听。</p> + +<h2 id="示例">示例</h2> + +<p>在本示例中,设置了一个变化监听器来监听用于显示聊天室用户名的子树中所有元素的<code>status</code>和<code>username</code>属性的变化。这样就可以反应用户昵称或状态的更改, 例如,可以将用户标记为离开或离线。</p> + +<pre class="brush: js notranslate">function callback(mutationList) { + mutationList.forEach(function(mutation) { + switch(mutation.type) { + case "attributes": + switch(mutation.attributeName) { + case "status": + userStatusChanged(mutation.target.username, mutation.target.status); + break; + case "username": + usernameChanged(mutation.oldValue, mutation.target.username); + break; + } + break; + } + }); +} + +var userListElement = document.querySelector("#userlist"); + +var observer = new MutationObserver(callback); +observer.observe(userListElement, { + attributeFilter: [ "status", "username" ], + attributeOldValue: true, + subtree: true +});</pre> + +<p><code>callback()</code>函数将在监听器启动时传给{{domxref("MutationObserver.observe", "observe()")}}方法,用来检查{{domxref("MutationRecord")}}对象的每一项。对于代表属性更改的任何项(可以通过{{domxref("MutationRecord.type")}}的值为“ <code>attributes</code>”的值来检测),我们使用通过{{domxref("MutationRecord.attributeName")}}获得的属性名称来识别发生的更改的类型,然后将其分派给适当的处理函数。</p> + +<p>请注意,在查找本地用户数组时可以使用{{domxref("MutationRecord.oldValue")}}来获取<code>username</code>的上一个值。</p> + +<p>当observe()被调用时, options对象中指定了<code>attributeFilter</code>和{{domxref("MutationObserverInit.subtree", "subtree")}},所以id为“<code>userlist</code>”的元素的所有子树的所有节点的属性值都会被监听。{{domxref("MutationObserverInit.attributeOldValue", "attributeOldValue")}}被设置为<code>true</code>,因为我们希望在监听到值变化时可以获取到上一个值。</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-mutationobserverinit-attributefilter', 'MutationObserverInit: attributeFilter')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> + + +<p>{{Compat("api.MutationObserverInit.attributeFilter")}}</p> +</div> diff --git a/files/zh-cn/conflicting/web/api/mutationobserver/observe_2f2addbfa1019c23a6255648d6526387/index.html b/files/zh-cn/conflicting/web/api/mutationobserver/observe_2f2addbfa1019c23a6255648d6526387/index.html new file mode 100644 index 0000000000..953ec5244e --- /dev/null +++ b/files/zh-cn/conflicting/web/api/mutationobserver/observe_2f2addbfa1019c23a6255648d6526387/index.html @@ -0,0 +1,61 @@ +--- +title: MutationObserverInit +slug: conflicting/Web/API/MutationObserver/observe_2f2addbfa1019c23a6255648d6526387 +tags: + - API + - DOM + - MutationObserver +translation_of: Web/API/MutationObserverInit +original_slug: Web/API/MutationObserverInit +--- +<div>{{APIRef("DOM WHATWG")}}</div> + +<p><span class="seoSummary"><strong><code>MutationObserverInit</code></strong> 字典描述了 <code>MutationObserver</code> 的配置。因此,它主要被用作 {{domxref("MutationObserver.observe()")}} 方法的参数类型。</span></p> + +<h2 id="属性">属性</h2> + +<p>当调用 {{domxref("MutationObserver.observe", "observe()")}} 方法时,<code>childList</code>,<code>attributes</code> 或者 <code>characterData</code> 三个属性之中,至少有一个必须为 <code>true</code>,否则会抛出 <code>TypeError</code> 异常。</p> + +<dl> + <dt>{{domxref("MutationObserverInit.attributeFilter", "attributeFilter")}} {{optional_inline}}</dt> + <dd>要监视的特定属性名称的数组。如果未包含此属性,则对所有属性的更改都会触发变动通知。无默认值。</dd> + <dt>{{domxref("MutationObserverInit.attributeOldValue", "attributeOldValue")}} {{optional_inline}}</dt> + <dd>当监视节点的属性改动时,将此属性设为 <code>true</code> 将记录任何有改动的属性的上一个值。有关观察属性更改和值记录的详细信息,详见{{SectionOnPage("/en-US/docs/Web/API/MutationObserver", "Monitoring attribute values")}}。无默认值。</dd> + <dt>{{domxref("MutationObserverInit.attributes", "attributes")}} {{optional_inline}}</dt> + <dd>设为 <code>true</code> 以观察受监视元素的属性值变更。默认值为 <code>false</code>。</dd> + <dt>{{domxref("MutationObserverInit.characterData", "characterData")}} {{optional_inline}}</dt> + <dd>设为 <code>true</code> 以监视指定目标节点或子节点树中节点所包含的字符数据的变化。无默认值。</dd> + <dt>{{domxref("MutationObserverInit.characterDataOldValue", "characterDataOldValue")}} {{optional_inline}}</dt> + <dd>设为 <code>true</code> 以在文本在受监视节点上发生更改时记录节点文本的先前值。详情及例子,请查看 {{SectionOnPage("/zh-CN/docs/Web/API/MutationObserver", "Monitoring text content changes")}}。无默认值。</dd> + <dt>{{domxref("MutationObserverInit.childList", "childList")}} {{optional_inline}}</dt> + <dd>设为 <code>true</code> 以监视目标节点(如果 <code>subtree</code> 为 <code>true</code>,则包含子孙节点)添加或删除新的子节点。默认值为 <code>false</code>。</dd> + <dt>{{domxref("MutationObserverInit.subtree", "subtree")}} {{optional_inline}}</dt> + <dd>设为 <code>true</code> 以将监视范围扩展至目标节点整个节点树中的所有节点。<code>MutationObserverInit</code> 的其他值也会作用于此子树下的所有节点,而不仅仅只作用于目标节点。默认值为 <code>false</code>。</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">批注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dictdef-mutationobserverinit', 'MutationObserverInit')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> + + +<p>{{Compat("api.MutationObserverInit")}}</p> +</div> diff --git a/files/zh-cn/conflicting/web/api/mutationobserver/observe_7e3ecc5c48e14f4ecfdbe7d3aa534870/index.html b/files/zh-cn/conflicting/web/api/mutationobserver/observe_7e3ecc5c48e14f4ecfdbe7d3aa534870/index.html new file mode 100644 index 0000000000..178f35ef38 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/mutationobserver/observe_7e3ecc5c48e14f4ecfdbe7d3aa534870/index.html @@ -0,0 +1,51 @@ +--- +title: MutationObserverInit.childList +slug: conflicting/Web/API/MutationObserver/observe_7e3ecc5c48e14f4ecfdbe7d3aa534870 +translation_of: Web/API/MutationObserverInit/childList +original_slug: Web/API/MutationObserverInit/childList +--- +<div>{{APIRef("DOM WHATWG")}}</div> + +<p><span class="seoSummary">The <strong>{{domxref("MutationObserverInit")}}</strong> dictionary's optional <strong><code>childList</code></strong> property indicates whether or not to monitor the specified node or nodes for the addition or removal of new child nodes.</span></p> + +<p>If <code>childList</code> is <code>false</code> (the default), adding or removing new nodes does not trigger mutation callbacks. By setting <code>childList</code> to <code>true</code>, your callback will be invoked any time nodes are added to or removed from the DOM node or nodes being watched.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>options</em> = { + <em>childList</em>: true | false +} +</pre> + +<h3 id="Value">Value</h3> + +<p>A Boolean value indicating whether or not to invoke the callback function when new nodes are added to or removed from the section of the DOM being monitored.. If {{domxref("MutationObserverInit.subtree", "subtree")}} is <code>false</code>, only the node indicated by the observer's target node is monitored for changes. Setting <code>subtree</code> to <code>true</code> causes addition or removal of nodes anywhere within the subtree rooted at <code>target</code> to be reported.</p> + +<h2 id="Example">Example</h2> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-mutationobserverinit-childlist', 'MutationObserverInit.childList')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.MutationObserverInit.childList")}}</p> +</div> |