A probe into the DOM of JAVASCRITPT (i)

Source: Internet
Author: User

The DOM (Document Object model) is an API for HTML and XML documents. The DOM depicts a hierarchical tree of nodes that allows developers to add, remove, and modify portions of a page. Dom was born out of Microsoft's DHTLM (Dynamic HTML), but now it has become a truly cross-platform, language-neutral way of showing and manipulating page markers.

JavaScript and Dom are often treated as a single entity, because JavaScript is the most common use for this purpose (interacting with content on the web). Use the DOM API to access, traverse, and manipulate HTML and XML documents.

Basic outline hierarchy (simplification) of a typical Dom

Here's a few notable things about the DOM:

  • Window object as a global object, you only need to type "window" to access it. All execution of JavaScript code on this object. Properties and methods like all objects.
    • A property is a variable stored in an object. All the variables created on the page authomatically become properties of the Window object.
    • A method is a function that is stored in an object. Since all functions are stored in the Window object (at least) they can all be called "methods".
  • The DOM creates a hierarcy that corresponds to the structure of each Web document. This hierarchy is made up of nodes. There are several different types of DOM nodes, the most important being "elements", "text" and "Documents".
    • An "element" node represents an element in a page. If you have a paragraph element ("< p >"), then it can be accessed by accessing the DOM node.
    • The text node represents all the text (elements) within a page. So if the text of your paragraph can be accessed directly through the DOM.
    • The node of the document represents the entire document. (This is the root node of the DOM hierarchy/tree).
    • Also note that the element attribute is the DOM node itself.
  • each layout engine implements a slightly different DOM standard. For example,Firefoxusing a Web browserGeckolayout engine, there is a good implementation (although not fully inline with the specifications)Internet Explorer, it usesTridentThe layout engine is famous for cars and incomplete implementations that lead to much pain within the web development community!
node Type:

The Dom1 class defines a node interface that will be implemented by all node types in the DOM. This node interface is implemented as a node type in JavaScript and can be accessed in all other browsers except IE. All nodes in JavaScript inherit from the node type, so all node types share the same basic properties and methods.

Each node has a NodeType property that indicates the type of the node. The node type is represented by the following 12 numeric constants defined in the node type, and any node type must reside in one of these:

Node.element_node (1);

Node.attribute_node (2);

Node.text_node (3);

Node.cdata_section_node (4);

Node.cdata_reference_node (5);

Node.entity_node (6);

Node.processing_instruction_node (7);

Node.comment_node (8);

Node.document_node (9);

NODE. Document_type_node (10);

Node.document_fragment_node (11);

Node.notation_node (12)

By comparing these constants, you can easily determine the type of node, for example:

<! DOCTYPE html>

to learn about node nodes, you can use both NodeName and NodeValue properties:

<script type= "Text/javascript" >  var somenode=document.getelementbyid (' a '); alert (Somenode.nodetype); alert (somenode.nodename); is the label name of the element <p>alert (Somenode.nodevalue); To insist that node is not an element just look at the value of NodeValue NULL to be able to </script>


A probe into the DOM of JAVASCRITPT (i)

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.