Home > Developer > JavaScript
I. Understanding DOM with different levels of nodes
1. Node hierarchy
Take the following HTML as an example:
<title>sample page</title>
<body>
<p>hello world!</p>
</body>
This simple HTML document can be represented as a hierarchical structure.
The document node is the root node of each document. In this example, the document node has only one child node
(1) Node type
The DOM1 class defines a node interface that will have all of the node types in the DOM implemented. This node interface is implemented as a node type in JavaScript. 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.entity_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)
① to understand the details of a node, you can use both NodeName and NodeValue properties. The values of these two properties depend entirely on the type of node. For an element node, the signature of the element is always preserved in nodename, and the value of NodeValue is always null.
② node Relationships
Each node has a ChildNodes property, which holds a NodeList object. The NodeList object is a class array object that holds an ordered set of nodes that can be accessed through a location.
③ Operation Node
The most commonly used method of an operation node is appendchild ().
④ Other methods
There are two ways that all types of nodes have one. The first is CloneNode (), which is used to create an identical copy of the node that called the method. The second one is the normalize () method. The only use of this method is to work with text nodes in the document tree.
Ii. type of document
The document node has the following characteristics:
The value of NodeType is 9;
The value of the nodename is "#document";
The value of the nodevalue is null;
The value of the parentnode is null;
The value of the ownerdocument is null;
Its child nodes may be one documenttype (up to one), Element (up to one), processinginstruction, or comment.
1. Child nodes of the document
The DOM has two built-in shortcuts to access its child nodes. The first is the DocumentElement property, which always points to the
2. Documentation Information
The Document object has some properties that the standard document object does not have. The first one is the title. Contains text from the <title> element-displayed in the title bar or tab of the browser window.
The next 3 properties are related to requests for Web pages, which are URLs, domain, and referrer. The URL property contains only the page's domain name in the full Url,domain property of the page, while the referrer property holds the URL of the page linked to the current page. In the absence of a source page, an empty string may be included in the referrer property.
The URL is associated with the domain property.
For example, if document. URL equals http://www.wrox.com/WileyCDA/, then Document.domain equals www.wrox.com.
Of these three attributes, only domain can be set.
3. Find elements
The manipulation of the element can be done using several methods of the Document object. The document type provides two methods for this: getElementById () and getElementsByTagName ().
The first method receives a parameter: The element ID to get. The ID here must match the ID of the element in the page exactly. For example:
<div id = "mydiv" >some text </div>
You can use the following code to get this element:
var div = document.getElementById ("mydiv");
The second method takes a parameter: the label name of the element to be obtained, and returns a nodelist containing 0 or more elements. For example, the following code gets all the elements in the page and returns a htmlcollection.
var images = document.getelementsbytagname ("img");
A third method, only the HTMLDocument type, is Getelementbyname (). This method returns all elements with the given name attribute. The most commonly used Getelementsbyname () method is to obtain a radio button.
4. Special Collections
In addition to properties and methods, the Document object has some special collections. These collections are Htmlcollection objects:
Document.anchors, containing all <a> elements with the name attribute in the document
Document.applets, which contains all <applet> elements in the document, because the <applet> element is no longer recommended so this collection is deprecated.
Document.forms, which contains all the <form> elements in the document, are the same as the Document.getelementbytagname ("form").
Document.images, which contains all the elements in the document, is the same as the document.getElementsByTagName ("img") results.
A document.links that contains all the <a> elements in the document with the HREF attribute.
5.DOM Conformance Detection
The Document.implementation property can be used to detect which parts of the browser are implemented. This method receives two parameters: the name and version number of the DOM function to be detected.
6. Document Writing
The ability to write output streams to a Web page has been around for many years with a document object. This competency system is in the following 4 methods: Write (), Writeln (), open (), close (). where write () and Writeln () accept a string parameter, which is the text to write to the output stream. Write () is written as-is. Writeln () adds a line break (\ n) at the end of the string.
Iii. type of element
The element type is used to represent XML or HTML elements, providing access to element tag names, child nodes, and attributes. The element node has the following characteristics:
The value of NodeType is 1;
The value of the nodename is the label name of the element;
The value of the nodevalue is null;
ParentNode may be document or element;
Its child nodes may be element, Text, Comment, ProcessingInstruction, cdatasection, or EntityReference. To access the tag name of an element, you can use the NodeName property, or you can use the TagName property, which returns the same value.
1.html elements
All HTML elements are represented by the HtmlElement type or its subtypes. The following standard features are present in each HTML element:
ID, the unique identifier of the element in the document.
Title, additional descriptive information about the element, usually shown through the ToolTip bar.
Lang, the language code of the element content, is seldom used.
Dir, the direction of the language. Values are "ltr" (Left-to-right, left-to-right) or "RTL" (Right-to-left, right-to-left), and are rarely used.
ClassName, which corresponds to the class attribute of an element, is the CSS class specified for the element.
2. Obtaining Features
Each element is made up of one or more new, and the purpose of these attributes is to give additional information about the element or its contents. There are three main DOM methods for manipulating properties, namely GetAttribute (), SetAttribute (), and RemoveAttribute ().
3. Setting features
The method corresponding to GetAttribute () is setattribute (), which receives two parameters: the name and value of the attribute to be set. If the attribute already exists, SetAttribute () replaces the existing value with the specified value, and if the attribute does not exist, SetAttribute () creates the property and sets the corresponding value.
4.attributes Properties
The element type is the only one of the DOM node types that uses the attribute property. The attribute property contains a namednodemap, similar to NodeList, and is also a "dynamic" collection. Each attribute of an element is represented by a attr node, and each node is stored in the NamedNodeMap object. The NamedNodeMap object has the following methods:
getNamedItem (name): Returns the node with the NodeName attribute equal to name;
RemoveNamedItem (name): Removes the node with the NodeName attribute equal to name from the list;
SetNamedItem (node): Adds nodes to the list, with the nodename attribute of the node as the index;
Item (POS): Returns the node at the digital POS location.
5. Creating elements
Use the Document.createelement () method to create a new element. This method accepts only one parameter, that is, the label name of the element to be created. Case insensitive. For example, use the following code to create a <div> element.
var div = document.createelement ("div");
6. Child nodes of the element
An element can have any number of child nodes and descendant nodes, because the element can be a child of another element. The childnodes attribute of the element contains all its child nodes.
Iv. type of text
This node is represented by the text type and contains plain text content that can be literally interpreted.
1. Create a text node
You can use document.createTextNode () to create a new text node that takes a parameter-the text to be inserted into the node. For example, the following code:
var element = document.createelement ("div");
Element.classname = "message";
var textnode = document.createTextNode ("Hello world!" ）;
Element.appendchild (Textnode);
Document.body.appendChild (Element);
This example creates a new <div> element and assigns it a class attribute with a value of "message". It then creates a text node and adds it to the element you created earlier. The final step is to add this element to the <body> element of the document so that you can see the newly created elements and text nodes in the browser.
2. Normalize text nodes
The normalize () method can merge adjacent text nodes. If you call the normalize () method on a parent element that contains two or more text nodes, all the text nodes are merged into one node, and the resulting node's nodevalue equals the value that will be stitched together nodevalue values of each text node before merging.
3. Split text nodes
The text type provides a method that acts on the normalize () opposite: Splittext (). This method divides a text node into two text nodes, dividing the NodeValue value by the specified location. The original text node will contain content from the beginning to the specified location, and the new text node will contain the remaining text.
V. Types of comment
The comment type inherits from the same base class as the text type, so it has all string manipulation methods except Splittext (). Similar to the text type, the contents of the comment can also be obtained by nodevalue or the Data property. The comment type node has the following characteristics:
The value of NodeType is 8;
The value of the nodename is "#comment";
The value of the NodeValue is the content of the comment;
ParentNode may be document or element;
Child nodes are not supported.
Vi. Types of Cdatasection
The cdatasection type is only for XML-based documents, and it represents a CDATA region. Similar to the comment type, so you have all the string manipulation methods except for Splittext (). The Cdatasection type node has the following characteristics:
The value of NodeType is 4;
The value of NodeName is "#cdata-section";
The value of the NodeValue is the content in the CDATA area;
ParentNode may be document or element;
Child nodes are not supported.
Vii. Types of DocumentType
The DocumentType type has the following characteristics:
The value of NodeType is 10;
The value of NodeName is the name of DOCTYPE;
The value of the nodevalue is null;
ParentNode is document;
Child nodes are not supported.
Viii. Types of DocumentFragment
The DocumentFragment type node has the following characteristics:
The value of NodeType is 11;
The value of NodeName is "#document-fragment";
The value of the nodevalue is null;
The value of the parentnode is null;
The child nodes can be: Element, ProcessingInstruction, Comment, Text, cdatasection, or EntityReference.
Ix. Types of attr
The value of NodeType is 2;
The value of the nodename is the name of the attribute;
The value of the NodeValue is the value of the attribute;
The value of the parentnode is null;
Child nodes are not supported in HTML;
A child node in XML can be either text or EntityReference.
The Attr object has 3 properties: Name, value, and specified. Where name is the attribute name, value is the attribute, and specified is a Boolean value that distinguishes whether the attribute is specified in the code or is the default.
Ten, Dom operation technology
1. Dynamic scripting
There are two ways to create a dynamic script: Insert an external file and insert the JavaScript code directly.
Dynamically loaded external JavaScript files can be run immediately, such as the following <script> elements:
<script type = "Text/javascript" src= "Client.js" ></script>
2. Dynamic style
A dynamic style is a style that does not exist when a page is loaded, and a dynamic style is added to the page dynamically after the page is loaded. It is important to note that the <link> element must be added to
The process of loading external style files is asynchronous, that is, the process of loading styles and executing JavaScript code is not in a fixed order.
3. Operation form
Use the core Dom method to create the table code as follows:
CREATE table
var table = document.createelement ("table");
Table.border = 1;
Table.width = "100%";
Create Tbody
var tbody = document.createelement ("tbody");
Table.appendchild (TBODY);
Create first row
Tbody.insertrow (0);
Tbody.rows[0].insertcell (0);
Tbody.rows[0].cells[0].appendchild (document.createTextNode ("Cell 1, 1"));
Tbody.rows[0].insertcell (1);
Tbody.rows[0].cells[1].appendchild (document.createTextNode ("Cell 2, 1"));
Create second row
Tbody.insertrow (1);
Tbody.rows[1].insertcell (0);
Tbody.rows[1].cells[0].appendchild (document.createTextNode ("Cell 2, 1"));
Tbody.rows[1].insertcell (1);
Tbody.rows[1].cells[1].appendchild (document.createTextNode ("Cell 2, 2"));
Add a table to the body of a document
Document.body.appendChild (table);
JavaScript Advanced Programming: Tenth Chapter
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
