JavaScript DOM Programming

Last Update:2015-09-08 Source: Internet

Author: User

Tags tag name

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1.DOM Overview 1.1. What is dom?

dom= Document Object Model , the DOM is the (World Wide Web Consortium) standards. dom defines access to HTML and XML interface independent of platform and language style= "LETTER-SPACING:0.5PT;" > standard is divided into 3

The!--[Endif]--> core DOM-

!--[Endif]-->xml DOM- XML

html DOM- a standard Model for HTML documents

1.2. What is html DOM?

the HTML DOM defines a standard way to access and manipulate HTML documents. html DOM renders an HTML document as a tree structure with elements, attributes, and Text (node tree)

When we open an HTML file with a browse , the browser's built-in HTML parsing engine loads the entire document into memory , based on the HTML DOM The defined interfaces and implementation classes generate a DOM Object Tree that contains all the data in the file .

<title> Document title </title>

<body>

<a href="http://www.atguigu.com"> My Links </a>

</body>

2. HTML Dom Core: node 2.1. HTML nodes (node)

Each component in an HTML document is a node.
The entire document is a document node
Each HTML tag is an element node
Each HTML attribute is an attribute node (Attribute)
The text contained in the HTML element is a text node

2.2. Node hierarchy

Nodes in the DOM have hierarchical relationships with each other.
All the nodes in the HTML document make up a document tree (or node tree). Each element, attribute, text, and so on in an HTML document represents a node in the tree. The tree starts at the document node and continues to extend its branches until all the text nodes are at the lowest level of the tree.

2.3. HTML DOM node tree

All nodes in a tree of nodes are related to each other.

< Html>

<title>dom Tutorial </title>,

<body>

<p>hello World!</p>

&NBSP;&NBSP;</BODY>

</HTML>

Parent node	Each node except the document node has a parent node
Child nodes	Most element nodes have child nodes
Peer node	When nodes share the same parent node, they are peers
Descendant nodes	Descendants refer to all child nodes of a node
Ancestors node	Ancestors are the parent node of a node, or parent node of a parent node, and so on

3. DOM Operations

3.1HTML DOM Access node (query)

Object type	Properties/Methods	Description
Document/Element node	getElementById (ID)	Get the corresponding Label object based on the ID of the tag
Document/Element node	getElementsByTagName (TAG)	Gets a collection of all child label objects corresponding to the tag name (array)

Node	NodeName	Get the node name
Node	NodeValue	Get the value of the node
Node	NodeType	Node Type value

ELEMENT node	ChildNodes	Get a collection of all child nodes (array)
element/Text node	ParentNode	Get parent Node object (label)
ELEMENT node	FirstChild	Get the first child node (label/text)
ELEMENT node	LastChild	Get the last child node (label/text)

ELEMENT node	GetAttributeNode (Attrname)	Attribute node based on attribute name label

3.3. HTML Dom Additions and deletions

Object type	Properties/Methods	Description
Document node	CreateElement (TagName)	Create a new Element node object
Document node	createTextNode (text)	Create a Text node object

ELEMENT node	AppendChild (node)	Adds the specified node as a child node
ELEMENT node	InsertBefore (New,target)	Inserts a new node before the specified child node

ELEMENT node	ReplaceChild (new, old)	Replace old child nodes with new nodes
ELEMENT node	RemoveChild (Childnode)	Deletes the specified child node
ELEMENT node	SetAttribute (name, value)	Add a property to a label
ELEMENT node	RemoveAttribute (name)	Deletes the specified property

ELEMENT node	InnerHTML	Add a label to the label

<title>html DOM Programming Test </title>

ul {

List-style-type: None;

}

Li {

Border-style: solid;

Border-width: 1px;

padding: 5px;

Margin: 5px;

Background-color: #99ff99;

float: left;

}

. out {

Width: 400px;

Border-style: solid;

Border-width: 1px;

Margin: 10px;

padding: 10px;

float: left;

}

</style>

<body>

<p> which city do you like?</p>

<li id="BJ" name="Beijing"> Beijing </li>

<li> Shanghai </li>

<li id="DJ"> Tokyo </li>

<li> Seoul </li>

</ul>

<br>

</div>

</body>

JavaScript DOM Programming

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More