JS操作HTML DOMツリーの一般的な使い方:

14736 ワード
jsモジュール 学習日記
JS操作HTML DOMツリーの一般的な使い方:
HTML出力ストリームを変更する
JavaScriptはダイナミックなHTMLコンテンツを作成できます.
今日の日付は、Thu Jun 21 2018-11:50:27 GMT+0800(中国標準時間)です.
JavaScriptでは、document.write()は、ストリーミングコンテンツを直接HTMLに出力するために使用することができる.
HTMLの内容を変更します
HTML内容の最も簡単な方法を変更する場合はinners HTML属性を使用します.
HTML要素の内容を変更するには、この文法を使ってください.
document.getElementById(id).innerHTML=new HTML
HTMLのプロパティを変更
HTML要素の属性を変更するには、この文法を使ってください.
document.getElementById(id).attribute=new value
HTMLスタイルを変更
HTML要素のスタイルを変更するには、この文法を使ってください.
document.getElementById(id).style.property=new style
DOM事件
HTMLイベントの例:
  • ユーザがマウスをクリックすると
    • です.
  • ページが読み込まれているとき
  • 画像が読み込まれたとき
  • マウスが要素に移動すると
  • 入力フィールドが変更されたとき
  • HTMLフォームを提出すると
  • ユーザがキーをトリガすると
    • この例では、ユーザが
    元素をクリックすると内容が変わります.
    <h1 onclick="this.innerHTML='  !'">      h1>
    ブロック要素にオンロックイベントを割り当てる:
    <button onclick="displayDate()">    button>
    ワンロードとワンマンロード事件
    onloadとonunloadイベントは、ユーザーがページに入るかまたは離れるときにトリガされます.
    オンラインイベントは、訪問者のブラウザタイプとブラウザバージョンを検出し、これらの情報に基づいてウェブページの正しいバージョンをロードするために使用されてもよい.
    onloadとonunloadイベントはcookieを処理するために使用できます.
    実例
    
<html>
<body onload="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
    {
    alert("    cookie")
    }
else
    {
    alert("    cookie")
    }
}
script>

<p>       ，         cookie。p>
body>
html>
    オンチャン事件
    オンチャンジイベントはしばしば入力フィールドの検証と結合して使用される.
    次はどうやってオンチャンを使うかの例です.ユーザーが入力フィールドの内容を変更すると、uperCase()関数を呼び出します.
    実例
    
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
script>
head>
<body>

       ：<input type="text" id="fname" onchange="myFunction()">
<p>         ，                。p>

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

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">       div>

<script>
function mOver(obj)
{
obj.innerHTML="  "
}

function mOut(obj)
{
obj.innerHTML="       "
}
script>

body>
html>
    実例2
    
<html>
<body>

<h1 onmouseover="style.color='red'" onmouseout="style.color='blue'">
           
h1>

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

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">     div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="       "
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="       "
}
script>

body>
html>
    その他のインスタンス
    ユーザーがマウスボタンを押すと、画像を変更します.
    
<html>
<head>
<script>
function lighton()
{
document.getElementById('myimage').src="/i/eg_bulbon.gif";
}
function lightoff()
{
document.getElementById('myimage').src="/i/eg_bulboff.gif";
}
script>
head>

<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="/i/eg_bulboff.gif" />
<p>             ！p>
body>
html>
    DOMノード
    新しいHTML要素を作成します.
    HTML DOMに新しい要素を追加するには、まずこの要素(元素ノード)を作成し、既存の要素に要素を追加してください.
    実例
    
<html>
<body>

<div id="div1">
<p id="p1">      。p>
<p id="p2">       。p>
div>

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

var element=document.getElementById("div1");//                    。              ：
element.appendChild(para);//                 ：
    script>

body>
html>
    既存のHTML要素を削除します.
    HTML要素を削除するには、最初にこの要素の親要素を得る必要があります.
    実例
    
<html>
<body>

<div id="div1">
<p id="p1">      。p>
<p id="p2">       。p>
div>

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

body>
html>
    スコープとスコープチェーンは何ですか?Javascript基礎学習ノート