cocoa WebView中innerhtml和outerhtml的区别

时间:2013-01-10 10:47:54

标签: objective-c macos cocoa webview

我在我的应用程序中使用cocoa webview进行富文本编辑。只是与webkit中可用的innerHtml和outerHtml方法混淆。

任何人都可以解释

之间的区别
[(DOMHTMLElement *)[[[webView mainFrame] DOMDocument] documentElement] outerHTML];

[(DOMHTMLElement *)[[[webView mainFrame] DOMDocument] documentElement] outerText];

3 个答案:

答案 0 :(得分:10)

innerHTML 是表示HTML的DOM元素的属性 在元件内部,即在打开和关闭标签之间。它有 被广泛复制,但实施方式各不相同(可能是因为它 没有公布的标准[1]),特别是它们如何对待元素 属性。

outerHTML 类似于innerHTML,它是一个元素属性 包括打开结束标签以及内容。它 并没有像innerHTML那样被广泛复制,所以它仍然或多或少 仅限IE。

<p id="pid">welcome</p>

innerHTML of element "pid" == welcome
outerHTML of element "pid" == <p id="pid">welcome</p>

和whereAs

innerText 容器的文本内容。

outerText 访问读取时与innerText相同;在分配新值时替换整个元素。

<p id="pid">welcome</p>

innerText of element "pid" == welcome
outerText of element "pid" == welcome

答案 1 :(得分:6)

假设我们有一个页面加载到webview with html

<html>
<head><title>Your Title</title></head>
<body>
<h1>Heading</h1>
<p id="para" >hi <b>Your_Name</b></p>
</body>
<html>

现在

[(DOMHTMLElement *)[[webView mainFrame] DOMDocument] documentElement] 

将返回DOMHTMLElement“html”和

outerHTML 会将完整的html作为

返回
<html>
<head><title>Your Title</title></head>
<body>
<h1>Heading</hi>
<p id="para">hi <b>Your_Name</b></p>
</body>
<html>

outerText 会将html作为

返回

航向 嗨Your_Name

例如,如果我们在这种情况下采用p标签的例子

outerHTML will return - <p id="para">hi <b>Your_Name</b></p>

outerText will return - hi Your_Name

innerHTML will return - hi <b>Your_Name</b>

innerText will return - hi Your_Name

我在示例的帮助下对此进行了解释,其中这四个术语的定义已在下面的答案中解释过。

答案 2 :(得分:0)

&#13;
&#13;
<!DOCTYPE html>
<html>
<head>
<title>innerHTML and outerHTML | Javascript Usages</title>
</head>
<body>
<div id="replace">REPLACE By inner or outer HTML</div>
<script>
userwant = "inner";
userwant = "outer";
if (userwant = "inner") {
document.querySelector("#replace").innerHTML;
// this will remove just message: 'REPLACE By inner or outer HTML' //
} else if (userwant = "outer") {
document.querySelector("#replace").outerHTML;
// this will remove all element <div> ~ </div> by the message: 'REPLACE By inner or outer HTML' //
};
</script>
</body>
</html>
&#13;
&#13;
&#13;