素のJavaScript 〜基本編〜

あらゆる要素へのアクセス

メモ的な感じです。

IDを指定して取得

document.getElementById("foo");

クラスを指定して取得

1ページ複数の要素を取得することとなるので、
リストの形で返ってきます。

document.getElementsByClassName("foo");

タグを指定して取得

1ページ複数の要素を取得することとなるので、
リストの形で返ってきます。

document.getElementsByTagName("foo");

name属性を指定して取得

1ページ複数の要素を取得することとなるので、
リストの形で返ってきます。

document.getElementsByName("bar");

要素の親子兄弟を指定して取得

※liは複数存在する想定

<ul>
  <li>テスト01</li>
  <li>テスト02</li>
  <li>テスト03</li>
  <li>テスト04</li>
  <li>テスト05</li>
</ul>
<script>
var element = document.getElementsByTagName("ul");
</script>

親要素の指定

element[0].parentNode;

子要素の指定

element[0].childNodes;

子要素の一番目の要素の指定

element[0].firstChild;

子要素の最後の要素の指定

element[0].lastChild;

兄要素の指定

element[0].previousSibling;

弟要素の指定

element.nextSibling;

要素リストから要素を取得

<ul>
  <li>テスト01</li>
  <li>テスト02</li>
  <li id="test3">テスト03</li>
  <li>テスト04</li>
  <li>テスト05</li>
</ul>
<script>
var element = document.getElementsByTagName("li");
</script>

要素の数を取得

element.length; // 5

idがtest3の要素を取得

element.test3 // 結果 ： <li id="test3">テスト03</li>

リストの4番目の項目を取得

element.item(3); // 結果 ： <li>テスト04</li>

liの中のidがtest3のスタイルを変更。（背景：黄色、テキスト：赤色）

element.test3.style.backgroundColor = 'yellow';
element.test3.style.color = 'red';