JavaScriptのフロントエンドおよびエントリ--- JavaScriptの変数の操作要素

変数
JavaScriptは、変数の型は、その値によって決定されるjavascript弱い型付け言語です。変数の定義は、キーワード「VAR」を使用する必要があります。

= 123 VAR;
VAR = B 'ASD';
//はまた、複数の変数を定義することができる""分離された、共通の'VAR'キーワード
VAR C = 45、D = ' QWE'、F = '68 ' ;
1
2
。3
。4
変数の型

5つの基本的なデータ型:
数値、文字列、論理値、未定義、ヌル

複合型の一種:
オブジェクト

変数、関数、属性、関数パラメータの命名

大文字と小文字を区別し
、最初の文字は英字でなければなりません、アンダースコア(_)またはドル記号($)
その他の文字は、下線ドル記号や数字、英字ことができる
定義された変数のVARの定義は、ラインを定義することができますJS、あなたはVARで定義することができ複数の変数;

jsの変数宣言と型インスタンス

<!DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>ドキュメント</タイトル>
ます。<script type = "text / javascriptの">
//单行注释

/ *
複数行はコメントし
、次の2つの変数は、合成を宣言しました
* /

// INUM = 12でした。
//はSTR = 'ABC'でした。
INUM = 12、サイズ= 'ABC'でした。
iNum02でした。
//警告(INUM)。
//警告(STR);
警告(iNum02)。
</スクリプト>
</ HEAD>
<BODY>

</ BODY>
</ HTML>

JS変数宣言およびインスタンスタイプ
1
2
3
4
5
6
7
8
9
10
11
12である
13である
14
15
16
17
18れている
。19
20は、
21である
22である
23である
24
25
26である
27
28
収集要素法は、
ページを取得するために、内部ドキュメントオブジェクトにgetElementByIdをメソッドを使用することができます要素のid属性は、HTMLオブジェクトへのアクセスを設定し、など、変数に割り当てます。

<スクリプトタイプ= "テキスト/ JavaScriptを">
VAR oDiv =のdocument.getElementById( 'DIV1');
</ SCRIPT>
...
<DIV ID = "DIV1">これはdiv要素</ div>である
1。
2
3。
4
5
ページの要素がロードされていないDIV1とき2つの解がある要素のDIV1を取得するために、ページ上のJavaScriptの実行からダウンロードされるため、エラーが発生した声明上記は、Javascriptを要素に書かれている場合、種:

最初の方法:ページの最下段にはJavaScript

....
<DIV ID = "DIV1は">これはdiv要素</ DIV>です
....
ます。<script type = "text / JavaScriptを">
VAR oDiv =のdocument.getElementById( 'DIV1');
</ SCRIPT >
</ BODY>
1
2
3
4
5
6
7
第2の方法は:トリガwindow.onloadステートメント内のJavaScript関数を入れ、文の要素は、ページがロードされた後に実行された取得する、それは間違ってません

<スクリプトタイプ= "テキスト/ JavaScriptを">
window.onload =関数(){
VAR oDiv =のdocument.getElementById( 'DIV1');
}
</ SCRIPT>
...
<DIV ID = "DIV1">これはDIV要素</ div>
1。
2
3。
4。
5。
6。
7。
私たちは、このような提供のfont-size = 30pxとして、jsのスタイルで要素に追加したい場合は、に注意してください- fontSizeなど、書き込みモードにラクダ書き込みモードを、または私は文句を言うでしょう。

JSスタイルの例を変更する要素を取得

<!DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>ドキュメント</タイトル>
ます。<script type = "text / javascriptの">
window.onload =関数( ){
/ *
のdocument.getElementById( 'DIV1')style.color = '赤'。
。のdocument.getElementById( 'DIV1')style.fontSize = '30px'
用变量简化代码:
* /
VAR oDiv =のdocument.getElementById( 'DIV1');

oDiv.style.color = '赤';
oDiv.style.fontSize = '30px';
}
</ SCRIPT>
</ HEAD>
<BODY>
の<divのid = "DIV1">这是一个divの元素</ div>
</ BODY>
<! -ます。<script type = "text / javascriptの"> - >
<! - VAR oDiv =のdocument.getElementById( 'DIV1'); - >
<! - oDiv.style.color = '赤'; - >
<! - oDiv.style.fontSize = '30px'; - >
<! - </スクリプト> - >
</ HTML>

