JavaScript (5)--dom

DOM Operations

In order to write this essay really is a lot of effort, although still write bad. Originally from Monday began to write, but Tuesday Wednesday busy to help recruit new, hahaha. Feel like doing something special fun, although very busy. Look at those small meat, I feel really old ah. Feel too long no more bo, seniors estimated to hit me. Yes, but I'm still happy. This write Dom operation, content a bit more also a bit messy. Understanding or not so thorough, but a little accumulation of it, there will always be a time to understand. Come on!

"DOM"

The DOM (Document Object model) is an API (application programming Interface) for HTML and XML documents. Depicts a hierarchical tree of nodes that allows developers to add, remove, and modify portions of a page.

"Node Hierarchy"

The DOM can portray any HTML and XML document as a structure composed of multiple nodes. The document node is the root node of each document. The document element is the outermost element of the document, and all other elements in the document are contained within the document element. There can be only one document element per document.

"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 node types in JavaScript inherit from the node type, so all node types share the same basic properties and methods, but not all node types are supported by the Web browser.

Each node has a NodeType property that indicates the type of the node. The node type is represented by 12 numeric constants defined in the node type (see Gao Cheng Third edition P248 for details), and any node type must reside in one.

To understand the specifics of a node, you can use both the NodeName and NodeValue properties. The values of these two properties depend entirely on the type of node. For an element node, the label name of the element is always saved in nodename, and the value of NodeValue is always null.

Each node has a Childnode property, which holds a NodeList object. NodeList is a class array object that holds an ordered set of nodes that can be accessed through a location. The NodeList object is unique in that it actually executes the results of the query dynamically based on the DOM structure, so changes to the DOM structure are automatically reflected in the NodeList object.

To convert nodelist to an array in IE, you must manually enumerate all the members. You can also convert nodelist to an array in the following ways:

function Converttoarray (nodes) {    var array=null;     Try {         array=array.prototype.slice.call (nodes,0);   for non-IE      browser }catch(ex) {       array=new  Array ()       ;  for (var i=0;i<nodes.length;i++) {           array.push (nodes[i]);        }    }     return Array;}

Operation Node

AppendChild () to add a node to the end of the ChildNodes list. If the node passed into AppendChild () is already part of the document, the result is to move the node from its original location to the new location. If you want to place the node in a specific location in the list, you can use the InsertBefore () method (the parameter is the node to be inserted and the node that is the reference).

ReplaceChild (the node to be inserted, the nodes to be replaced) method. When you insert a person node with this method, all of the node's relationship pointers are copied from the node that he replaces. The replaced node is still in the document, but it does not have its own location in the document.

The Document property

JS represents documents by document type. In the browser, the document object is an instance of HTMLDocument (inherited from Document type), representing the entire HTML page. Also, the Document object is a property of the Window object, so it can be accessed as a global object.

Child nodes of a document

