HTML DOM (ii): node additions and deletions

Source: Internet
Author: User
Tags tagname

The previous article tells the basic knowledge of DOM, and from it that in the DOM eye, every component of HTML can be regarded as a node (document node, element node, text node, attribute node, annotation node, where the attribute node belongs to the element node), The content of this article is through the DOM of these nodes for the operation of the additional pruning and checking.

Get (R)
1. getElementById (ID), Getelementsbyname (name), getElementsByTagName (TagName), all three methods ignore the structure of the document.

    • getElementById (ID): Gets the element node by ID, if the page contains more than one node with the same ID, then only the first node is obtained, in theory, the ID should be unique on the page. The node is obtained through $ ("#id") in jquery, which is similar to the ID selector in CSS.
    • Getelementsbyname (name): Gets a set of element nodes by name and returns an array of nodes with the same name. Note that this method in IE and the Internet (FireFox, Chrome) performance is not the same, this method should not be the DOM Level 1 specification, IE support Level 1, and later standards have a lot of differences. There are several main differences:

  IE through Getelementsbyname (name) can only get form elements of the node;
  IE does not differentiate between ID and name, that is, by Getelementsbyname (name) The obtained node array also contains the same ID as name, by getElementById (ID), or by using name as the parameter, see the official description of MSDN.
  When you use the Getelementsbyname method, all elements in the document that has the specified NAME or ID a Ttribute value is returned. Elements that support both the NAME and the ID attribute is included in the collection returned by the Getelementsbyname method, but isn't elements with a NAME expando.

    • getElementsByTagName (TagName): Gets a set of element nodes by TagName, returning an array of nodes with the same tagName. The special thing about this method is that it can be used not only by the top-level document, but also by all element nodes. such as: document.getElementById ("container"). Getelementbytagname ("div"), which is somewhat similar to the CSS style, For example, define all div styles under the container element node:. container Div{display:none;}.

2. ParentNode, FirstChild, and LastChild, these three properties can be returned to use.
HTML instance:


ParentNode: Gets the parent node of the current node, such as document.getElementById ("Level21"). ParentNode, can also obj.parentNode.parentNode.parentNode.
FirstChild: Gets the first child node of the current node, such as document.getElementById ("Level1"). FirstChild;, can also document.getElementById ("Level1"). Firstchild.firstchild.
LastChild: Gets the last child node of the current node, such as document.getElementById ("Level1"). LastChild.

3. Root node, Document.documentelement gets the HTML as well as the root node in the XML document, Document.body provides direct access to the body node.
4. All sub-nodes: ChildNodes and children, different versions of various browsers behave differently.
5. Node Information: nodeName (tagName), NodeValue, NodeType.

    • NodeName

The nodename of the element node is the label name
The nodename of the attribute node is the property name
The nodename of the text node is #text
The nodename of the document node is #document

    • NodeValue

The nodevalue of a text node contains text
The nodevalue of the attribute node contains the property value
ELEMENT nodes and document nodes are not nodevalue

    • NodeType
element Type node Type
Elements 1
Property 2
Text 3
Comments 8


Create (C) & Modify (U) & Delete (D)
Write an example of clicking a cell into a text box.


HTML DOM (ii): node additions and deletions

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: 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.