Difference between innerhtml and outerhtml in cocoa WebView

问题

I am using cocoa webview for rich text editing in my application. Just confused with innerHtml and outerHtml method avaiable in webkit.

Can anyone explain what is the difference between

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

AND

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

回答1:

innerHTML is a property of a DOM element that represents the HTML inside the element, i.e. between the opening and closing tags. It has been widely copied, however implementations vary (probably because it has no published standard[1]) particularly in how they treat element attributes.

outerHTML is similar to innerHTML, it is an element property that includes the opening an closing tags as well as the content. It hasn't been as widely copied as innerHTML so it remains more-or-less IE only.

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

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

and whereAs

innerText The textual content of the container.

outerText Same as innerText when accessed for read; replaces the whole element when assigned a new value.

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

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

回答2:

Suppose we have a page loaded to 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>

NOW.

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

will returen the DOMHTMLElement "html" and

outerHTML will return the complete html as

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

outerText will return html as

Heading hi Your_Name

for example if we take example of p tag in this case

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

i have explained it with the help of example where definition for these 4 terms already explained in the answer below.

回答3:

<!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>

来源：https://stackoverflow.com/questions/14256102/difference-between-innerhtml-and-outerhtml-in-cocoa-webview

标签

objective-c

macos

cocoa

webview