The DOM standard specifies that the child nodes of the document node can be DocumentType, Element, processingin-struction, or comment, as well as two built-in shortcuts to access its child nodes. The first is the DocumentElement property (always pointing to the

All browsers support the Document.documentelement and Document.body properties.

Browser support for Document.doctype varies greatly, as follows:

*IE8 and Previous versions: if a document declaration type declaration exists, it is incorrectly interpreted as a comment and will be used as the comment node, and the value of Document.doctype is always null.

*ie9+ and Firefox: If a document type declaration exists, it is used as the first child node of the document ; Document.doctype is a documrnttype node, or it can access the same node through Document.firstchild or Document.childnodes[0].

*safari, Chrome, and opera: if there is a document type declaration, it is parsed, but not as a child of the document. Document.doctype is a DocumentType node, but the node does not appear in Document.childnodes.

Document Information

As an example of a htmldocument, the Document object also has properties that the standard document object does not have. For example, the Title property contains the text in the <tiele> element. Where the URL (contains the full URL of the page), domain (the domain containing the page), referrer (the URL that holds the page linked to the current page). All this information is present in the HTTP header of the request. Of these three attributes, only domain can be set.

Find element

There are three ways to find elements, such as getElementById () and getElementsByTagName () and Getelementsbyname ().

Special Collections

Document.anchors, containing all <a> elements in the document with the name attribute;

Document.forms, including all <from> elements in the document;

Docuemnt.imges, including all elements in the document;

Docuemnt.links, containing all the <a> elements in the document with HREF characteristics;

Document Write

The ability to write output streams to a Web page. This capability mainly includes write (), Writeln (), open (), and Close (). where the Write () and Writeln () methods accept a string parameter, which is the text to write to the output stream. Write () is written as-is, and writeln () adds a newline character (\ n) to the end of the string. Method Open () and close () are used to turn the output stream of the Web page on and off respectively.

"Element Type"

Used to represent XML and HTML elements, providing access to element tag names, child nodes, and attributes.

You can use the NodeName property to access the tag name of an element, or you can use the TagName property, which returns the same value.

Get features

There are three main DOM methods for manipulating properties, namely GetAttribute (), SetAttribute (), and RemoveAttribute (). These three methods can be used for any of the attributes.

There are two special types of attributes, although they have corresponding property names, but the value of the property is not the same as the value returned by GetAttribute (). The first type of attribute is the style, which is used to specify the style for the element through CSS. When accessed through GetAttribute (), the Returned style attribute contains CSS text, and access to it through the property returns an object. The second type of attribute is an event handler such as the onclick. Access by GetAttribute () returns a string of the corresponding code, and when the OnClick property is accessed, a JS function is returned (NULL is returned if not specified).

The method that corresponds to GetAttribute () is setattribute (), which accepts both parameters of the attribute name and value to be set. The SetAttribute () method allows you to manipulate both HTML attributes and custom attributes. The attribute names set by this method are uniformly converted to lowercase.

RemoveAttribute (), which is used to completely remove an element's attributes. Calling this method not only clears the value of the attribute, but also removes the attribute entirely from the element.

The element type is the only one of the DOM node types that uses the Attributes property. This property contains a namednodemap, similar to NodeList, and is also a dynamic collection.

Use the Document.createelement () method to create a new element. and accepts only one parameter, that is, the label name of the element to be created.

"Text Type"

Text nodes are denoted by the text type and contain plain text content that can be literally interpreted. The content inside cannot contain HTML code and will be escaped.

The text contained in the text node can be accessed through the NodeValue property or the Data property. The values contained in these two properties are the same.

You can use document. createTextNode () Creates a new text node that accepts the parameter to insert the text in the node. If two text nodes are adjacent sibling nodes, then the text in these two nodes will be displayed with no spaces in the middle.

Use the normalize () method to merge adjacent text nodes.

Use the Splittext () method to divide a text node into two text nodes.

"Comment Type"

Comments are represented in the DOM by the comment type. The comment type inherits from the same base class as the text type, so it has a method other than Splittext ().

"DocumentFragment Type"

Of all node types, only documentfragment does not have a corresponding tag in the document. Although you cannot add a document fragment directly to a document, you can use it as a "warehouse" where you can save nodes that may be added to the document in the future. The nodes in the document fragment are not part of the document tree. Adding the contents of a document fragment to a document by AppendChild () or insertbefore (), even if the document fragment is a parameter, only adds the child nodes in the past, and the document fragment itself never becomes part of the document tree.

"Dom Manipulation Technology"

"Dynamic Scripting"

A script that does not exist at the time of page load, but is dynamically added by modifying the DOM at some point in the future. Create a dynamic script there are two ways to insert external files and insert JavaScript code directly. Dynamically loaded external JS files can be run immediately.

"Dynamic Style"

Refers to a style that does not exist when the page is loaded, and a dynamic style that is dynamically added to the page after the page is loaded.

If you are writing code specifically for IE, be careful about using the Stylesheet.csstext property. When you reuse the same <style> element and set this property again, it can cause the browser to crash. Similarly, setting the Csstext property to an empty string can also cause the browser to crash.

"Using NodeList"

NodeList objects are "dynamic", which means that each time the NodeList object is accessed, a query is run.

JavaScript (5)--dom