Javascript--dom or a tree-shaped web page

Web pages can generally be composed of document and various elements related to document. Of course we can also show the Web page through the tree structure of the hierarchical structure. If we want to modify a webpage, we can use the Document object, the node object and the element object to do the related operation.

The Document object is the owner or parent of all page elements, and the vast majority of factory methods used to create instances of new elements are methods of the core document object.

dom1--defines the infrastructure of the DOM, including patterns and APIs

dom2--enhanced support for CSS and improved access to document elements

In addition to the extensions and improvements to previous versions, dom3--has enhanced the support for XML by enhancing the module that supports Web services.

Here are the main Dom HTML APIs:

The DOM HTML API has a good self-descriptive nature, and it has a dedicated object name. The purpose of this paper is to introduce a lot of BOM implementations to facilitate future compatibility. The HTML API not only inherits the nature and methods from the basic HTML elements, but also inherits from the core node object. The vast majority of HTML objects are also inherited from HtmlElement, based on the allowed element property {Id,title,lang,dir,classname}; the name of each HTML object is obtained from the names of the HTML formal elements. For example: Htmlformelement is an interface object for form elements in HTML that can access all the valid elements in the element.

API objects do not have constructors and cannot be created separately from other objects. To create these interface objects, you need to use a factory method. The factory is responsible for the production of the required objects. For example: To add a row at the end of a table, we need to add a table row through the factory method InsertRow. var row=table.insertrow ( -1) <!--where table is a Table object >; to add two cells for this new table row, You can use the factory method Insertcell. var Cell1=row.insertcell (0); Vavr Cell2=row.insertcell (1); You can also delete table cells and table rows by Removecell and Removerow methods.

Some DOM HTML interfaces do not directly represent a particular HTML element, but rather represent a collection of objects. An object's collection can be accessed through its parent element, such as a document or form element, which is represented by a htmlcollection port. The Htmlcollection interface has only one property named length and two methods (one) item, the index value of the parameter digit (b) Nameitem, and the argument is a string. For example, use the DOM to access the image so that the Item method is Var img=document.images.item (0), using the Nameditem method var Img=document.images.nameditem (" Original ");

The node object describes the document as a collection of nodes in the information about the DOM specification, and is connected in a hierarchical tree structure. You can use different techniques to access the node of the Web content tree (a) query for all tags of a particular type (ii) traverse the entire tree to explore each node on each level. Dom tree species exist between elements: parent-child node, sibling node relationship.

Here is the main understanding of the DOM Core API:

For each node in the document tree, you have all the base attribute sets and base method sets defined in the node object of the DOM. The properties of the node object record information about the contents of the DOM tree, including sibling node elements, child node elements, and parent node elements. Some properties are used to record information about a node, including type, name, and value. The properties of the node object mainly include: NodeName nodevaluenodeType parentnode childNodes firstchild lastchild and so on.

The node NodeType property is numeric, and you can use a set of constants specified by the DOM to override the numbers to access each type of node. For example: Element_node value is 1;attribute_node value is 2, Text_node value is 3;comment_node value is 8, and so on. However, IE does not support this kind of long light, this time you can extend the node object or wear a global custom object, the values are saved to an array of properties.

The Document object is the core interface to the Web page document. We can make document.getElementById ();d ocument.getelementsbytagname ();d ocument.getelementsbyclass ();

To create a new object.

The element object element property is not always accessible through object properties, and if you want to use such an element property, and it is not a property provided as an object class, then we can use the element method.             We can use this method to get, set and check whether the property value exists: getattribute (name) setAttribute (name,value) removeattribute (name); GetAttributeNode (name)

Setattributenode (Name,value) removeattributenode (name); Hasattribute (name)

In fact, the document object can handle everything in context more or less, but sometimes you might need to deal with elements nested within other elements, which may require node and element objects.

For example: There are two div blocks that contain paragraph elements: the first div block contains two paragraphs, and the second block contains a paragraph.

<div id= "Div1" >

<p>one</p>

<p>two</p>

</div>

<div id= "Div2" >

<p>three</p>

</div>

How can I get only the paragraph elements in the first div block?

var Div=document.getelementbyid ("Div1");

var ps=div.getelementbytagname ("P"); Where PS is the first Div block of two paragraphs ps[0] and ps[1]

"Modify Document Tree"

Web pages can be presented in a hierarchical tree structure, so we can modify the document tree to reach the pages we need. The method of the Document object to create a factory method of the new element instance, and the node object provides a hierarchical tree-structured documentation tree support; The element element provides a way to access elements within its context to modify elements nested within that element.

Factory method for Document object: createelement (tagname)--Create a specific type of element

Createdocumentfragment--documentfragment is a lightweight document object that is used to get a portion of the documentation tree, and if you want to add large amounts of nodes to the DOM tree, First use the Createdocumentfrgment method to create a documentfragment, add a node for it, and then add DocumentFragment to the document tree.

createTextNode (data)--Save the text on the page

After you have created a new node, you can use the node method to add it to the existing document tree:

InsertBefore (Newchild,refchild)--Inserts a new node before refchild the specified existing node

ReplaceChild (Newchild,oldchild)--Replace existing node

RemoveChild (oldchild)--Delete existing child nodes

AppendChild (NewChild)--Add a new child node to the document

Note: These methods must be called in the correct context. That is, you want to do this on the element that contains the node you want to replace or delete.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Javascript--dom or a tree-shaped web page