Code Journey

30代未経験からプログラミング挑戦中(追うものは追われる者に勝る)

トップ > JavaScript > 【初学者用まとめ(DOM操作編)】まず覚えるべきJavaScriptのコードの書き方（自習記録）

【初学者用まとめ(DOM操作編)】まず覚えるべきJavaScriptのコードの書き方（自習記録）

JavaScript

はじめに

前提

まず前提として、この記事を書いているのは未経験からプログラミングに挑戦中の者になります。学習はフィヨルドブートキャンプに参加しながら取り組んでいて、現役のエンジニアの方からレビューをもらいながら進めています。

現在の学習状況は以下を随時更新しているので興味ある方はご覧ください。

hirano-vm4.hatenablog.com

筆者は執筆時点で、Ruby（Ruby on Rails）のプラクティスが終わったあとにJavaScriptに取り組んでいるので、完全に0からではありません。JavaScriptを多言語から学ぶにあたって、まず覚えるべき要点をまとめました。

詳しい解説ではなく要点をまとめた学習記録・ノートになりますのでご注意ください。

この記事の本体は以下のなります。この記事はその記事の一部になりますので、そちらからご覧ください。

hirano-vm4.hatenablog.com

DOM操作

DOMとは

  • DOM（Document Object Model）は、文書（通常はHTMLまたはXML文書）の構造を表現し、その構造をプログラムから操作できる方法を提供するAPI
  • DOM は標準化団体である W3C で以前は標準化が行われていましたが、現在では WHATWG によって標準化が行われている
  • DOM は、 HTML や XML のドキュメントに含まれる要素や要素に含まれるテキストのデータをオブジェクトとして扱う（ドキュメントをオブジェクトが階層的に組み合わされたものとして識別）
  • 例えばボタンを設置して、それをユーザーがクリックしたらブラウザのリロードをせずに文字が出現するなどの操作が可能

DOMの階層構造

  • DOM ではドキュメントを構成するオブジェクトのことを「ノード」と呼ぶ
  • ノードは種類に応じて「要素ノード（htmlやbodyダグなど）」「テキストノード（そのまま文字列）」「属性ノード（idなど）」に分類される
  • 最上位のノードは Document ノード
  • 空白ノード：HTML ページの中で記述された空白やタブ、改行など空白文字は、 HTML ページがブラウザで表示される時にすべてがそのまま表示されるのではなく決められたルールに従って無視されて表示されるがDOM の中では要素と要素の間に空白やタブ、改行文字がある場合は空白ノードとして扱われるため注意が必要
  • Webページに記述した JavaScript から DOM を使用することで、 Web ページ上のテキストデータの読み込み、新しい要素の追加、 Web ページ上に表示されたボタンがクリックされた時にあらかじめ設定した処理を行うことができるようになる

ノード間の関係

  • ドキュメントに含まれる各ノードにはドキュメントツリーの位置に応じて親子関係や兄弟関係が存在する

id属性の値を指定して要素ノードを取得(getElementById)

Document オブジェクトのgetElementById メソッドは、要素の id 属性の値を指定して一致する Element オブジェクトを取得する

document.getElementById(id)

例：id属性の値として'button'が設定された要素ノードを取得する場合

let element = document.getEkementById('button');
  • HTMLにおいてidは重複して使えない（もし重複し場合は最初の要素ノードを取得）
  • これを変数に入れてその際に実行したい処理を記述していく

タグ名を指定して要素ノードを取得(getElementsByTagName)

Document オブジェクトの getElementsByTagName メソッドは、要素のタグ名を指定して一致する要素ノードをすべて取得する。

document.getElementsByTagName(tagname)
  • 引数にはタグ名を DOMString オブジェクトで指定(例： div や p など)
  • * を指定した場合はすべての要素に一致
  • 戻り値は HTMLCollection オブジェクト（HTMLCollection オブジェクトは複数の要素ノードの集合）
    • HTMLCollection オブジェクトにはlength プロパティと item メソッド、namedItem メソッドが用意されているため取得した要素ノードの数を取得したり、指定した要素ノードを取したりできる
let elements = document.getElementsByTagName("div");

// 取得した要素の数を取得
let count = elements.length;

// インデックスを指定して要素を取得
let element = elements.item(0);

// インデックスを指定して要素を取得その2
let element = elements[0];

