DOM (Document Object model): An API (Application programming Interface) 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.
Node hierarchynodes: nodes are divided into several different types, each representing different information and tags in the document. Each node has its own special short bar, data, method.
document element: The document element is the outermost element of the document, and all other elements in the document are wrapped in the document element. In HTML, document elements are always
HTML element: element node.
attribute: attribute node.
Document Type: Document type node.
Note: note node.
Node typeAll types of nodes in JS inherit from the node type, and all node types share the same basic properties and methods.
NodeName: for an element node, NodeName holds the label name of the element, and the value of NodeValue is always null.
nodevalue: The value of the element.
ChildNodes: holds a nodelist object. NodeList is a class array object that holds an ordered set of nodes that can be accessed through a location. Has the Length property.
Based on the DOM structure, the changes of DOM structure can be automatically reflected in the NodeList object.
ParentNode: The parent node that points to Childnode.
previoussibling: The previous sibling node of the node.
nextSibling: The next sibling node of the node.
Operation NodeInserting nodes
appendchild (): adds a node to the end of the ChildNodes list.
insertbefore (): accepts two parameters: the node to be inserted, the node to refer to. The inserted node becomes the previous sibling node of the reference node.
Delete a node
replacechild (): accepts two parameters: the node to be inserted and the one to replace.
removechild (): accepts a parameter: the node that is removed.
CloneNode (): copies a copy of a node that calls this method. Accepts a Boolean parameter: Indicates whether deep copy is performed. True to copy the entire child node tree (only attributes are copied.) Child nodes). False, only the copy itself.
normalize (): text node that handles document tree species. When you find the empty text stage, press to delete it. Locate adjacent text nodes and merge them into a text node.
Document typeThe Document object is an instance of Htmldocumen (inherited from document). Represents the entire HTML page. The Document object is a property of the Window object.
Child nodes of a document
documentelement: always points to the <HTML> element in the HTML page.
Document Information:
Document.title: contains the text in the <title> element.
URL: The URL that contains the page completion (the URL shown in the Address bar).
Domain : contains the name of the page
referrer: A URL that holds the page that is linked to the current page.
var url = document.url; // get the full URL var domain = document.domain; // Get domain name var referrer = Document.refeffer; // get the URL of the source page
Element type
Nodetype:1;
NodeName: The tag name of the element;
Nodevalue:null.
ParentNode: May be document or element;
The element type provides access to elements tag names, child nodes, and attributes.
HTML elements are represented by the HtmlElement type, not directly through this type, but also by its subtypes.
There are three DOM methods for manipulating attributes:
get attribute:getattribute (), the name of the attribute is case-insensitive.
Set attribute:SetAttribute (), accepts 2 parameters: the attribute name, value to set. If the attribute already exists, the value that is already specified is replaced by the existing value. That is, you can manipulate HTML attributes, or you can manipulate custom attributes.
Removal Characteristics:removeattribute ();
Text typeNodetype:3;
NodeName: #text;
NodeValue: The text that the node contains.
ParentNode: is an element;
Child nodes are not supported.
Length property: The number of strings to save.
Text method:
Normalize: Merges a text node, and if called on a parent element that contains 2 or more text nodes, all the text nodes into one node.
var element = document.createelement ("div"= "message"; var textnode = document.createTextNode ("Hello world!" ); Element.appendchild (textnode); var anothernode = document.createTextNode ("yippee!" ); Element.appendchild (Anothernode);d ocument.body.appendChild (element); Console.log ( Element.childNodes.length); // 2 element.normalize (); Console.log (element.childNodes.length); // 1Splittext (): Splits a text node and divides a text node into two, separated by the specified location. The NodeValue value. The original text node will contain content from the beginning to the specified location, and the new text node contains the remaining text. This method returns a new text node.
var newNode = Element.firstChild.splitText (5// Hello// "world! yippee! "
Tenth Chapter DOM
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
