JavaScript front-end and entry---JavaScript variable operating elements

Variable
JavaScript is a weakly typed language, javascript variable type is determined by its value. Definition of variables need to use the keyword 'var':

A = 123 var;
var = B 'ASD';
// can also define a plurality of variables "," separated, a common 'var' keyword
var c = 45, d = ' qwe', f = '68 ' ;
. 1
2
. 3
. 4
variable type

Five basic data types:
Number, String, Boolean, undefined, null

One kind of composite type:
Object

Variables, functions, attributes, function parameters naming

Case-sensitive
first character must be a letter, underscore (_) or dollar sign ($)
Other characters can be letters, underline, dollar signs or numbers
js defined variables var definitions can define a line, you may be defined in a var multiple variables;

js variable declaration and type instances

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// 单行注释

/ *
Multi-line comments
the following two variables declared a synthesis
* /

// was inum = 12;
// was str = 'abc';
was inum = 12, size = 'abc';
was iNum02;
// alert (inum);
// alert (str);
alert (iNum02);
</ script>
</ head>
<body>

</body>
</html>

js variable declarations and type instances
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
10
. 11
12 is
13 is
14
15
16
. 17
18 is
. 19
20 is
21 is
22 is
23 is
24
25
26 is
27
28
acquisition element method
may be used getElementById method on the internal document object to get the page id attribute on the element set, access to a html object, and then assign it to a variable, such as:

<Script type = "text / JavaScript">
var oDiv = document.getElementById ( 'DIV1');
</ Script>
....
<div ID = "DIV1"> This is a div element </ div>
. 1
2
. 3
4
5
above statement, if the javascript written on the element, an error occurs because the page is loaded down from the execution of javascript on the page to get the elements div1 when elements div1 not loaded, there are two solutions species:

The first method: the javascript into the page lowermost

....
<div ID = "DIV1"> This is a div element </ div>
....
<Script type = "text / JavaScript">
var oDiv = document.getElementById ( 'DIV1');
</ Script >
</ body>
1
2
3
4
5
6
7
the second method: put the javascript function inside window.onload statement triggered, will acquire the elements of the statement was executed after the page is loaded, it will not be wrong

<Script type = "text / JavaScript">
the window.onload = function () {
var oDiv = document.getElementById ( 'DIV1');
}
</ Script>
....
<div ID = "DIV1"> This is a div element </ div>
. 1
2
. 3
. 4
. 5
. 6
. 7
If we want to add to the element by js style, such as font-size = 30px provided; Note to - camel writing mode to writing mode, such as the fontSize, or I will complain;

js obtain elements to change the style examples

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
/*
document.getElementById('div1').style.color = 'red';
document.getElementById('div1').style.fontSize = '30px'
用变量简化代码：
*/
var oDiv = document.getElementById('div1');

oDiv.style.color = 'red';
oDiv.style.fontSize = '30px';
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>





</html>

js acquisition element change pattern Example
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
10
. 11
12 is
13 is
14
15
16
. 17
18 is
. 19
20 is
21 is
22 is
23 is
24
25
26 is
27
28
29
30
Operation element attributes
page elements acquired, it is possible to page elements attributes operation, including reading and writing operation property attributes.

The method of operation of properties:

. "" Operation
"[]" Operation
attribute wording

html the same properties and attributes which js wording
"class" attribute written "className"
"style" property inside the property, there are a bar type into a hump, such as: "font-size", into "style.fontSize"
by operational attributes. "":
operating element attribute instance

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
var oA = document.getElementById('link');
var oDiv2 = document.getElementById('div2');

// read attribute
var = sId and oDiv.id;
Alert (sId and);

// write property
oDiv.style.color = "Red";
oA.href = "http://www.baidu.com";
oA.title = "this is a link to go to Baidu net";

// attribute to be written in the operation class className
oDiv2.className = "BOX2";
}
</ Script>

Operating elements attribute instance
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
10
. 11
12 is
13 is
14
15
16
. 17
18 is
. 19
20 is
21 is
22 is
23 is
24
25
26 is
27
28
29
30
31 is
32
33 is
34 is
35
36
37 [
38 is
39
40
41 is
42 is
43 is
44 is
the " [] "operation properties:

<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> the Document </ title>
<Script type = "text / JavaScript">
the window.onload = function ( ) {
var oDiv = document.getElementById ( 'DIV1');
var = sMystyle 'the fontSize';
var sValue = '30px';
// oDiv.style.fontSize = sValue; // valid sentence
/ *
this is a no effect : sMystyle variable is considered an attribute
oDiv.style.sMystyle = sValue;
* /
/ * instead of the attribute with the variable, if desired, with [] to operate * /
oDiv.style [sMystyle] = sValue;
}
</ Script>
</ head>
<body>
<div ID = "DIV1"> this is a div element </ div>
</body>
</html>

By "[]" action property Example
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
10
. 11
12 is
13 is
14
15
16
. 17
18 is
. 19
20 is
21 is
22 is
23 is
24
25
26 is
altered element content

the innerHTML
the innerHTML tag can be read or written contents of the package
used to read the content from a database, and then inserted into the tag;

innerHTML example

<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> the Document </ title>
<Script type = "text / JavaScript">
the window.onload = function ( ) {
var oDiv = document.getElementById ( 'DIV1');
// read the contents inside the element
var STR = oDiv.innerHTML;
Alert (STR);
// write the content of the element inside
//oDiv.innerHTML = "modified text ";
oDiv.innerHTML =" <a href='http://www.baidu.com'> Baidu, </a> "
}
</ Script>
</ head>
<body>
<div ID =" DIV1 " > this is a div element </ div>
</ body>
</ HTML>

innerHTML example
---------------------

JavaScript front-end and entry---JavaScript variable operating elements

Guess you like