// ID属性またはname属性を指定して要素を取得
let element = elements.item("user");

練習してみた

HTML

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>getElementsByTagNameの練習！！</title>
  </head>
  <body>
    <h1>わいの好きなもの</h1>

    <div>
      <p>ラーメン</p>
      <p>寿司</p>
    </div>

    <div>
      <p>猫</p>
      <p>犬</p>
    </div>

    <button onClick="getElements();">要素をコンソールに表示させる</button>

    <script>
      function getElements() {
        let elements = document.getElementsByTagName("p");
        for (let i = 0; i < elements.length; i++) {
          console.log("Text: " + elements.item(i).textContent);
        }
      }
    </script>
  </body>
</html>

ボタンを押してみると実行できました😄

特定の要素の子孫要素に限定して要素ノードを取得
  • getElementsByTagName メソッドは Document オブジェクトの他に Element オブジェクトでも用意されている
  • getElementsByTagName メソッドを使用すると、その要素ノードの子や孫の要素ノードに限定してタグ名(要素名)を指定して要素ノードを取得することができる

例 idの属性の値がlistの要素ノードの子孫の中からdivタグの要素ノードを取得する場合は通常以下のように2行にわたって記述が必要

let element = document.getElementById('list');
let elements = element.getElementsByTagName('div');

しかしまとめて記述することもできる。

let elements = document.getElementById('list').getElementsByTagName('div');

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>getElementsByTagNameの練習！！</title>
  </head>
  <body>
    <h1>わいの好きなもの</h1>

    <div id="food">
      <p>ラーメン</p>
      <p>寿司</p>
    </div>

    <div id="other">
      <p>猫</p>
      <p>犬</p>
    </div>

    <button onClick="getElements();">犬・猫だけを表示</button>

    <script>
      function getElements() {
        let elements = document
          .getElementById("other")
          .getElementsByTagName("p");
        for (let i = 0; i < elements.length; i++) {
          console.log("Text: " + elements.item(i).textContent);
        }
      }
    </script>
  </body>
</html>

犬・猫だけ表示ができました〜

class属性の値を指定して要素ノードを取得(getElementsByClassName)

getElementsByClassName メソッドは、要素の class 属性の値を指定して一致する要素ノードをすべて取得する。

document.getElementsByClassName(classnames)
  • 引数には class 属性の値を DOMString オブジェクトで指定
  • 複数の class 属性の値を指定することができ、指定した値のいずれかに一致する要素ノードをすべて取得
  • 複数しているする場合は空白文字で区切る（'classname1, classname2'）
  • 戻り値は HTMLCollection オブジェクト(lengthメソッドやインデックスを指定しtえ要素を取得することができる)
  • 同じ class 属性の値をを持つ要素ノードは、 HTML ページの中で記述された順番にインデックスが割り当てられる
  • 指定したclass属性の要素ノードがない場合はnullではなくlengthが0のHTMLCollection オブジェクトが返ってくる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>getElementsByClassNameの練習</title>
</style>
</head>
<body>

<p>[適当な日記]</p>

<div class="content">
  <p>今日はこんな場所に行きました〜</p>
  <p class="content">行き先1：公園</p>
  <p class="content">行き先2：スーパー</p>
</div>

<button onClick="getElements();">要素を取得</button>

