JS Common DOM Operations

Source: Internet
Author: User

Using DOM to get page element nodes

A) document.getElementById ()//id Get element Node object

b) document.getelementsbytagname ()//html tag get element node object (array)

c) Document.getelementsbyname (); Commonly used in forms (arrays)

property to determine the current node type NodeType

A) 1 element nodes

b) 2 attribute node

c) 3 Text node

d) 9 document node

Gets the number of nodes dom.length; Gets the content of the text node Dom.nodevalue; the name of the element node nodename

Get parent Node ParentNode

Get child node childNodes (Firefox, Chrome, etc. will wrap the line as a child node, IE will not)

Gets the first child node FirstChild; the last child node LastChild

Get sibling node

Previous node previoussibling; next node nextsibling

Dom Property Manipulation

Dom.name= "username"; Direct value Assignment (only valid for the standard properties)

SetAttribute (' name ', ' username '); Value assignment by method (valid for any property)

var name = getattribute (' name ');


The DOM takes note of the class attribute: Because class is a keyword, it cannot be directly dom.class= '; it should be dom.classname= '; the GetAttribute and SetAttribute methods do not change.

DOM Action style (Actions on styles are only for inline styles)

Dom.style.width = "100px";

The JS variable name cannot contain-, so if the name of the band-in the style attribute needs to be converted to a camel-like name, such as Background-color (-a) backgroundcolor

Node operations (Create-and-reinsert)

Create element node createelement (' P '); Create a text node createTextNode (' Today's Day of the Week ');

Append node Prentnode.appendchild (the name of the created node);

Prentnode.insertbefore (new,old) inserted in front of the old node as a sibling node;

AppendChild () and insertbefore () can not only perform append nodes, but also perform operation of node position movement.

Node replacement prentnode.replacechild (New,old)

Node replication Dom.clonenode () copies a DOM node (including child nodes), Dom.clonenode (false) (excluding child nodes), and appends it to the document after copying.

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.