The properties and properties of the source--dom element in return

Initiate

Many front-end class libraries, such as Dojo and jquery, will see two modules when it comes to DOM operations: attr, Prop. One day when the code review, see a section of the code to set the text for a node:

attr. Set ' InnerText ' ' Hello world! ')

This code does not take effect after execution, although innertext is not a standard attribute, has not been supported by FF, Chrome is available, this property is supported. Now that the text you're showing doesn't change, look at the elements.

InnerText was added to the HTML tag and replaced with the prop module, which succeeded in replacing the text for the node.

This small case involves a problem often overlooked in DOM operations: the difference between attributes and properties

Return to the source

In the DOM, attributes refer to attributes on the HTML tag, such as:

　　

A property is a description of a particular type of feature. It can be understood that the DOM element can be accessed through point syntax, and not as a standard attribute.

All nodes in the DOM implement the node interface. The node interface is defined in the DOM1 level, which defines the properties and operation methods used to describe the DOM node.

　　

Common NodeType, NodeValue, node relationships (parentnode, ChildNodes, FirstChild, LastChild, PreviousSibling, NextSibling, etc.) belong to the properties defined by the node interface. For the specific implementation of the node interface, HtmlElement not only inherits these attributes, but also has five standard features in five WAC specifications: ID, title, lang, Dir, class, and a property: attributes.

Each element has one or more attributes that are used to give additional information about the corresponding element or its contents. There are three ways to manipulate attributes directly through DOM elements:

• GetAttribute (Attrname)
• SetAttribute (attrname, value)
• RemoveAttribute (name)

All three of these methods can manipulate custom attributes. However, only recognized (non-custom) attributes are added to the DOM object as attributes, and manipulating these attributes is synchronized to the HTML tag . The five attributes of HtmlElement are treated with the corresponding attributes: ID, title, lang, dir, ClassName. Manipulating these attributes in the DOM is synchronized to the HTML tag.

However, the HTML5 specification enhances the custom attribute, as long as the custom attribute is written to the HTML tag as "Data-attrname", and the custom attribute can be accessed in the DOM attribute in the form of element.dataset.attrName, such as:

<input type=?"text"Name=?"as_q" class=?"Box"Id=?"searched_content"Title=?"Enter the search content here. "Disabled=?"false"Data-ff=?"FSDF">? seh.dataset.ff

　　

The attributes of an element are represented in the DOM by the attr type, and the attr type implements the node interface. The Attr object has three properties: Name, value, specified. Where name is the name of the attribute and value is the attribute value, specified is a Boolean value that indicates whether the attribute is explicitly set.

The Document.createattribute method can be used to create an attribute node. For example, to add an align attribute to an element, you can use the following methods:

Ar attr = document.createattribute ('align'left' Seh.setattributenode (attr)

To add a newly created attribute to an element, you must use the Setattributenode method of the element. When you add an attribute, the attribute is reflected on the HTML tag:

Note that although the node interface is also implemented by the attribute nodes, the attributes are not considered part of the DOM document Tree .

The attributes attribute in all DOM nodes is a property that is unique to the element type. Technically, a feature is a node that exists in the attributes attribute of an element. The Attributes property belongs to an instance of the NamedNodeMap type. Each attribute node of an element is saved in the NamedNodeMap object. The NamedNodeMap type has the following methods:

• getNamedItem (name): Returns an attribute node named name
• RemoveNamedItem (name): Delete attribute node with name name
• SetNamedItem (attr): Add an attribute node like an element
• Item (POS): Returns the node at the array pos

The get, set, and delete element nodes can be as follows:

Element.attributes.getNamedItem ('Align')//Getvarattr = Document.createattribute ('Align'); Attr.value=' Right'; Element.attributes.setNamedItem (attr);//AddElement.attributes.removeNamedItem ('Align');//Delete

The use of attribute nodes is not recommended in practical applications, and the getattribute, SetAttribute, and RemoveAttribute methods are far more convenient than operating feature nodes .

The DOM, attributes, attr relationships should be drawn like this:

Application Summary

Based on the above Dom basics and practical work experience, I summarize the differences between attributes and attributes as follows:

2. Attributes and recognized attributes can be accessed through point syntax, and in the HTML5 specification, the data-* form of custom features can be accessed through element.dataset.*, otherwise getattribute
4. The attribute value can only be a string, and the property value may be a type supported by any JavaScript
5. Several special features:
   2. Style, which operates by Getattrbute and setattribute, can only be used to get or set strings; The property way is to manipulate the Cssstyledeclaration object.
   4. Event handlers, which are both obtained and passed by attribute, are simply function strings;
   5. Value, for elements that support value, is best manipulated by property, and the operation is not reflected on the HTML tag

      Seh.value =Ten<input type="text"Name="as_q" class="Box"Id="searched_content"title="Enter the search content here. "Disabled="false"data-ff="FSDF"align=" Left">

   6. The
   7. href, which is set by the property way, can be reflected on the HTML tag, but it is not necessarily the same value that can be obtained by using the dot syntax and getattribute

       <a href= /jsref/prop_checkbox_tabindex.asp   "  id= tabi   >tabindex</a>link.getattribute (   " href  ] //  "/jsref/prop_checkbox_ Tabindex.asp " link.href  //  " http://www.w3school.com.cn/jsref/prop_ checkbox_tabindex.asp   

   8. Disabled and checked, for elements that support both of these features, are stateless in the HTML tags, as long as they have independent tag properties that return True when they are accessed in point syntax, or False if the HTML tag attribute is not present.

      <input type=?"text"Name=?"as_q" class=?"Box"Id=?"searched_content"Title=?"Enter the search content here. "Disabled=?"false"Data-ff=?"FSDF"Align=?" Left">? seh.disabled//trueseh.disabled=false<input type=?"text"Name=?"as_q" class=?"Box"Id=?"searched_content"Title=?"Enter the search content here. "Data-ff=?"FSDF"Align=?" Left"?

The properties and properties of the source--dom element in return