Shulou(Shulou.com)06/01 Report--

Element Typ

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

The value of nodeType is 1

The value of nodeName is the tag name of the element

The value of nodeValue is null

The value of parentNode is Document or Element

Its child nodes may be Element, Text, CDATASection, EntityReference, ProcessingInstruction or Comment

To access the tag signature of an element, you can use either the nodeName attribute or the tagName attribute; both attributes return the same value

one

You can get this element and the tag signature as follows

1 var div = document.getElementById ('myDiv'); 2 console.log (div.nodeName); / / "DIV" 3 console.log (div.tagName = = div.nodeName); / / true

Div.tagName actually outputs in uppercase, usually converted to lowercase

1 if (element.tagName.toLowerCase () = = "div") {/ / it is better to do 2 / / to perform operation 3} here

1. HTML element

All HTML elements are represented by the HTMLElement type, not directly through this type, but also by its subtypes. Each HTML element has the following standard properties:

Id, the unique identifier of the element in the document.

Title, additional information about the element, is generally displayed through the tooltip bar.

Lang, the language code for element content, is rarely used.

Dir, the Direction of language

ClassName, corresponding to the class attribute of the element

1 23 var div = document.getElementById ('myDiv'); 4 console.log (div.id); / / myDiv5 console.log (div.className); / / bd6 console.log (div.title); / / BOdy text7 console.log (div.lang); / / en8 console.log (div.dir); / / ltr

Of course, you can also give them a new value.

2. Acquire characteristics

There are three main DOM methods for operating characteristics: getAttribute (), setAttribute (), and removeAttribute ().

1 var div = document.getElementById ('myDiv'); 2 console.log (div.getAttribute (' id')); / / myDiv3 console.log (div.getAttribute ('class')); / / bd4 console.log (div.getAttribute (' title')); / / BOdy text5 console.log (div.getAttribute ('lang')); / / en6 console.log (div.getAttribute (' dir')); / / ltr

Returns null if the given name property does not exist

Custom properties can also be obtained through the getAttribute () method, such as:

1 2 var value = div.getAttribute ('my_special_attribute')

All the properties of any element can also be accessed through the attributes of the DOM element itself. However, only accepted features are added to the DOM object in the form of attributes.

one

Because id and align are accepted features in HTML, the corresponding attributes will also exist in the DOM object of this element. However, the custom feature my_special_attribute does not exist in Safari, Opera, Chrome, and Firefox; however, IE is

Custom properties also create attributes, such as:

1 console.log (div.id) / / myDiv2 console.log (div.my_special_attribute) / / underfined (except IE)

There are two special types of properties that have corresponding property names, but the value of the property is not the same as the value returned through getAttribute (). The first type is style, which returns css text when accessed through getAttribute (), while an object is returned when accessed through a property. The second category is time handlers like onclick. When accessed through getAttribute (), the text of the corresponding code is returned, while when accessed through a property, a JavaScript function is returned

Because of these differences, developers often use only the properties of objects instead of using getAttribute () when manipulating DOM programmatically through JavaScript. The getAttribute () method is used only if the custom property value is obtained.

3. Set the properties

SetAttribute () accepts two parameters: the special name and value to set. If the property already exists, setAttribute () replaces the existing value with the specified value; if the property does not exist, create a change property and set the corresponding value

1 div.setAttribute ('id','someOtherId'); 2 div.setAttribute (' class','ft')

All properties are attributes, so you can assign values to attributes directly:

1 div.id = 'someOtherId'

However, add a custom attribute to the DOM element as follows, which does not automatically become a property of the element

1 div.mycolor = "red"; 2 console.log (div.getAttribute ('mycolor')); / / null (except IE)

RemoveAttribute () is used to completely delete the element's feature:

1 div.removeAttribute ('class')

4. Attribute attribute

The Element type is the only DOM node type that uses the attribute attribute. The attributes property contains a NamedNodeMap, which, like NodeList, is also a "dynamic" collection. Each property of the element is represented by an Attr node, and each node is stored in the NamedNodeMap object. The NamedNodeMap object has the following methods.

GetNamedItem (name): returns the node whose nodeName attribute is equal to name

RemoveNamedItem (name): removes a node whose nodeName attribute is equal to name from the list

SetNamedItem (node): adds a node to the list, indexed by the node's nodeName attribute

Item (pos): returns the node at the location of the digital pos

The attributes attribute contains a series of nodes, the nodeName of each node is the name of the property, and the nodeValue of the node is the value of the property. To get the id feature, you can use the following code:

1 var id = element.attributes.getNamedItem ("id") .nodeValue

The following is a shorthand form for using square bracket syntax:

1 var id = element.attributes ["id"] .nodeValue = "someOtherId"

Calling the removeNamedItem () method has the same effect as calling the removeAttribute () method on an element: directly removing the property of the given name. The only difference between them is that removeNamedItem () returns the Attr node that represents the deletion feature.

The following code shows how to iterate over each feature of an element and then construct them into a string format such as name= "value" name= "value"

1 function outputAttributes (element) {2 var pairs = new Array (), 3 attrName, 4 attrValue, 5 I, 6 ien; 7 8 for

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.