Home > Developer > JavaScript
Dom:document Object Model---document objects
The DOM is a BOM, and when the page is loaded, the browser creates a Document object model of the page
With the precompiled object model, JS gets enough ability to create dynamic HTML.
-JS can change all HTML elements, HTML attributes, CSS styles in the page, and react to all events in the page.
The DOM operations are:
-Find nodes, read node information, modify node information, create new nodes, delete nodes
To read and modify nodes:
NodeName: Name of the node
-Text node: Always a #text
-Document node: Always a #document
NodeType: The node type, which returns a numeric value
-Attribute node: returns 2
-element node: return 1
-Text node: return 3
-Note node: return 8
-Document node: return 9
ELEMENT node Contents:
InnerText: Sets or gets the text within the start and end tags of an object
InnerHTML: Sets or gets the HTML (all things) in the start and end tags of the object
1. Properties of the node (attributes such as id,class,name inside the tag)
. getattribute (name); Gets the value of the property based on the property name name
. SetAttribute (name); Set node properties
. Removeattibute (name); Remove the Name property
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "UTF-8"><title>Document Object Model</title></Head><Body> <H1>Node properties</H1> <aID= "A1"href= "Www.baidu.com" >Modify node Information</a> <Scripttype= "Text/javascript"> varA1=document.getElementById ("A1"); varhref=A1.getattribute ("href"); //gets the value of the propertyA1.removeattribute ("href"); //Remove href attributeA1.setattribute ("href","Property Value");</Script></Body></HTML>
2. How to get nodes:
(1) document.getElementById ("id");
Returns the Element node object (the entire node) by specifying the ID, ignoring the document structure (regardless of what his parent element is) and returning null if no element is changed;
(2) Document.getelementbyname ("name");
Returns the Element node object (the entire node) by specifying name, ignoring the document structure (regardless of what his parent element is) and returning null if no element is changed;
(3) document.getElementsByTagName ("label");
Returns all the label elements by the specified label name, which is an array.
3. Add Nodes:
var newnode=document.createelement ("input"); Create input label
Set label properties:
Newnode.id= "Input";
Newnode.type= "Text";
newnode.value= "Text";
Two ways to add HTML:
(1) parentnode.appendchild (NewNode); Appends the last face of the parent node parentnode as a child node.
(2) Parentnode.insertbefore (NewNode, node); Insert the parent node as a child node in front of node parentnode.
(3) Deleting a node
var Parentnode=document.getelementbyid ("ParentID");//Get Parent element node
var Childnode=document.getelementbyid ("childID"); Get child element node
Parentnode.removechild (Childnode);//Delete node Childnode
JavaScript Document Object Model
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
