HTML and CSS Reference
In-Depth Information
Figure 14-6
viewing the tOc heading
The rest of the TOC will be based on the contents and structure of the source docu-
ment. To evaluate what is contained in the source document and how it's structured, you
have to work with the document's node tree.
Comparing
textContent
and
innerText
The
innerHTML
property returns the HTML code found within an object, including any
HTML tags, but it does not separate the text content from the text found in the markup
tags. For example, if a document included the tags
<div id=”doctitle”>
<h1>The Constitution of the <em>United States</em></h1>
</div>
the expression
document.getElementById(“doctitle”).innerHTML
would return the following:
<h1>The Constitution of the <em>United States</em></h1>
In many cases, you're not interested in markup tags—only the text content of the ele-
ment. To ignore the markup tags, you instead use the
textContent
property
object
.textContent
where
object
is a document object. Thus, the expression
document.getElementById(“doctitle”).textContent
would return the text string
The Constitution of the United States
without any
markup tags.
Versions of Internet Explorer before IE9 do not support the
textContent
property
and use
innerText
instead. To support both IE and non-IE browsers, you can combine
the properties using the
||
(or) operator in the expression
object
.textContent ||
object
.innerText
and the expression would return the text content without any markup tags for all major
browsers.
