JavaScriptの基本となるDOM操作。この記事ではその中でもDOMの取得について解説をしていきます！
この記事の内容
- DOMとは？
- id名からDOMを取得する方法
- class名からDOMを取得する方法
- タグ名からDOMを取得する方法
- まとめ
DOMとは？
まずはDOMについて説明をしていきます。
DOMとはDocumentObjectModelの略です。
ブラウザがHTMLファイルを読み込んだ時にブラウザはHTMLファイルを解析し、DOMツリーというのを作成します。
以下のHTMLファイルがあったとします。
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph</p>
</body>
</html>この時、ブラウザはHTMLファイルを解析して以下のようにDOMツリーを作成しています。
Document
├── html
│ ├── head
│ │ └── title
│ │ └── "My Web Page"
│ └── body
│ ├── h1
│ │ └── "Hello, World!"
│ └── p
│ └── "This is a paragraph"
DOM操作とはJavaScriptでこのDOMツリーから要素を取得してWebページを動的に操作できるようにすることを言います。
・id名からDOMを取得する方法
id名からDOMを取得する場合はgetElementById()を使います。()内に文字列でid名を指定します。
以下はサンプルコードです。
【HTMLのコード】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
<script src="script.js" defer></script>
</head>
<body>【JavaScriptのコード】
const element = document.getElementById(‘header');
// タグも含めてコンソールに表示
console.log(element);
// Hello, World!のみをコンソールに表示
console.log(element.textContent);上記のコードではelementという変数の中にid名で取得した要素を代入しています。
コンソール上には
<h1 id=”header”>Hello, World!</h1>
と表示されます。
もし、「Hello, World!」のみを取得したい場合は5行目のように記載することで取得できます。
class名からDOMを取得する方法
class名からDOMを取得する場合はgetElementsByClassName()を使います。()内に文字列でclass名を指定します。
以下はサンプルコードです。
【HTMLのコード】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
<script src="script.js" defer></script>
</head>
<body>
<h1 class="header">Hello, World!</h1>
</body>
</html>【JavaScriptのコード】
const element = document.getElementsByClassName('header');
// HTMLCollectionをコンソールに表示
console.log(element);
// Hello, World!のみをコンソールに表示
console.log(element[0].innerHTML);上記のコードではelementという変数の中にclass名で取得した要素を代入しています。
このgetElementsByClassName()での取得の仕方ですが、これは戻り値としてHTMLCollectionというものを返しています。
そのため、3行目のようにコンソールに出力するとHTMLCollectionと表示されます。
厳密に言えば配列ではありませんが、配列のように要素を取得しています。
id名は一意のもので、1つのHTMLファイル内で同じ名前を複数使うことができません。しかしclass名は同じ名前を複数付けることが可能です。そのため配列のような取得の仕方になります。
上記のサンプルコードの場合、headerというclass名は1つしかないため、1つだけ要素が格納されたHTMLCollectionが返されます。
もし、「Hello, World!」のみを取得したい場合は5行目のように記載する必要があります。
タグ名からDOMを取得する方法
タグ名からDOMを取得する場合はgetElementsByTagName()を使います。()内に文字列でタグ名を指定します。
以下はサンプルコードです。
【HTMLのコード】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>【JavaScriptのコード】
const element = document.getElementsByTagName('h1');
// HTMLCollectionをコンソールに表示
console.log(element);
// Hello, World!のみをコンソールに表示
console.log(element[0].innerHTML);上記のコードではelementという変数の中にタグ名で取得した要素を代入しています。
このgetElementsByTagName()というのもgetElementsByClassName()と同様にHTMLCollectionを返しています。
まとめ
今回はid名、class名、タグ名の3種類に分けてそれぞれでのDOMの取得方法について解説をしていきました。
次回の記事ではその他のDOMの取得方法、HTMLの範囲を絞ってDOMを取得する方法について解説をしていきたいと思います！
最後まで読んでいただきありがとうございます。
