【HTMLを操作するDOM】javascript初心者の学習メモ

js Uncategorized

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

HTMLもしくはXMLの各要素にアクセスするための仕組み。
javascriptではこれを使用してHTMLを操作することになる。(ふむふむ)

続いてDOMツリーについて。
DOMツリーとはHTML、XMLの内容をツリーの形としてあらわしたもの。(なるほど)

<!DOCTYPE html>
<html> 
<head>
    <meta charset="utf-8">
    <title>javascrpt学習</title>
</head>
    <body>
        <h1>このファイルを使用して学習していきます</h1>
        <div id="main">
          <p>AAAAAAAAAAAA</p>
          <p>BBBBBBBBBBBB</p> 
        </div>
        <div class="zaku">
          <p>zakuzaku</p>
        </div> 
        <script src="main.js"></script>
    </body>
</html> 

■とりあえず要素を取得してみる

■最初に書いたHTML内のIDを取得してみる。

window.onload = function() {
  // id=mainのものを取得。 
  var id = document.getElementById('main'); 
}

■タグやクラスでの取得。

 window.onload = function() {
  // pタグを取得。 
  var p = document.getElementsByTagName('p'); 
   // クラスでを取得。 
  var zaku = document.getElementsByClassName('zaku');  
} 

こんな感じで要素の取得ができる。ほかにもあるが今回はこの2点。

注意点としてIDで取得のほうは
document.getElementById Elememtが単数形なのに対し、
クラス、タグで取得のほうは
document.getElementsByTagName  Elements が複数形になってる。

他にも指定方法がいくつかあるが今回はこれだけ。
また書きます。
まだ勉強中です。

コメント

タイトルとURLをコピーしました