Home > Developer > JavaScript
JavaScript is a big way, how can I come to join in the ride ^_^
Basically their knowledge of JS storage is very few, previously useful jquery to achieve some simple functions, to talk about JS's past life, the ins and outs, I was a small white. Picked up a "Javascript dom programming Art", began to slowly approached JS, and it set near, today is the third day, from the present, better get along. To write this, is a review of the process of memory, right when it is their own reading notes.
JavaScript is a kind of literal translation scripting language, is a dynamic type, weak type , prototype-based language, built-in support type, has been widely used in Web application development, often used to add a variety of dynamic features for web pages, To provide users with more smooth and beautiful browsing effect. JavaScript scripts are typically embedded in HTML to implement their own functionality.
Referring to JS, it is difficult to bypass a concept Dom(Document Object model), the personal understanding of this dom and JS is not very thorough. Officially, DOM is the standard programming interface recommended by the organization to handle extensible flag languages, and can access and modify the content and structure of a document in a platform-independent and language -free manner. In other words, this is a common way of representing and working with an HTML or XML document.
My understanding of DOM is the ability to model HTML or XML such as a document, to convert a document into a tree-like structure, and so on, in order to cooperate with the JS language in the model (such as HTML page) elements of the addition or removal operations. For historical reasons, Dom emerged and became a standard.
Some common methods are as follows:
getElementById (): The corresponding object is obtained from the element node according to the given ID attribute.
Such as:
< = "name" ></td >
through document.getElementById ("name") can get the whole TD mark, the idea here is to get an object .
getelementsbytagname (): Gets an array of objects corresponding to the tag tag name.
Such as:
1 <TR>2 3 <TD>One</TD>4 5 <TD>Both</TD>6 7 </TR>
by document.getElementsByTagName ("TD") you get all marked as TD for a Object Array .
getattribute (): Gets the property value based on the given property name
Such as:
<title= "name">Jackie is happy</p >
Name can be obtained by document.getElementsByTagName ("P") [0].getattribute ("title").
Note: This method cannot be called through the document and can only be called through an element node object.
SetAttribute (): Sets the value of a property.
If you pass document.getElementsByTagName ("P") [0].setattribute ("title", "Hobby"), the property value of title will be changed from name to Hobby.
In addition, here is a simple question that bothers me, as we all know, Dom has three nodes: element node + attribute node + text node
Although it's a simple concept, it's forced to make it clear that you don't want to keep a vague impression in your mind.
The comparison of three nodes from NodeType, NodeName and NodeValue three respectively:
NodeType:
ELEMENT node: 1
Attribute node: 2
Text nodes: 3
For nodename and NodeValue, depending on the case values, here is an example:
1. Element node:
1 <HTML> 2 <HEAD> 3 <TITLE>Differentiate between NodeName and NodeValue</TITLE> 4 </HEAD> 5 <BODY> 6 <Table> 7 <TR> 8 <TDID= "Jackie"name= "MyName">Jackie Z</TD> 9 </TR> Ten </Table> One <Script> A varD=document.getElementById ("Jackie"); - alert (d.nodetype); - alert (d.nodename); the alert (d.nodevalue); - </Script> - </BODY> - </HTML>
The result of the operation is:
Nodetype:1
Nodename:td
Nodevalue:null
2. Attribute node:
1 <HTML> 2 <HEAD> 3 <TITLE>Differentiate between NodeName and NodeValue</TITLE> 4 </HEAD> 5 <BODY> 6 <Table> 7 <TR> 8 <TDID= "Jackie"name= "MyName">Jackie Z</TD> 9 </TR> Ten </Table> One <Script> A varD=document.getElementById ("Jackie"). GetAttributeNode ("name"); -alert (d.nodetype); -alert (d.nodename); thealert (d.nodevalue); - </Script> - </BODY> - </HTML>
The results of the operation are as follows:
Nodetype:2
Nodename:name
Nodevalue:myname
3. Text node:
1 <HTML> 2 <HEAD> 3 <TITLE>Differentiate between NodeName and NodeValue</TITLE> 4 </HEAD> 5 <BODY> 6 <Table> 7 <TR> 8 <TDID= "Jackie"name= "MyName">Jackie Z</TD> 9 </TR> Ten </Table> One <Script> A varD=Documentgetelementsbytagname ("TD")[0].firstchild; - alert (d.nodetype); - alert (d.nodename); the alert (d.nodevalue); - </Script> - </BODY> - </HTML>
The results of the operation are as follows:
Nodetype:3
NodeName: #text ( nodeName are fixed for all text nodes )
Nodevalue:jackie
This article links: "A tentative study of JavaScript (a)--also talk about element nodes, attribute nodes, text nodes
If it works for you, welcome to Dabigatran, and welcome to the discussion.
A tentative study of JavaScript (i)--Also on element nodes, attribute nodes, text nodes
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