JS獲得素子変化パターンの例
。1
2
3
4
5
6
7
8
9
10
11
12である
13である
14
15
16
17
18れている
。19
20は、
21である
22である
23である
24
25
26れている
27
28
29
30
動作要素の属性を
取得したページ要素は、ページ要素に可能です読み取りおよび書き込み操作のプロパティ属性を含む操作を、属性。

プロパティの操作方法:

。「」操作
「[]」操作
属性言葉遣い

htmlの文言JS同じプロパティと属性の
「クラス名」書かれた「class」属性
「スタイル」プロパティの内部プロパティを、こぶにバータイプがあり、例えば:「フォントサイズ」、に「」style.fontSize
によって操作属性「」:
オペレーティング要素属性インスタンス

<!DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>ドキュメント</タイトル>
ます。<script type = "text / javascriptの">
window.onload =関数( ){
VAR oDiv =のdocument.getElementById( 'DIV1')。
VAR OA =のdocument.getElementById( 'リンク');
VAR oDiv2 =のdocument.getElementById( 'DIV2');

//読み属性
VAR = SIDとoDiv.id、
アラート(SIDと);

//書き込みプロパティ
oDiv.style.color = "赤";
oA.href = "http://www.baidu.com";
oA.title =「これは百度にネット行くためのリンクです」;

属性は、操作クラスclassNameの中に書き込まれるように//
oDiv2.className =「BOX2」;
}
</ SCRIPT>

<スタイルタイプ= "テキスト/ CSS">
■は{
フォントサイズ:20ピクセル、
カラー:ゴールド;
}
.box2 {
フォントサイズ:30px;
色:ピンク;
}
</スタイル>
</ head>
<body>
< DIV ID = "DIV1">これはdiv要素である</ DIV>
この</a>のに<a href="#" id="link">リンク
<DIV CLASS = "ボックス"上記>このID "DIV2"を挙げます=第二のdiv </ div>
</ BODY>
</ HTML>

操作エレメントは、インスタンス属性
。1
2
3
4
5
6
7
8
9
10
11
12である
13である
14
15
16
17
18である
。19
20
21であり、
22は
23である
24
25
26である
27
28
29
30
31であり、
32
33は
34である
35
36
37
38である
39
40
41である
42である
43である
44です
" []「動作特性:

<!DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<METAのcharset = "UTF-8">
<タイトル>ドキュメント</ TITLE>
<スクリプトタイプ= "テキスト/ JavaScriptを">
window.onload =関数( ){
VAR oDiv =のdocument.getElementById( 'DIV1');
VAR = sMystyle 'のfontSize';
VAR sValue = '30px';
// oDiv.style.fontSize = sValue; //有効な文
/ *
これは何も影響しません:sMystyle変数は属性であると考えられる
oDiv.style.sMystyle = sValue;
* /
/ *の代わりに動作する* / []を用いて、所望であれば、変数の属性、の
oDiv.style [sMystyle] = sValue;
}
</ SCRIPT>
</ヘッド>
<BODY>
<DIV ID = "DIV1">これはdiv要素である</ DIV>
</ BODY>
</ HTML>

"[]"アクションプロパティ例によって
。1
2
3
4
5
6
7
8
9
10
11
12である
13ことである
14
15
16
17
18である
。19
20
21であり、
22は
23である
24
25
26である
改変された元素の含有量

innerHTMLの
パッケージのinnerHTMLのタグが読み書き可能なコンテンツ
タグにデータベースからコンテンツを読み出すために使用され、その後、挿入。

innerHTMLの例

<!DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<METAのcharset = "UTF-8">
<タイトル>ドキュメント</ TITLE>
<スクリプトタイプ= "テキスト/ JavaScriptを">
window.onload =関数( ){
VAR oDiv =のdocument.getElementById( 'DIV1');
//は、素子内部の内容読み取り
VARのSTR = oDiv.innerHTMLと、
アラート(STR);
//内部要素の内容を記述
//oDiv.innerHTML =「修飾テキスト";
oDiv.innerHTML =" <a href='http://www.baidu.com'> Baiduは、</a>の"
}
</ SCRIPT>
</ HEAD>
<BODY>
<DIV ID =" DIV1 " >これはdiv要素は</ DIV>
</ BODY>
</ HTML>

innerHTMLの例
--------------------- 

おすすめ

転載: www.cnblogs.com/hyhy904/p/10983047.html