From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/element/outerhtml/index.html | 172 +++++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 files/zh-cn/web/api/element/outerhtml/index.html (limited to 'files/zh-cn/web/api/element/outerhtml/index.html') diff --git a/files/zh-cn/web/api/element/outerhtml/index.html b/files/zh-cn/web/api/element/outerhtml/index.html new file mode 100644 index 0000000000..ae4983baec --- /dev/null +++ b/files/zh-cn/web/api/element/outerhtml/index.html @@ -0,0 +1,172 @@ +--- +title: element.outerHTML +slug: Web/API/Element/outerHTML +tags: + - 'You Don''t Need jQuery & http://youmightnotneedjquery.com/' + - insertAdjacentHTML + - outerHTML +translation_of: Web/API/Element/outerHTML +--- +

{{APIRef("DOM")}}

+ +

 {{ domxref("element") }}  DOM接口的outerHTML属性获取描述元素（包括其后代）的序列化HTML片段。它也可以设置为用从给定字符串解析的节点替换元素。

+ +

要仅获取元素内容的HTML表示形式或替换元素的内容，请使用 {{domxref("Element.innerHTML", "innerHTML")}} 属性

+ +

语法

+ +
let content = element.outerHTML;
+
+ +

返回时，内容包含描述元素及其后代的序列化HTML片段。

+ +
element.outerHTML = content;
+
+ +

将元素替换为通过使用元素的父作为片段解析算法的上下文节点解析字符串内容生成的节点。

+ +

例子

+ +

获取一个元素的outerHTML属性的值：

+ +
// HTML:
+/*
+<div id="d">
+    <p>Content</p>
+    <p>Further Elaborated</p>
+</div>
+*/
+
+const d = document.getElementById("d");
+console.log(d.outerHTML);
+
+/*
+    字符串 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
+    被显示到控制台窗口
+*/
+
+ +

通过设置outerHTML属性来替换节点：

+ +
// HTML:
+/*
+<div id="container">
+    <div id="d">This is a div.</div>
+</div>
+*/
+
+let container = document.getElementById("container");
+let d = document.getElementById("d");
+
+console.log(container.firstChild.nodeName);
+// logs "div"
+
+d.outerHTML = "<p>This paragraph replaced the original div.</p>";
+
+console.log(container.firstChild.nodeName);
+// logs "P"
+
+/*
+    #d div不再是文档树的一部分，新段替换了它。
+    (不在页面中显示,但仍然在内存中) 
+*/
+
+ +

注意事项

+ +

如果元素没有父元素，即如果它是文档的根元素，则设置其outerHTML属性将抛出一个带有错误代码 NO_MODIFICATION_ALLOWED_ERR 的 DOMException 。例如：

+ +
document.documentElement.outerHTML = "test";
+// 抛出一个 DOMException
+
+ +

此外，虽然元素将在文档中被替换，设置了outerHTML属性的变量仍将保持对原始元素的引用：

+ +
let p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName);
+// 显示: "P"
+p.outerHTML = "<div>This div replaced a paragraph.</div>";
+
+console.log(p.nodeName);
+// 仍然为: "P";
+
+ +

 

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}{{ Spec2('DOM Parsing') }} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{ CompatGeckoDesktop("11") }}0.24.071.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("11") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

相关链接

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