HTML Dom Basic concepts and Element.getattribute ("value") and Attribute.value differences

The blog tonight to write a JS, found a hole. Accidentally fell into the pit.
Originally wanted to write about this pit writing ideas is over, but I feel this opportunity to say again in the HTML DOM related stuff.

Before I start to draw a few questions, which leads to the following topics, but also as my personal study notes, and we encourage each other.

Let's start by mentioning 3 questions.

What is the HTML dom?

The full name of the HTML DOM is: HTML Document Object Model, which means: the documentation objects. The DOM, which we often say, is the HTML DOM. The DOM is a generic, one specification for all of the HTML documents.

Open the Web site http://www.w3school.com.cn/htmldom/index.asp
An explanation of the HTML DOM is made here.
The first sentence is:

The HTML DOM defines a standard way to access and manipulate HTML documents.
The DOM expresses an HTML document as a tree structure.

As we can see from above, the HTML DOM is just a definition of a way to define the access and operation of an HTML document.
The HTML DOM tree in the diagram is used to define the structure of HTML as a tree structure using HTML DOM.

At the point of opening http://www.w3school.com.cn/htmldom/dom_intro.asp This page, you can see this section.

The "Dom" is the standard for the "the". As you can see, Dom is just a standard for defining a specification of HTML.

What is an HTML DOM node?

By the above we know that DOM is used to define things.
So how does he define it?
Open the http://www.w3school.com.cn/htmldom/dom_nodes.asp and see this note below.

So we know that DOM is defining everything in HTML as a node, or in the world of DOM, that he thinks everything in the HTML document is a node (understand this bold text).
Divide a node into the following 5 types.
1. The entire document is a document node
2. Each HTML element is an element node
3. Text within an HTML element is a text node
4. Each HTML attribute (in HTML element) is an attribute node
5. Note is a comment node

Well, through this, we know that the HTML DOM node is the top 5 types.
Then someone might have wondered what the HTML element and the HTML DOM node are related to? In fact, through the above, we already know that HTML elements are just one of the types of HTML DOM nodes.
But most of us think of the HTML DOM node will be conditioned to think that it is not HTML elements , but in fact, HTML elements are just one of the HTML DOM nodes.

Note : Although HTML elements (nodes) are just one of the DOM nodes , when we manipulate DOM nodes, we actually manipulate HTML elements with element methods, attributes, events, So we would think that most of the time we manipulate DOM nodes are HTML elements.
again : HTML elements are not equal to HTML DOM nodes, HTML elements are just one of the HTML DOM nodes, HTML elements are also less than HTML DOM, HTML DOM is used to define all the contents of the HTML document One of the specifications. Note that all content is not simply representative of HTML elements.

What is an HTML DOM object?

We open: http://www.w3school.com.cn/jsref/index.asp
This page, we can see on the left there is a column.

The following 4 subkeys. As you can see,

The HTML Dom object contains altogether:
1. DOM Document Object (Document object)
2. DOM Element Object (Element Object)
3. DOM Attribute Object (Property object)
4. DOM Event Object (Event object)

The above 4 figures are the official interpretation of the website, it is not difficult to understand, what he said means that these objects are used to represent the HTML DOM node. Corresponds to the event of the document node, element node, attribute node, and element, respectively.
Then the object is well understood. It's just another form of expression. DOM nodes have methods and properties they all have.
But there's a difference, and it's the pit that I met before.
The element object and the attribute object, their relationship is: The Elements object contains the property, and the Property object also contains the property. So how do you tell the difference? Take the hole I met to illustrate.

<input name="username" value="tom" id="in" />

The input element is now an INPUT element object, as is the meaning of the consortium.
But the name in the input element, the value of these properties is the attribute object.
It sounds a little bit around. Continue to code

<script>    document.username.name="123";    // 这种方式获取到的是Attribute对象.    var ele = document.getElementById("#in");    // 而这种方式拿到的Element对象.</script>

If you do not understand, please run this code.
At run time, first delete the original 123, enter something else.
Then click the button to pop up 2 hints and look at the front and back 2 values. You know that two values are different.

The result of my output is:
Attribute object Access Value property mode: 12312321321321
The 111.html:16 element object calls the GetAttribute () method: 123

<form action="#"Method="Get"Name="Form"><input type="text" name="AA" value="123"/ ></form><button onclick="cc ()">Get value</button><script type="Text/javascript">  function cc() { alert ("attribute object access Value property mode:" + DOCUMENT.FORM.A A.value);        //This will pop up the value you entered. Alert (the element object calls the GetAttribute () method: " + document.form.aa.getAttribute (" value "));    //And this pops up 123 every time. }    </script>   

Because one gets the element object, one gets the attribute object.
The 2 differences are:
1. The attribute object gets the in-memory data.
2. The element object gets the data in the elements.

The data in the element is not changed. This can be seen through the review element.
, after I entered 12312321321321, the 123 in the element did not change.

Now we know the difference. But I think we might have a point of confusion, and that is, how do I know how to access properties using the attribute object?
before asking this question, you need to know what properties are in the attribute object. The
can be seen here in http://www.w3school.com.cn/jsref/dom_obj_attributes.asp with the following properties.

So how do you access it as a property? The
is actually very simple, take a look at the following code.

var  input = Document.getelementby ( "in" ); //we know this is getting an element.  var  value = input.value; //This is the way to access the attribute object to access the element Value property.  var  value1 = Input.getattribute ( "value" ); //and this is the way to call the element object of input to access the attributes of the elements.  //and also on the properties are not the same.  Input.value =  "al0n4k" ; //this writing is to set properties in the way attribute objects.  Input.setattribute ( "value" ,  "al0n4k" ); //This is the way to set properties with the Element object.   

Note: When you set an element's properties by using the Elements object, it is not written to memory, and accessing the property by using the attribute object cannot get the modified value. This is a pit when the form is submitted. If you want to set a value, use the attribute object to access the element's properties and set the value.

At this end of the article, in order to clarify I also delete and revise the change. It took a lot of time to be helpful to everyone. Mutual encouragement, cheers!

HTML Dom Basic concepts and Element.getattribute ("value") and Attribute.value differences