Dom manipulation of JavaScript

Source: Internet
Author: User
Tags tagname

The Document Object Model DOM defines a standard way to access and manipulate HTML documents. The DOM renders an HTML document as a tree structure with elements, attributes, and text (the node tree).

HTML A document can say a collection of nodes, and the DOM nodes are:

1. ELEMENT nodes:

2. text node: content that is presented to the user, such as JavaScript, DOM, CSS, and so on in <li>...</li>.

3. Attribute node: element properties, such as the <a> tag's link property href= "http://www.imooc.com".

Node Properties:

In the Document Object Model (DOM), each node is an object. The DOM node has three important properties:

1. NodeName: Name of the node

2. NodeValue: The value of the node

3. NodeType: Type of node

One, NodeName property: The name of the node, is read-only.

1. The nodeName of the element node is the same as the label name

2. The nodeName of the attribute node is the name of the property

3. The nodeName of a text node is always #text

4. The nodeName of the document node is always #document

Second, NodeValue property: The value of the node

1. The nodevalue of the element node is undefined or null

2. Text node NodeValue is the text itself

3. The nodevalue of the attribute node is the value of the property

NodeType attribute: The type of the node, which is read-only. Here are some common types of nodes:

Element type node type

Element 1

Property 2

Text 3

Note 8

Document 9

One, Getelementsbyname () method

Returns a collection of node objects with the specified name.

Grammar:

Document.getelementsbyname (name)

Unlike the getElementById () method, the element is queried through the element's Name property, not through the id attribute.

Attention:

1. Because the name attribute in the document may not be unique, all getelementsbyname () methods return an array of elements, not an element.

2. And arrays are similar to the length property, which can be accessed in the same way as an array of accesses, starting with 0.

Second, getElementsByTagName () method

Returns a collection of node objects with the specified label name. The order in which elements are returned is their order in the document.

Grammar:

getElementsByTagName (Tagname)

Description

1. tagname is the name of the label, such as P, A, IMG and other label names.

2. And arrays are similar to the length property, which can be accessed in the same way as an array of accesses, so starting with 0.

Third, getattribute () method

Gets the value of the property through the attribute name of the element node.

Grammar:

Elementnode.getattribute (name)

Description

1. Elementnode: Use getElementById (), getElementsByTagName (), and other methods to get to the element node.

2. Name: The attribute name of the element node to be queried

Iv. SetAttribute () method

The SetAttribute () method adds a new property that specifies a name and value, or sets an existing property to the specified value.

Grammar:

Elementnode.setattribute (Name,value)

Description

1.name: The name of the property to set.

2.value: The property value to set.

Attention:

1. Set the specified property to the specified value. If a property with the specified name does not exist, the method creates a new property.

2. Similar to the GetAttribute () method, the SetAttribute () method can only be called by the element node object function.

V. Insert Node appendchild ()

Adds a new child node after the list of the last child nodes of the specified node.

Grammar:

AppendChild (NewNode)

Parameters:

NewNode: Specifies the appended node.

Six, insert node InsertBefore ()

The InsertBefore () method inserts a new child node before the existing child node.

Grammar:

InsertBefore (Newnode,node);

Parameters:

NewNode: The new node to be inserted.

Node: Specifies that nodes are inserted before this node.

VII. Delete Node removechild ()

The RemoveChild () method removes a node from the list of child nodes. If the deletion succeeds, this method returns the node that was deleted, such as failure, and returns NULL.

Grammar:

Nodeobject.removechild (node)

Parameters:

Node: required, specify the node that needs to be deleted.

Dom manipulation of JavaScript

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.