JavaScript DOMプログラミング
7183 ワード
DOM
DOM:Dockment Objective Model(テキストオブジェクトモデル) D:ドキュメント html文書またはxml文書 O:オブジェクトdocumentオブジェクトの属性と方法 M:モデル DOMは、xml()に対するツリーベースのAPIである. DOMツリー:ノードの階層. DOMは、一つの文書を家族ツリー(父、子、兄弟) と表しています. DOMは、Nodeのインターフェースおよび多くのノードタイプを定義して、XMLノードの複数の態様 を表している.
ノードとタイプ要素ノード 属性ノード:要素の属性は、直接に属性によって動作することができる. テキストノード:要素ノードのサブノード である.
例 document.getElementById:ID属性から対応する単一ノードを取得する(この方法はdocumentオブジェクトの方法である) document.getElements ByTagName:ラベル名から指定されたノードセットを取得する(この方法はNodeインターフェースの方法であり、つまり任意のノードにもこの方法がある) document.getElementsByName:ノードのname属性に基づいて該当するノードセットを取得する(HTML要素自体がname属性を定義していない場合、この方法でいくつかのブラウザに対して無効となるので、慎重に使用する必要がある) 例
DOM:Dockment Objective Model(テキストオブジェクトモデル)
ノードとタイプ
例
Insert title here
// HTML window.onload 。
window.onload = function () {
// button ，
var btn = document.getElementsByTagName("button")[0];
// btn onclick : button ，
btn.onclick = function(){
// helloworld
alert("hello world");
}
}
<script type="text/javascript">
// .
window.onload = function(){
//1. id bj .
var bjNode = document.getElementById("bj");
alert(bjNode);
//2. li .
//
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);
var cityNode = document.getElementById("city");
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);
//3. HTML name .
var genderNodes = document.getElementsByName("gender");
alert(genderNodes.length);
}
</script>
<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
</code></pre>
<h3 style="text-indent:0px;"> </h3>
<ol>
<li> </li>
<li> </li>
<li> </li>
</ol>
<p><strong> </strong></p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script type="text/javascript">
// ： .
window.onload = function(){
// 。
//1.
var nameNode = document.getElementById("name");
//2.
alert(nameNode.value);
//3.
nameNode.value = "James";
}
</script>
<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/>
name: <input type="text" name="username" id="name" value="David"/>
</code></pre>
<h3> </h3>
<ol>
<li> 。</li>
<li> childNodes 。</li>
<li> </li>
<li> </li>
</ol>
<p><strong> </strong></p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script type="text/javascript">
//
window.onload = function(){
//1. city
var cityNode = document.getElementById("city");
//2. childNodes 。
// 9 （ ）
// 。
alert(cityNode.childNodes.length);
//3. city li 。
var cityNodes = cityNode.getElementsByTagName("li");
alert(cityNodes.length);
//4.
alert(cityNode.firstChild);
alert(cityNode.lastChild);
}
</script>
<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/>
name: <input type="text" name="username" id="name" value="David"/>
</code></pre>
<h3> </h3>
<ol>
<li> <p> 。</p> </li>
<li> <p> firstChild 。</p> </li>
<li> <p> nodeValue 。 </p> </li>
</ol>
<p><strong> </strong></p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script type="text/javascript">
//
window.onload = function(){
// 。
//1. 。
var bjNode = document.getElementById("bj");
//2. firstChild 。
var bjTextNode = bjNode.firstChild;
//3. nodeValue 。
alert(bjTextNode.nodeValue);
bjTextNode.nodeValue = " ";
//alert(bjTextNode)
}
</script>
<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/>
name: <input type="text" name="username" id="name" value="David"/>
</code></pre>
<p> </p>
</div>
</div>
</div>
</div>