HTML DOM を使用して JavaScript ドキュメント要素にアクセスするためのコード例-htmlチュートリアル-php.cn

HTML DOM を使用して JavaScript ドキュメント要素にアクセスするためのコード例

零下一度

リリース： 2017-05-05 11:51:39

オリジナル

1652 人が閲覧しました

HTML DOM を通じて、JavaScript HTML ドキュメントのすべての要素にアクセスできます。

HTML DOM (ドキュメントオブジェクトモデル)

Web ページが読み込まれると、ブラウザーはページのドキュメントオブジェクトモデル (Document Object Model) を作成します。

HTML DOM モデルはオブジェクトのツリーとして構築されます。

HTML DOM ツリー

プログラム可能なオブジェクトモデルを通じて、JavaScript は動的な HTML を作成するのに十分な能力を獲得します。

JavaScriptはページ内のすべてのHTML要素を変更できます

JavaScriptはページ内のすべてのHTML属性を変更できます

JavaScriptはページ内のすべてのCSSスタイルを変更できます

JavaScriptはページ内のすべてのイベントに反応できます

HTML要素を検索します

通常、JavaScript では HTML 要素を操作する必要があります。

これを行うには、まず要素を見つける必要があります。これを行うには 3 つの方法があります:

ID で HTML 要素を検索する

タグ名で HTML 要素を検索する

クラス名で HTML 要素を検索する

ID で HTML 要素を検索する

DOM で HTML 要素を検索する最も簡単な方法このメソッドは要素の ID を使用します。

例

この例では、id="intro" を持つ要素を検索します。

[html] view plain copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.php.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="www.php.cn/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
</head>   
<body>  
<p id="intro">hello</p>  
<p>本例演示 <strong>getElementById</strong> 方法</p>  
  
<script>  
    x = document.getElementById("intro");  
    document.write(&#39;<p>id="intro" 的段落中的文本是：&#39; + x.innerHTML + &#39;</p>&#39;);  
</script>  
</body>  
</html>

ログイン後にコピー

要素が見つかった場合、メソッドはそれをオブジェクトとして (x 内に) 返します。

要素が見つからない場合、x には null が含まれます。

タグ名で HTML 要素を検索する

例

この例では、id="main" の要素を検索し、次に "main" 内のすべての

要素を検索します:

[html] view plain copy
<html xmlns=www.php.cn/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
</head>  
  
<body>  
<div id="main">  
    <p>The DOM is very useful.</p>  
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>  
</div>  
<script>  
    var x = document.getElementById("main");  
    var y = document.getElementsByTagName("p");  
    document.write(&#39;id 为 "main" 的 div 中的第一段落文本是：&#39; + y[0].innerHTML);  
</script>  
</body>  
</html>

ログイン後にコピー

IE でクラス名で HTML 要素を検索します5 、6、7、8 では無効です。

【関連おすすめ】

1. 無料のHTMLオンラインビデオチュートリアル

2. HTML開発マニュアル

3. php.cnオリジナルのHTML5ビデオチュートリアル

以上がHTML DOM を使用して JavaScript ドキュメント要素にアクセスするためのコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。