<script>
function getElements(){
    let elements = document.getElementsByClassName('content');
    // 取得した値を使ってやりたい処理を書く
</script>
</body>
</html>

ボタンを押すと以下の要素が取得できる

<div class="content">
  <p>今日はこんな場所に行きました〜</p>
  <p class="content">行き先1：公園</p>
  <p class="content">行き先2：スーパー</p>
</div>

<p class=<200b>"content"><200b>行き先1：公園<200b></p><200b>

<p class=<200b>"content"><200b>行き先2：スーパー<200b></p><200b>

name属性の値を指定して要素ノードを取得(getElementsByName)

getElementsByName メソッドは、要素の name 属性の値を指定して一致する要素ノードをすべて取得する。

document.getElementsByName(name)
  • 引数には name 属性の値を DOMString オブジェクトで指定
  • 戻り値は NodeList オブジェクト NodeList オブジェクトは複数の要素ノードの集合
  • NodeList オブジェクトでは length プロパティと item メソッドが使える
  • 同じ name 属性の値を持つ要素ノードは、 HTML ページの中で記述された順番にインデックスが割り当てられていく
  • 要素が見つからない場合、 length が 0 の NodeList オブジェクトを返す
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>getElementsByNameの練習</title>
  </head>
  <body>
    <p>メニュー</p>

    <label><input type="radio" name="food" value="Coffee" />coffee</label>
    <label><input type="radio" name="food" value="Cake" checked />Cake</label>
    <label><input type="radio" name="food" value="Tea" />Tea</label>

    <button onClick="getElements();">要素を取得</button>

    <script>
      function getElements() {
        let elements = document.getElementsByName("food");
        console.log(elements);
        for (let i = 0; i < elements.length; i++) {
          if (elements.item(i).checked) {
            console.log(elements.item(i).value + " is checked");
          } else {
            console.log(elements.item(i).value + " is not checked");
          }
        }
      }
    </script>
  </body>
</html>

このようにnameを指定して対象の要素ノードを操作できる。

CSSセレクタ形式の条件に一致する要素ノードを取得(querySelector, querySelectorAll)

querySelectorメソッド・querySelectorAllメソッドはCSSのセレクタ形式で条件を指定して一致する要素を取得できる。

document.querySelector(selectors)
  • 引数には CSS セレクタ形式の値を DOMString オブジェクトで指定
  • 戻り値は Element オブジェクト
  • querySelector メソッドは単一の要素ノードを返す（複数の要素が条件に一致した場合は最初の要素ノードが返される）
  • 見つからなかった場合は null
document.querySelectorAll(selectors)
  • 戻り値は Element が 1 つまたは複数含まれる NodeList オブジェクト
  • 条件に一致したすべてのノードを返す
  • 見つからなかった場合は length が 0 の NodeList オブジェクトを返す（ length プロパティと item メソッドが使える）

CSSセレクタの種類と指定方法

CSS(Cascading Style Sheet) セレクタは、 HTMLページに対してスタイルをどの要素に設定するのかを指定する時に使用する。

全要素を対象とする(*) - すべての要素ノードを対象とする場合は * と記述 - HTML全体を指定する

let elements = document.querySelectorAll('*');

タグ名を指定する div p hタグなどを指定する場合は、タグ名をそのまま記述。

let elements = document.querySelectorAll('p');

pタグを全て取得する

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>getElementsByNameの練習</title>
  </head>
  <body>
    <h2>メニュー</h2>
    <p>要素1</p>
    <p>要素2</p>
    <p>要素3</p>

    <button onClick="getElements();">要素を取得</button>
    <script>
      function getElements() {
        let result = document.querySelectorAll("p");
        console.log(result); // NodeList(3) [p, p, p]
        console.log(result[0]); //  <p>要素1</p>
        console.log(result[1]); //  <p>要素2</p>
        console.log(result[2]); // <p>要素3</p>
      }
    </script>
  </body>
</html>

id属性の値を指定(#id) 要素に設定された id 属性の値を指定する場合は、#値 と記述する

  <body>
    <h2>メニュー</h2>
    <div id="content">
      <p>ここを取得</p>
    </div>

    <div>
      <p>ここは取得しない</p>
    </div>

    <button onClick="getElements();">要素を取得</button>
    <script>
      function getElements() {
        let result = document.querySelectorAll("#content");
        console.log(result); // NodeList [div#content]  <p>ここを取得</p>の要素が取得できる
      }
    </script>
  </body>

class属性の値を指定(.class) 要素に設定された class 属性の値を指定する場合

  <body>
    <h2>メニュー</h2>
    <div class="my_class">
      <p>ここを取得</p>
    </div>

    <div>
      <p>ここは取得しない</p>
    </div>

    <button onClick="getElements();">要素を取得</button>
    <script>
      function getElements() {
        let result = document.querySelectorAll(".my_class");
        console.log(result); // NodeList [div.my_class]
      }
    </script>
  </body>

複数のセレクタのいずれかに一致する(A B C) セレクタをカンマ(,)で区切って記述することで、複数のセレクタの少なくともいずれか一つに一致する要素ノードを取得できる。

以下の例では、class属性がmy_class2・id属性がmy_idいずれかに該当する要素を取得しています。

  <body>
    <h2>メニュー</h2>
    <div id="my_id">
      <p>ここを取得</p>
    </div>

    <div>
      <p class="my_class">ここは取得しない</p>
    </div>

    <button onClick="getElements();">要素を取得</button>
    <script>
      function getElements() {
        let result = document.querySelectorAll("#my_id, .my_class");
        console.log(result); // NodeList(2) [div#my_id, p.my_class]
      }
    </script>
  </body>

Aのセレクタに一致する要素の子孫要素の中でBのセレクタに一致する(A B) セレクタを空白で区切ることで、最初に一致した要素の子孫要素の中で、さらに要素を指定して選択することができる。

  <body>
    <div id="main">
      <p class="greeting">こんにちは</p>
      <div>
        <p class="other">元気です</p>
      </div>
    </div>

    <button onClick="getElements();">要素を取得</button>
    <script>
      function getElements() {
        let result = document.querySelectorAll("#main .greeting");
        console.log(result); // NodeList [p.greeting]
      }
    </script>
  </body>

このようにid属性のmainの中のclass属性greetingだけを取得できている。

Aのセレクタに一致する要素の子要素の中でBのセレクタに一致する(A > B) セレクタを > で区切って記述することで、最初のセレクタに一致する要素の子要素の中で、次に記述したセレクタに一致する要素ノードを取得する。

  • 空白で区切った場合は子および孫要素が対象となったが > で区切った場合は子要素だけが対象
  </head>
  <body>
    <div id="main">
      <p class="greeting">こんにちは</p>
      <div>
        <p class="greeting">こんばんは</p>
      </div>
    </div>

    <button onClick="getElements();">要素を取得</button>
    <script>
      function getElements() {
        let result = document.querySelectorAll("#main > p");
        console.log(result); // NodeList [p.greeting]　こんにちはだけ取得できた
      }
    </script>
  </body>

Aのセレクタに一致する要素の中で属性値Bを持つ要素に一致する(A[B])

  <body>
    <div>
      <p style="font-size: 10px">こんにちは</p>
    </div>

    <div>
      <p class="other">その他</p>
    </div>

    <button onClick="getElements();">要素を取得</button>
    <script>
      function getElements() {
        let result = document.querySelectorAll("p[style]");
        console.log(result); // NodeList [p]　こんにちはだけ取得できた
      }
    </script>
  </body>

ノードの子・親・兄弟ノードを取得

  • HTML ページに含まれるノードは階層構造になっていてそれその親・兄弟・子ノードを取得したい時がある
  • これらのノードは Node オブジェクトで用意されている各種プロパティを参照することで取得できる
  • このプロパティは参照専用
  • 戻り値はNodeList オブジェクト（NodeList オブジェクトは複数のノードの集合。 length プロパティ・item メソッドが使える）
すべての子ノードを取得

getElementById メソッドや querySelector メソッドなどを使って要素ノードを取得したあと、 Node オブジェクトの childNodes プロパティを参照することで、このノードの 1 つ下の階層にある子ノードをすべて取得することができる

  • HTML 文の記述の仕方によっては空白ノードが含まれる

使い方

node.childNodes

  <body>
    <div id="element">
      <p>要素1</p>
      <p>要素2</p>
    </div>

    <button onClick="getElements();">要素を取得</button>
    <script>
      function getElements() {
        let result = document.getElementById("element");
        console.log(result.childNodes); // NodeList(5) [text, p, text, p, text]が取得できる
        console.log(result.childNodes[1]); // <p>要素1</p>が取得できる
        console.log(result.childNodes[3]); // <p>要素2</p>が取得できる
      }
    </script>
  </body>

最初の子ノードと最後の子ノードを取得

node.firstChild
  • firstChildプロパティを参照することで、このノードの 1 つ下の階層にある子ノードの中の最初のノードを取得することができる(参照専用)
  • 戻り値はNode オブジェクト
node.lastChild
  • lastChild プロパティを参照することで、このノードの 1 つ下の階層にある子ノードの中の最後のノードを取得できる

同じ階層の次のノードと前のノードを取得

node.nextSibling
  • nextSibling プロパティを参照することで、このノードと同じ階層にある次のノードを取得できる
  • 戻り値はNode オブジェクトでない場合はnull返る
node.previousSibling
  • previousSibling プロパティを参照することで、このノードと同じ階層にある一つ前のノードを取得できる（参照専用）
  • 戻り値はNode オブジェクト

親ノードを取得する

node.parentNode

parentNode プロパティを参照することで、このノードの親ノードを取得できる。

  <body>
    <div>
      <p>要素1</p>
      <p id="test">要素2</p>
    </div>

    <button onClick="getElements();">要素を取得</button>
    <script>
      function getElements() {
        let result = document.getElementById("test");
        let parent = result.parentNode;

        while (parent) {
          console.log(parent.nodeName); // NodeList(5) [text, p, text, p, text]が取得できる
          parent = parent.parentNode;
        }
      }
    </script>
  </body>

id属性がtestの要素を取得して変数に格納、その変数に対してparentNodeで親ノードを取得。 それを繰り返し分の中で再度変数に入れ直すことで親の親の親と取得でき最終的に#documentまで取得できた。

実行結果

DIV
BODY
HTML
#document

ノードの種類を確認する

nodeType プロパティを参照するとノードの種類を確認することができる。

node.nodeType

戻り値はノードの種類を表す unsigned short 型の値（数字）が返ってくる。

 1 ELEMENT_NODE                 要素ノード
 2 ATTRIBUTE_NODE               属性ノード
 3 TEXT_NODE                    テキストノード
 4 CDATA_SECTION_NODE           CDATAセクション
 5 ENTITY_REFERENCE_NODE        実体参照
 6 ENTITY_NODE                  実体宣言
 7 PROCESSING_INSTRUCTION_NODE  処理命令
 8 COMMENT_NODE                 コメントノード
 9 DOCUMENT_NODE                ドキュメント
10 DOCUMENT_TYPE_NODE           ドキュメントタイプ
11 DOCUMENT_FRAGMENT_NODE       ドキュメントの断片
12 NOTATION_NODE                記法
    <p>今日は外でランチを食べました</p>

    <div id="blog">
      <p>朝から外出していたのでランチは外で頂きました。</p>
      <p>場所：港区南青山</p>
      <p>店名：リストランテ南青山</p>
    </div>

    <button onClick="getElements();">要素を取得</button>

    <script>
      function getElements() {
        let elements = document.getElementById("blog");
        let children = elements.childNodes;

        let len = children.length;
        for (let i = 0; i < len; i++) {
          console.log(children.item(i).nodeType);
        }
      }
    </script>
  </body>

// 3
// 1
// 3
// 1
// 3   このように取得できる。必要に応じてこれを活かして文字列に変換する

ノードの名前を取得

odeName プロパティを参照するとノードの名前を取得することができる。

node.nodeName

<!DOCTYPE html>
<html>
  <body>
    <p>This is a paragraph.</p>
    <h1>This is a heading.</h1>
  </body>
</html>

// ページ内の要素を取得
let paragraphElement = document.querySelector("p");
let headingElement = document.querySelector("h1");

// nodeNameプロパティを使用して要素の名前を取得
let paragraphName = paragraphElement.nodeName;
let headingName = headingElement.nodeName;

// 結果をコンソールに表示
console.log("段落要素の名前: " + paragraphName);
console.log("見出し要素の名前: " + headingName);

// 段落要素の名前: P
// 見出し要素の名前: H1

ノードの値を参照

Node オブジェクトの nodeValue プロパティを参照するとノードの値を取得することができる。

node.nodeValue

let paragraph = document.querySelector("p");
let textInsideParagraph = paragraph.firstChild.nodeValue;

console.log(textInsideParagraph);

// This is a paragraph.

let new = paragraph.firstChild.nodeValue = "新しいテキスト";
console.log(new);

// 新しいテキスト

ノードの値を設定

nodeValueプロパティは参照するだけではなく新しい値を設定することもできる。

node.nodeValue = 'value'

let paragraph = document.querySelector("p");
let textInsideParagraph = paragraph.firstChild.nodeValue;

console.log(textInsideParagraph);

// This is a paragraph.

let textInsideParagraph

ノード内のテキストを取得・設定(textContent)

textContentプロパティを参照すると、対象のノードに含まれるテキストを取得する。

node.textContent
  • 戻り値はテキストが連結された DOMString オブジェクト
<div>
  <p>要素1</p>
  <p>要素2</p>
</div>

これらをtextContentで取得すると要素1と要素2が取得できる。

新しいテキストを設定する また参照するだけでなく新しい値を設定できる。

node.textContent = 'value'
  • textContent プロパティに新しい文字列を設定するときに HTML で特別な意味を持つ文字はエスケープ処理されてから設定される
変換前： <p>サンプル</p>
変換後： &lt;p&gt;サンプル&lt;/p&gt;

要素内のレンダリングされたテキストを取得・設定(innerText)

  • innerText プロパティを参照すると、対象の要素のテキストを取得する 取得するテキストは対象の要素をブラウザで表示した時に表示されるテキストだけ
  • 要素に子や孫の要素が含まれる場合は、それらの要素のテキストも含めて取得
テキストを参照する

使い方

htmlElement.innerText
  • 戻り値はすべてのテキストが連結された DOMString オブジェクト
  • 空白ノードなどのようにブラウザでは表示されないものは取得しない

  • タグで改行が行わている場合は改行された状態でテキストを取得
<div>
  <p>サンプル1<br>サンプル2</p>
  <p>サンプル3</p>
</div>

これをinnerTextで取得すると以下のようになる。

サンプル1
サンプル2

サンプル3
新しいテキストを設定する

nnerText プロパティは参照するだけではなく新しい値を設定することができる。

htmlElement.innerText = 'value'

表示されているpタグの文字列をボタンを押して、新しい文字を設定して変化させる。

  <body>
    <div id="test">ここが変化するよ〜</div>
    <button onClick="textchage();">テキストが変わる魔法ボタン</button>

    <script>
      function textchage() {
        let element = document.getElementById("test");
        element.innerText = "ほら、変わった！";
      }
    </script>
  </body>

こんな感じで変化する

HTML文を参照する（innerHTML）

innerHTML プロパティを参照すると要素に含まれる HTML 文を取得することができる。

element.innerHTML
  • 戻り値は要素に含まれるHTMLが文字列で返ってくる
<div id="test">
  <p>サンプル1<br>サンプル2</p>
  <p>サンプル3</p>
</div>

let elements  = document.getElementById("test")
console.log("element.innerHTML")

上記のHTMLは以下のように取得できる

  <p>サンプル1<br>サンプル2</p>
  <p>サンプル3</p>

<div id="test">の要素の中身を取得するので、外側のdivタグは含まれない。取得した要素の内側にdivタグがあればもちろん含まれる。

新しいHTML文を設定する

innerHTML プロパティは参照するだけではなく新しい値を設定することもできる。

element.innerHTML = 'value'
  • 要素の innerHTML プロパティの値に新しい文字列を設定すると、対象の要素の子孫要素のノードがすべて削除されたあとに設定した HTML 文の値が追加される

実演

  <body>
    <div id="test">ここをh1タグの見出しに変えます</div>

    <button onClick="setTitle();">ここを押したら変わるよ</button>

    <script>
      function setTitle() {
        let element = document.getElementById("test");
        element.innerHTML = "<h1>でかい見出しになった！！</h1>";
      }
    </script>
  </body>

実行したらこんな感じ。文字だけでなくタグも変わっている。

要素自身も含めたHTML文を参照する(outerHTML)
  • outerHTML プロパティを参照すると要素と要素に含まれる HTML 文を取得できる
  • HTML 文は HTML ファイルに記述されている内容をそのまま取得
<div>
  <p>サンプル1<br>サンプル2</p>
  <p>サンプル3</p>
</div>

これをouterHTMLで取得すると以下のようになる。そのままになる。

<div>
  <p>サンプル1<br>サンプル2</p>
  <p>サンプル3</p>
</div>

要素の属性値を取得・設定(getAttribute,setAttribute)

属性値を取得

要素に設定された属性値は以下のようにプロパティ名として属性名を指定して参照することができる。

element.属性名

例

   let element = document.getElementById(test');
    console.log(element.children[0].href);
    console.log(element.children[1].className);
    console.log(element.children[1].title);
    console.log(element.children[1].href);
  • 属性名があるが値が設定されていない場合は空文字
  • 存在しない属性名を参照するとundefined
属性値を設定

属性名を表すプロパティに対して値を設定することで、属性値に新しい値を設定することができる。

element.属性名 = 'value'
  • 属性名に対して値が設定されていた場合は、新しく値が設定される
  • ない場合は新しく属性名に対して値が設定される
let element = document.getElementById('test');
element.class = 'test';
  • 引数には取得したい属性名を DOMString オブジェクトで指定
  • 戻り値は引数に指定した属性名の属性値を DOMString オブジェクトで返す
  • 定した属性が見つからなかった場合は空文字か null
  • getAttribute メソッドを使う時は引数に 'class' のように属性名をそのまま指定する
    let element = document.getElementById('shopinfo');
    console.log(element.children[0].getAttribute('href'));
    console.log(element.children[1].getAttribute('class'));
属性値を取得(getAttributeメソッド)

要素の属性名を取得するもう一つの方法としてgetAttributeメソッドがある。指定した属性名の属性値を取得する。

element.getAttribute(qualifiedName)
属性値を設定(setAttributeメソッド)

setAttribute メソッドは指定した属性名の属性値に新しい値を設定する。 - 第一引数に属性名 - 第二引数に属性値を指定 - 属性名に対して値が設定されていた場合は新しい属性値が設定される - 属性名に値が設定されていなかった場合は、新しく属性名に対して属性値が設定される 書き方

element.set Attribute(qualifiedName, value)

let element = document.getElementById(' test');
element.setAttribute('class', 'test'); // 新たにclass属性をtestとして設定

要素にせってされている属性を削除(removeAttribute)

emoveAttribute メソッドを使用することで要素に設定されている属性を削除することができる

書き方

element.removeAttribute(qualifiedName)

ノードを子ノードの中の先頭または最後に追加(prepend,append,appendChild)

ノードを子ノードの先頭に追加する(prepend)
parentnode.prepend(node[,node,...])

prepend メソッドはノードを子ノードの先頭に追加する。

  • 引数には追加する Node オブジェクトまたは DOMString オブジェクトを指定

例

    let child = document.createElement('p');
    child.prepend('テスト');

    let parentnode = document.getElementById('test');
    parentnode.prepend(child);

上記の例は新しくpタグを作成して先頭にテストという文字列を設定して変数に入れる。次にidのtestを取得し、そこの先頭に先ほど作った文字列を入れている。

ノードを子ノードの最後に追加する(append)

同じように最後にも追加ができる。

parentnode.append(node[,node,...])
ノードを子ノードの最後に追加する(appendChild)

appendChild メソッドはノードを子ノードの最後に追加する。

parentnode.appendChild(node)

ノードを子ノードの中の指定ノードの前または後ろに追加(before,insertBefore,after)

ノードを子ノードの中の指定ノードの前に追加する(before)

before メソッドはノードを子ノードの中の指定ノードの前に追加する。

childnode.before(node[,node,...])
  • 引数には追加する Node オブジェクトまたは DOMString オブジェクトを指定
  • 親ノードではなくノードを追加する基準となる指定ノードに対して実行する
let childnode = document.getElementById('test');
let child = document.createElement('li');
child.append('要素を前に追加');

childnode.before(child);
ノードを子ノードの中の指定ノードの前に追加する(insertBefore)

insertBefore メソッドはノードを子ノードの中の指定ノードの前に追加する。

parentnode.insertBefore(node, childnode)
  • 第一引数には追加するNodeオブジェクトを指定
  • 第二引数に指定したNodeオブジェクトの前に追加する
  <body>
    <ul id="list">
      <li id="test1">要素1</li>
      <li id="test2">要素2</li>
    </ul>
    <button onClick="getElement();">ノードを追加</button>

    <script>
      function getElement() {
        let child = document.createElement("li");
        child.append("追加する要素");

        let parentnode = document.getElementById("list");
        let childnode = document.getElementById("test2");
        parentnode.insertBefore(child, childnode);
      }
    </script>
  </body>

ノードを子ノードの中の指定ノードの後に追加する(after)
childnode.after(node[,node,...])
  • after メソッドはノードを子ノードの中の指定ノードの後に追加する
  • 複数のノードを指定した場合は、まとめて追加される
  <body>
    <ul id="list">
      <li id="test1">要素1</li>
      <li id="test2">要素2</li>
    </ul>
    <button onClick="getElement();">ノードを追加</button>

    <script>
      function getElement() {
        let child = document.createElement("li");
        child.append("追加する要素");

        let childnode = document.getElementById("test2");
        childnode.after(child);
      }
    </script>
  </body>

既存のノードを追加する
  • ノードの追加は新しく作成するだけでなく同じドキュメントに存在する既存のノードを新しく場所を指定して追加することができる
  • その場合、現在の親ノードから対象のノードは削除されて新しく指定した親ノードの子ノードに追加される
  <body>
    <ul id="list">
      <li id="test1">要素1</li>
      <li id="test2">要素2（これを要素4の後ろに追加する）</li>
    </ul>

    <ul id="list2">
      <li id="test3">要素3</li>
      <li id="test4">要素4</li>
    </ul>

    <button onClick="getElement();">ノードを追加</button>

    <script>
      function getElement() {
        let child = document.getElementById("test2");

        let childnode = document.getElementById("test4");
        childnode.after(child);
      }
    </script>
  </body>

ノードを別のノードに置換(replaceWith)

ノードを別のノードに置き換える(replaceWith)

childnode.replaceWith(node[,node,...])
  • replaceWith メソッドはノードを別のノードに置き換える
  • 複数のノードを指定した場合は、対象のノードを複数のノードと置き換える
  • 親ノードではなく置き換えるノードに対して実行する
  <body>
    <ul id="list">
      <li id="test1">要素1</li>
      <li id="test2">要素2（これを置き換える）</li>
    </ul>

    <button onClick="getElement();">ノードを追加</button>

    <script>
      function getElement() {
        let child = document.createElement("li");
        child.append("置き換わった！");

        let childnode = document.getElementById("test2");
        childnode.replaceWith(child);
      }
    </script>
  </body>

ノードを削除(remove, removeChild)

ノードを削除する(remove)
childnode.remove()
  • 対象のノードを削除する
let childnode = document.getElementById('removeId');

childnode.remove();
ノードを削除する(removeChild)
  • removeChild メソッドはノードを削除する
  • 第一引数に指定してNodeオブジェクトを削除する
    <script>
      function getElement() {
        let parentNode = document.getElementById("list");

        parentNode.removeChild(parentNode.lastElementChild);
      }
    </script>
  • 指定したHTML要素自身を削除するときはremoveメソッドを使う
  • 指定したHTML要素の子要素を削除するときはremoveChildメソッドを使う

HTMLを表す文字列からノードを作成し指定の位置に追加(insertAdjacentHTML)

insertAdjacentHTML メソッドを使用すると、引数に指定した文字列を HTML 文として解析し、 HTML 文から作成したノードを指定した位置に追加することができる。

element.insertAdjacentHTML(position, text)
  • 第二引数に指定した文字列をHTML文として、HTML文からノードを作成
  • 作成したノードを第一引数で指定した位置に追加する
第一引数にしていできる値
'beforebegin' element の前に追加
'afterbegin' element の子要素の先頭に追加
'beforeend' element の子要素の最後に追加
'afterend' element の後に追加
実例
  <body>
    <ul id="list">
      <li id="test1">要素1</li>
      <li id="test2">要素2</li>
    </ul>

    <button onClick="getElement();">ノードを追加</button>

    <script>
      function getElement() {
        let element = document.getElementById("list");

        element.insertAdjacentHTML("beforeend", "<li>追加されました！</li>");
      }
    </script>
  </body>

現在処理を実行しているscript要素を取得(currentScript)

currentScriptプロパティを参照すると現在実行している <script> 要素を取得する

  <body>
    <script>
      let element = document.currentScript;
      console.log(element);
    </script>
  </body>

これをブラウザで実行するscriptタグがコンソールに表示される。

    <script>
      let element = document.currentScript;
      console.log(element);
    </script>

以下のように取得したScriptタグに要素を追加するなどの操作が行える。

  <body>
    <script>
      let element = document.currentScript;
      element.insertAdjacentHTML("beforebegin", "<p>取得したScriptタグに要素を追加</p>");
    </script>
  </body>

ドキュメントにHTMLを表す文字列を書き込む(write)

document.write(string)
  • write メソッドは、ドキュメントに対して文字列を書き込む
  <body>
    <script>
      document.write("<p>書き込みました</p>");
    </script>
  </body>

実行するとブラウザに書き込みましたと表示される。

文字列の形式で HTML コードを書き込むことができるが、現在 HTML に関する仕様を定めている HTML Living standard ではこのメソッドの使用について推奨はしていない。

Document.currentScript プロパティと insertAdjacentHTML メソッドを組み合わせて代替するなどの方法がよさそう。