JavaScript learning 8: DOM advanced, javascriptdom advanced

JavaScript learning 8: DOM advanced, javascriptdom advanced

DOM itself has many types. Most types are mentioned in the previous blog. For example, Element type indicates Element nodes, Text type indicates Text nodes. DOM also provides some extensions.

I. DOM type

In the previous blog, we learned about DOM nodes and how to operate and query nodes. These nodes have different types.

Let's take a look at two types: Document Type and Element type.

The Document type indicates the Document or the root node of the Document, which is hidden without specific element labels.

The Element type is used to represent Element nodes in HTML. In the previous article, we have been able to search for and create element nodes. The element node's nodeType is 1, and nodeName is the element's label name.

An Element Node object can return the object type of its specific element node in a non-IE browser.

Ii. DOM Extension

1. Rendering Mode

The standard mode and hybrid mode (weird mode) are distinguished from IE6, mainly by reading the declaration of the document. IE adds a compatMode attribute to the Document object, which can identify the mode in which documents of IE browser are in. If the mode is standard, CSS1Compat is returned. If the mode is mixed, BackCompat is returned.

2 scroll

DOM provides some methods to scroll the page, as follows:

Document. getElementById ('box'). scrollIntoView ();

3 children attributes

Due to the blank subnode issue, IE is different from other browsers. Although it can be filtered out, if a valid subnode is obtained, you can use the children attribute. Supported browsers include IE5 +, Firefox3.5 +, and so on.

4 contains () method

To determine whether a node is a descendant of another node, we can use the contains () method. This method is first used by IE. developers can obtain this information without having to traverse it.

3. DOM operation content

1 innerText attributes

All browsers except Firefox support this method. However, Firefox's DOM3 provides another similar property: textContent, which can be used for compatibility purposes.

2innerHTML attributes

We have previously introduced this attribute and do not reject HTML. Although HTML can be inserted, there are still some restrictions, that is, the so-called scope element. Leaving this scope will be ineffective.

3 outerText

The value of outerText is the same as that of innerText. Firefox does not support the value assignment method, but the value assignment method is dangerous. It not only replaces the text content, but also directly deletes the elements.

4 outerHTML

This is the same as innerHTML, so be cautious when assigning values.