To dwell on the basic attributes of Dom in JavaScript _javascript tips

Source: Internet
Author: User
Tags tagname

Structure and Content Properties

NodeType

All nodes have a type, and there are 12 different types of nodes in total.

Copy Code code as follows:

Interface Node {
NodeType
Const unsigned short element_node = 1;
Const unsigned short attribute_node = 2;
Const unsigned short text_node = 3;
Const unsigned short cdata_section_node = 4;
Const unsigned short entity_reference_node = 5;
Const unsigned Short entity_node = 6;
Const unsigned Short processing_instruction_node = 7;
Const unsigned short comment_node = 8;
Const unsigned Short document_node = 9;
Const unsigned short document_type_node = 10;
Const unsigned short document_fragment_node = 11;
Const unsigned short notation_node = 12;
...
}

The most important two nodes are element nodes (1) and Text nodes (3). The rest is rarely used.
For example, when you list all of the child element nodes, we can iterate over it and use Childnodes[i].nodetype!= to detect it.
Here is the implementation code:

Copy Code code as follows:

<body>
<div>allowed readers:</div>
<ul>
<li>John</li>
<li>Bob</li>
</ul>
<!--a comment node-->
<script>
var childnodes = Document.body.childNodes
for (var i=0; i<childnodes.length; i++) {
if (Childnodes[i].nodetype!= 1) Continue
Alert (Childnodes[i])
}
</script>
</body>

* Thinking
What the following code will suggest:

Copy Code code as follows:

<! DOCTYPE html>
<body>
<script>
Alert (Document.body.lastChild.nodeType)
</script>
</body>

NodeName, TagName

Both NodeName and TagName contain the name of the node.
For Document.body,

Alert (document.body.nodeName)//Body
All nodename in HTML will be capitalized.

When NodeName is not capitalized
This is a rare situation and you can read the following if you are curious.
As you probably already know, browsers have two ways to parse: HTML and __xml mode. Typically, HTML mode is used, but XML schemas are used when obtaining XML documents using XMLHTTPREQUEST__ technology.
The XML Schema is also used in Firefox when the content-type of the XHTML document is set to Xmlish.
In the __xml mode, the section name will be retained, so it is possible to appear body or body.
Therefore, if you load XML into an HTML document from the server by using xmlhttprequest__ technology, the node name will be preserved.

NodeName and __tagname__ are the same for elements.
However, non-element nodes also have nodename attributes, which have special values in these nodes:

Alert (document.nodename)//#document
Most node types do not have tagname attributes, and the tagname annotation node in IE is!.
Therefore, nodename is usually more meaningful than tagName. But tagname is like a simplified version, so you can use it when you're only dealing with element nodes.

InnerHTML

innerHTML is part of the HTML5 standard, please see the link in detail
It allows the content of the node to be accessed in a textual way. The following example will output all the content of the document.body and replace it with the new content.

Copy Code code as follows:

<body>
<p>the paragraph</p>
<div>and a div</div>
<script>
Alert (Document.body.innerHTML)//Read Current Contents
Document.body.innerHTML = ' yaaahooo! '//Replace contents
</script>
</body>

innerHTML will contain a valid HTML. However, the browser can also parse malformed HTML.
innerHTML can be used in any of the element nodes. It's very, very useful.

InnerHTML Pitfalls

innerHTML is not as simple as it seems. It has some pitfalls that are waiting for the rookie, even some experienced programmers to avoid.

The innerHTML of the __table__ node in IE is read-only
In IE, col, Colgroup, FRAMESET, head, HTML, STYLE, TABLE, Tbody, TFOOT, THEAD, TITLE, tr and other elements innerHTML as read-only.
The table tabs in IE are read-only in addition to TD's remaining tags innerHTML.

innerHTML cannot append
From the composition of the statement to see innerHTML can do additional operations, such as:

chatdiv.innerhtml + = "<div>hi !</div>"
chatdiv.innerhtml = "How do you doing?"
But what did they actually do:

1. The old content is emptied

2. The new content was parsed and inserted into it. The content is not appended, it is regenerated.

Therefore, all pictures and other resources will be loaded after the + + operation, including Smile.gif.

Fortunately, there are other ways to update the content, this way does not use innerHTML, so there is no problem mentioned above.

NodeValue

innerHTML is only valid for element nodes.
For other types of nodes, they use the NodeValue property to get the content. The following example shows how it works on text nodes and annotation nodes.

Copy Code code as follows:

<body>
The text
<!--A comment-->
<script>
for (var i=0; i<document.body.childnodes.length; i++) {
Alert (Document.body.childnodes[i].nodevalue)
}
</script>
</body>

In the example above, some of the warnings are empty, because of the blank nodes. Note that nodevalue = = null for the script node. That's because the script is an element node. Element node, to use innerHTML.

Summarize

NodeType
The node type. The most important is the element node is 1, the text node is 3, read-only.
Nodename/tagname
The name of the label in uppercase. Non-ELEMENT nodes nodename also have special values, read-only.
InnerHTML
The contents of the element node can be written.
NodeValue
The contents of the text node can be written.
The DOM node is based on the type, and there are some other properties. For example, the input label has the value and __checked__ properties. A property has href and so on.

The above is the entire content of this article, I hope you can enjoy.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.