機能:HTML DOMを通じて、JavaScript HTMLドキュメントのすべての要素にアクセスできます.
HTML DOM(ドキュメントオブジェクトモデル)は、ウェブページが読み込まれていると、ブラウザでページのドキュメントオブジェクトモデル(Dockment Object Model)を作成します.HTML DOMモデルは対象ツリーとして構成されています.プログラム可能なオブジェクトモデルによって,JavaScriptは十分な能力を得て,動的HTMLを作成した.

JavaScriptは、ページ内のすべてのHTML要素

を変更することができる.

JavaScriptは、ページ内のすべてのHTML属性

を変更することができます.

JavaScriptは、ページ内のすべてのCSSスタイルを変更することができる

JavaScriptは、ページ内のすべてのイベントに対して反応することができます.
HTML要素を検索

IDによってHTML要素

を見つける.

Hello World!
     getElementById   ！

x=document.getElementById("intro");
document.write('<p>id="intro"         ：' + x.innerHTML + '</p>');

要素が見つかった場合、この方法は、オブジェクト(x中)の形で要素に戻ります.この要素が見つからない場合、xはnullを含みます.

タグ名によりHTML要素

を見つける.

Hello World!

The DOM is very useful.
     getElementsByTagName   。


var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id   "main"   div         ：' + y[0].innerHTML);

類名でHTML要素

を見つける.
1.HTMLを変更する
HTML出力ストリームを変更する

document.write(Date());

HTML内容を変更するdocument.getElementById(id).innerHTML=new HTML HTML属性を変更するdocument.getElementById(id).attribute=new value

![](smiley.gif)

document.getElementById("image").src="landscape.jpg";

2.CSSの変更
HTMLスタイルを変更するdocument.getElementById(id).style.property=new style

Hello World!
Hello World!

document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

My Heading 1

    

3.HTML DOMイベント
HTMLイベントの例:

ユーザがマウスをクリックすると

です.

ページが読み込まれているとき

画像が読み込まれたとき

マウスが要素に移動すると

入力フィールドが変更されたとき

HTMLフォームを提出すると

ユーザがキーをトリガする場合、例1:

または

function changetext(id)
{
id.innerHTML="  !";
}



      

HTMLイベントの属性はbutton元素にオンロックイベントを割り当てます.

    

function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}

使用 HTML DOM 来分配事件

    

document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}

onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}



       ：
         ，                。

onmouseoverとonmouseoutイベントonmouseoverとonmouseoutイベントは、ユーザのマウスがHTML要素の上に移動したり、要素を移動したりする時にトリガ関数として使用できます.

       

function mOver(obj)
{
obj.innerHTML="  "
}
function mOut(obj)
{
obj.innerHTML="       "
}

onmousedown、onmouseup及びonclickイベントonmousedown、onmouseup及びonclickはマウスクリックイベントのすべての部分を構成しています.まずマウスボタンをクリックすると、onmousedownイベントが発生します.マウスボタンを離すと、onmouseupイベントが発生します.最後にマウスをクリックしたら、Oclickイベントが発生します.

     

function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="       "
}
function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="       "
}

3.HTML DOM元素(ノード)
新しいHTML要素を作成します.HTML DOMに新しい要素を追加するには、まずこの要素(元素ノード)を作成し、既存の要素に要素を追加してください.

      
       


var para=document.createElement("p");   //     <p>   
var node=document.createTextNode("     。");   //   <p>       ，           。             
para.appendChild(node);       //    <p>           
var element=document.getElementById("div1");   //         ：
element.appendChild(para);   //             ：

既存のHTML要素を削除するにはHTML要素を削除する必要があります.最初にこの要素の親要素を取得してください.

      。
       。


var parent=document.getElementById("div1");  //   id="div1"    ：
var child=document.getElementById("p1");    //   id="p1"   <p>   ：
parent.removeChild(child);               ：