Dom manipulation of javascript: finding ELEMENT nodes

Source: Internet
Author: User
Tags tag name

Profile:

Programming interface

The HTML DOM can be accessed through JavaScript.

All HTML elements are defined as objects, while programming interfaces are object methods and object properties.

Methods are actions that you can perform (such as adding or modifying elements).

A property is a value that you can get or set (such as the name or content of a node).

  (i) through the GetElement series method:

document.getElementById ();//id
document.getElementsByTagName ();//tag name, elements Plus s, selected is an array of classes;
Document.getelementsbyname ();//name attribute, partial label can be, elements add s, select is class array;
Document.getelementsbyclassname ();//class;elements plus S, selected is an array of classes; IE9 below is not supported;

Document represents the entire documentation
Byid is to get an element node;
Bytagname,byname,byclassname gets an array of classes;


(ii) Traversing the node tree

ParentNode//parent element, top-level parent element is document;
ChildNodes//Sub-nodes
FirstChild//first child node
LastChild//Last child node
NextSibling//After a sibling node
Previoussiling//Previous sibling node

Note that the child nodes, not only the element nodes, text, annotations and so on belong to the node;

 (iii) Traversal of node trees based on elements

Parentelement
Children
Nextelementsibling
Previouselementsibling
Firstelementchild
Lastelementchild

In addition to the children, several other IE9 versions are not supported;

1<body>2<divclass="Div1">3<!--this isComment--4<strong></strong>5<p>6<span></span>7</p>8<em></em>9</div>Ten  One<script type="Text/javascript"> A     vardiv = document.getElementsByTagName ('Div')[0]; -</script> -</body>

Supplemental node Knowledge:

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:

Examples of Practice:

The following program fragment implementation function: Return all elements of a node child nodes (do not use the children method)

1<body>2<divclass="Div1">3<!--this isComment--4<strong></strong>5<p>6<span></span>7</p>8<em></em>9</div>Ten  One<script type="Text/javascript"> A     vardiv = document.getElementsByTagName ('Div')[0]; -  - function Returnelementchild () { the         vararr = [], -Child =Div.childnodes; -          for(vari =0; i < child.length; i++){ -             if(Child[i].nodetype = =1) + Arr.push (Child[i]); -         } +         returnarr; A     } at  - Console.log (Returnelementchild (Div)); -</script> -</body>

Dom manipulation of javascript: finding ELEMENT nodes

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.