DOM element Node type detailed

Source: Internet
Author: User
Tags tag name

1. Overview

The element type is used to represent HTML or XML elements, providing access to element tag names, child nodes, and attributes. The Element node has the following characteristics:

    1. The value of NodeType is 1

    2. The value of the NodeName is the label name of the element

    3. The value of NodeValue is null

    4. ParentNode may be Document or Element

    5. Its child nodes may be Element, Text, Comment, ProcessingInstruction, cdatasection, or EntityReference

To access the tag name of an element, you can use the NodeName property or the TagName property, which returns the same value. In HTML, tag names are always represented in all uppercase, and in XML (and sometimes XHTML), tag names are always consistent with the source code. If you are not sure if your script will be executed in HTML or an XML document, it is best to convert the label name to the same case before comparing it:

var mydiv = document.queryselector (' div '); Console.log (mydiv.tagname); // DIVConsole.log (mydiv.nodename); // DIV if (myDiv.tagName.toLowerCase () = = = ' div ') {//  This is best, applies to any document //  ...}

2. HTML elements

All HTML elements are represented by the HtmlElement type, not directly through this type, but also by its subtypes. The HtmlElement type inherits directly from Element and adds some attributes. The following standard attributes are present in each HTML element:

    1. The unique identifier of the ID element in the document

    2. Title additional descriptive information about the element, usually shown by a tooltip bar

    3. Lang element content language code, rarely used

    4. Dir language direction, value is LTR or RTL, also rarely used

    5. ClassName corresponds to the class attribute of the element

3, the acquisition and setting of features

Each element has one or more attributes that are used to give additional information about the corresponding element or its contents. There are three main DOM methods for operating characteristics, namely getattribute () SetAttribute () RemoveAttribute ().

Note that the attribute name passed to GetAttribute () is the same as the actual attribute name, so in order to get the class attribute value, you should pass in class instead of ClassName, which is only used when accessing the attribute through the object property. If the attribute of the given name does not exist, getattribute () returns NULL.

<div id = ' mydiv ' title = ' Hanzichi ' ></div><script>varMydiv = Document.queryselector (' div ');//attributeConsole.log (Mydiv.getattribute (' id '));//mydivConsole.log (Mydiv.getattribute (' class '));//NULLConsole.log (Mydiv.getattribute (' title '));//HanzichiConsole.log (Mydiv.getattribute (' Lang '));//NULLConsole.log (Mydiv.getattribute (' dir '));//NULL// PropertyConsole.log (mydiv.id);//mydivConsole.log (Mydiv.classname);//"'Console.log (Mydiv.title);//HanzichiConsole.log (Mydiv.lang);//"'Console.log (Mydiv.dir);//"'</script>

Custom attributes can also be obtained through the GetAttribute () method.

In real-world development, developers do not use GetAttribute (), but only the properties of objects. Use the GetAttribute () method only if you are getting custom attribute values. Why is it? For example, a style, when accessed through GetAttribute (), returns a style attribute value that contains CSS text, and an object is returned by accessing it through a property. such as the OnClick event handler, when used on the element, the onclick attribute contains the Javascript code, if accessed through GetAttribute (), will return the corresponding code string, and when accessing the OnClick property, it will return Javascript functions.

corresponding to GetAttribute () is SetAttribute (), which accepts two parameters: the name and value of the attribute to be set. If the attribute already exists, SetAttribute () replaces the existing value with the specified value, and if the attribute does not exist, SetAttribute () creates the property and sets the corresponding value.

The Removeattitude () method is used to completely remove the attributes of an element. Calling this method not only clears the value of the attribute, but also removes the attribute entirely from the element.

Div.setattribute (' id ', ' someotherid ');d iv.setattribute (' title ', ' Some other text '); Div.removeattribute (' class ')

4. Attributes Properties

The Element type is the only one of the DOM node types that uses the Attributes property. The Attributes property contains a namednodemap, similar to NodeList, and is also a "dynamic" collection. Each attribute of an element is represented by a Attr node, and each node is stored in the NamedNodeMap object. The NamedNodeMap object has the following methods:

    1. getNamedItem (name): Returns the node with the NodeName attribute equal to name

    2. RemoveNamedItem (name): Removes the NodeName attribute from the list that equals the name of the node

    3. SetNamedItem (node): Add nodes to the list, with the NodeName property of the node indexed

    4. Item (POS): Returns the node at the digital POS location

The Attributes property contains a series of nodes, and the nodeName of each node is the name of the attribute, and the nodevalue of the node is the value of the attribute.

//gets the attribute value of the elementvarid = element.attributes.getNamedItem (' id ')). NodeValue;varid = element.attributes[' id '].nodevalue;//getattribute () can also achieve the same functionvarid = element.getattribute (' id '));//The only difference compared to the RemoveAttribute () method is the ability to return the node that represents the deleted attributevaroldattr = Element.attributes.removeNamedItem (' id '));//adding new features//need to pass in an attribute nodeElement.attributes.setNamedItem (NEWATTR);

In general, because the attributes method described earlier is not convenient, developers will use the getattribute () RemoveAttribute () and the SetAttribute () method more.

However, if you want to iterate over the attributes of an element, the attributes attribute can be useful:

<div id = ' mydiv ' title = ' Hanzichi ' class = ' fish ' ></div><script>var mydiv = Document.querysel Ector (' div ');  for (var i = 0,len = mydiv.attributes.length;i<len;i++) {var attrname ==  Mydiv.attributes[i].nodevalue;console.log (Attrname,attrvalue);} // ID mydiv // title Hanzichi // class Fish</script>

5. Child nodes of the element

<ul id= ' Myul ' ><li>Item1</li><li>Item2</li><li>Item3</li></ul> <script>var myul = document.getElementById (' Myul '); Console.log (myUl.childNodes.length); // Ie:3 Other browsers: 7</script>

The above code, if it is IE to parse, then the <ul> element will have 3 child nodes, respectively, 3 <li> elements, and if other browser parsing, there will be 7 child nodes, including 3 <li> elements and 4 text nodes.

If you remove the whitespace between elements as follows, all browsers will return the same number of child nodes:

<ul id= ' Myul ' ><li>Item1</li><li>Item2</li><li>Item3</li></ul> <script>var myul = document.getElementById (' Myul '); Console.log (myUl.childNodes.length); // All browsers: 3</script>

DOM element Node type detailed

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.