javascript DOM(一)
9925 ワード
DOM:Dockment Object Model(テキストオブジェクトモデル)
D:ドキュメント-)ドキュメントまたはxmlドキュメント
O:オブジェクト---documentオブジェクトの属性と方法
M:モデル
DOMは、xml()に対するツリーベースのAPIです.
DOMツリー:ノードの階層.
DOMは一つの文書をファミリーツリー(父、子、兄弟)と表します.
DOMは、Nodeのインターフェースおよび多くのノードタイプを定義して、XMLノードの複数の態様を表す.
1.ノードとそのタイプ:
1)要素ノード
2)属性ノード
3)テキストノード
ノードとそのタイプ
ノード(node):ネットワーク理論に由来し、ネットワークの接続点の一つを表します.ネットワークはノードによって構成される集合である.
＜p title=「a gentle reminder」＞Don't forget to buy this stuff.
pはelement node.要素ノードです.
title=「a gentle reminder」はatribute node.属性ノードです.
Don't forget to buy this stuff.text node.テキストノードです.
なお、Don't forget to buy this stuffは、ノードpのサブノードである.
2.html文書のどこでjsコードを作成しますか?
0)htmlページに直接コードを書きます.
短所: jsとHtmlは結合性が強すぎて、メンテナンスに不便です.
1)一般的には、bodyノードの前に直接にbody内のノードを取得することはできません.この時点では、ドキュメントツリーのロードが完了していないため、指定されたノードが取得できません.ある方法の内部にある場合を除き、このようにすれば、メソッドを呼び出したときだけ、ノードを取得することができます.このときには、一般的な文書ツリーの読み込みが完了しました.
2)htmlドキュメント全体の最後に、類似コードを略語することができますが、これは習慣に合わないです.
3)一般的に、bodyノードの前でjsコードを作成するが、window.onloadイベントを利用する必要がある.イベントは、現在のドキュメントが完全にロードされた後にトリガされますので、コードはドキュメントの任意のノードに取得できます.
＜script type=「text/javascript」＞
window.onload=function(){
var cityNode=document.getElemenntById(「city」)
alert(cityNode)
)
4)onclickなどの属性の割り当てに関する問題:
スクリプトtype="text/javascript"内部でノードにイベントを追加する方法.いらないです.たとえば:
＜script type=「text/javascript」＞
var button=document.getElemenntById(「button」)
button.onclick=alert(「ハロー、World」);
ここではブットンにクリックイベントを追加しました.しかし、ページを読み込む時には、AlertウィンドウHello、Worldがあります.また、buttonをクリックしても、何の効果もありません.この原因は、button.onclickが実行しているのはalert(「ハロー、World」)です.しかし、alertは実行結果がない.
次の例:
＜script type=「text/javascript」＞
function hellowworld(){
alert(Hello,World);
)
var button=document.getElemenntById(「button」)
button.onclick=hellowworld;//ここではハロルドメソッドを実行します.括弧は入れないでください.括弧を入れると、そのままハロルドメソッドを実行するからです.括弧は入れないでください.
var test=hellowworld;//方法の引用
test()///ここでハロルド法体を実行します.
①. button.onclick=hello World()
不正な割当方法では、上記のコードはハロルド関数の実行をもたらしますが、Oclick属性に付与されるのは関数の実行結果です.
②. button.onclick=hello World;正しい割当方法で、Oclick属性を付与するのは関数の参照です.
3.どのようにして要素ノードを取得しますか?
1).Dcument.getElemenntById:id属性から対応する単一ノードを取得する
2)document.getElementsByTagName:ラベル名から指定されたノード名の配列を取得し、配列オブジェクトlength属性は配列の長さを取得することができる.
3).Dcument.getElementsByName:ノードのname属性から条件に合うノード配列を取得するが、ieの実現方式はW 3 C標準と異なる.htmlドキュメントにおいて、あるノード(li)にname属性がない場合、ieは使用する.
getElements ByNameはノード配列を取得できませんが、フォックスは可能です.
4)他の2つの方法getElementsByClass Name、getElements ByTagNamens、ieはまったくサポートしていないので、使用を推奨しません.
コードは以下の通りです
1)プロパティノードの値は、cityNode.idのように直接取得して設定することができます.
2)要素ノードのgetAttributeNode方法で属性ノードを取得し、nodeValueで属性値を読み書きする.
コード:
D:ドキュメント-)ドキュメントまたはxmlドキュメント
O:オブジェクト---documentオブジェクトの属性と方法
M:モデル
DOMは、xml()に対するツリーベースのAPIです.
DOMツリー:ノードの階層.
DOMは一つの文書をファミリーツリー(父、子、兄弟)と表します.
DOMは、Nodeのインターフェースおよび多くのノードタイプを定義して、XMLノードの複数の態様を表す.
1.ノードとそのタイプ:
1)要素ノード
2)属性ノード
3)テキストノード
ノードとそのタイプ
ノード(node):ネットワーク理論に由来し、ネットワークの接続点の一つを表します.ネットワークはノードによって構成される集合である.
＜p title=「a gentle reminder」＞Don't forget to buy this stuff.
pはelement node.要素ノードです.
title=「a gentle reminder」はatribute node.属性ノードです.
Don't forget to buy this stuff.text node.テキストノードです.
なお、Don't forget to buy this stuffは、ノードpのサブノードである.
2.html文書のどこでjsコードを作成しますか?
0)htmlページに直接コードを書きます.
短所: jsとHtmlは結合性が強すぎて、メンテナンスに不便です.
1)一般的には、bodyノードの前に直接にbody内のノードを取得することはできません.この時点では、ドキュメントツリーのロードが完了していないため、指定されたノードが取得できません.ある方法の内部にある場合を除き、このようにすれば、メソッドを呼び出したときだけ、ノードを取得することができます.このときには、一般的な文書ツリーの読み込みが完了しました.
2)htmlドキュメント全体の最後に、類似コードを略語することができますが、これは習慣に合わないです.
3)一般的に、bodyノードの前でjsコードを作成するが、window.onloadイベントを利用する必要がある.イベントは、現在のドキュメントが完全にロードされた後にトリガされますので、コードはドキュメントの任意のノードに取得できます.
＜script type=「text/javascript」＞
window.onload=function(){
var cityNode=document.getElemenntById(「city」)
alert(cityNode)
)
4)onclickなどの属性の割り当てに関する問題:
スクリプトtype="text/javascript"内部でノードにイベントを追加する方法.いらないです.たとえば:
＜script type=「text/javascript」＞
var button=document.getElemenntById(「button」)
button.onclick=alert(「ハロー、World」);
ここではブットンにクリックイベントを追加しました.しかし、ページを読み込む時には、AlertウィンドウHello、Worldがあります.また、buttonをクリックしても、何の効果もありません.この原因は、button.onclickが実行しているのはalert(「ハロー、World」)です.しかし、alertは実行結果がない.
次の例:
＜script type=「text/javascript」＞
function hellowworld(){
alert(Hello,World);
)
var button=document.getElemenntById(「button」)
button.onclick=hellowworld;//ここではハロルドメソッドを実行します.括弧は入れないでください.括弧を入れると、そのままハロルドメソッドを実行するからです.括弧は入れないでください.
var test=hellowworld;//方法の引用
test()///ここでハロルド法体を実行します.
①. button.onclick=hello World()
不正な割当方法では、上記のコードはハロルド関数の実行をもたらしますが、Oclick属性に付与されるのは関数の実行結果です.
②. button.onclick=hello World;正しい割当方法で、Oclick属性を付与するのは関数の参照です.
3.どのようにして要素ノードを取得しますか?
1).Dcument.getElemenntById:id属性から対応する単一ノードを取得する
2)document.getElementsByTagName:ラベル名から指定されたノード名の配列を取得し、配列オブジェクトlength属性は配列の長さを取得することができる.
3).Dcument.getElementsByName:ノードのname属性から条件に合うノード配列を取得するが、ieの実現方式はW 3 C標準と異なる.htmlドキュメントにおいて、あるノード(li)にname属性がない場合、ieは使用する.
getElements ByNameはノード配列を取得できませんが、フォックスは可能です.
4)他の2つの方法getElementsByClass Name、getElements ByTagNamens、ieはまったくサポートしていないので、使用を推奨しません.
コードは以下の通りです
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function(){
//1. " " li
//1).
var bj = document.getElementById("city");
//alert(bj);
//2). ie : name , ie
bj = document.getElementsByName("BeiJing");
//alert(bj.length);
var genders = document.getElementsByName("gender");
//alert(genders.length);
//3).
var uls = document.getElementsByTagName("ul");
alert(uls.length);
};
</script>
</head>
<body>
<p> ?</p>
<ul id="city">
<li id="bj" name="BeiJing"> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<br><br>
<p> ?</p>
<ul id="game">
<li id="rl"> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</body>
</html> 1)プロパティノードの値は、cityNode.idのように直接取得して設定することができます.
2)要素ノードのgetAttributeNode方法で属性ノードを取得し、nodeValueで属性値を読み書きする.
コード:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function(){
var maleNode = document.getElementsByName("gender")[0];
//1.
alert(maleNode.type);
//2. ， value 。
maleNode.value = "male^^";
//3. , ( )
/*
var typeNode = maleNode.getAttributeNode("type");
alert(typeNode.nodeValue);
typeNode.nodeValue = "text";// ， ，firefox ， IE 。
*/
};
</script>
</head>
<body>
<p> ?</p>
<ul id="city">
<li id="bj" name="BeiJing"> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<br><br>
<p> ?</p>
<ul id="game">
<li id="rl"> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</body>
</html>