LoginSignup
0
1
@ry0h3i

【JavaScript】DOM チートシート

Last updated at Posted at 2024-09-03

はじめに

以下の教材でJavaScriptのDOMについて勉強したので、勉強したことをチートシートとして残すことにしました

DOMの取得

ID名から取得

  • document.getElementById("ID名");
    指定したID名と一致する要素を取得
index.html
<div id="container"></div>
app.js
const container = document.getElementById("container");

クラス名から取得

  • document.getElementsByClassName("クラス名");
    指定したクラス名と一致する最初の要素を取得
index.html
<a class="link" href="https://www.google.co.jp/">リンク</a>
app.js
const link = document.getElementsByClassName("c-link");

タグ名から取得

  • document.getElementsByTagName("HTMLタグ名");
    指定したタグ名と一致する最初の要素を取得
index.html
<p class="para">ここにテキストが入ります</p>
app.js
const para = document.getElementsByTagName("p");

CSSセレクター名から取得

1つの要素を取得

  • document.querySelector("CSSセレクター名");
    指定したCSSセレクター名と一致する最初の要素を取得
index.html
<input type="submit" id="submit-btn" class="c-submit-btn">

ID名から取得する場合は、ID名の前に#を付ける

app.js
// ID名から取得
const submitBtn = document.querySelector("#submit-btn");

クラス名から取得する場合は、クラス名の前に.を付ける

app.js
// クラス名から取得
const submitBtn = document.querySelector(".c-submit-btn");

CSSの属性セレクターから取得する場合は、属性名と値を[]で囲む

app.js
const submitBtn = document.querySelector('input[type="submit"]');

全ての要素を取得

  • document.querySelectorAll("CSSセレクター名");
    指定したCSSセレクター名と一致する全ての要素を取得
index.html
<ul class="p-list">
    <li class="p-list__item c-item">リスト1</li>
    <li class="p-list__item c-item">リスト2</li>
    <li class="p-list__item c-item">リスト3</li>
</ul>
app.js
const items = document.querySelectorAll(".c-item");

for (item of items) {
    console.log(item);
}

// 出力結果
// <li class="p-list__item">リスト1</li>
// <li class="p-list__item">リスト2</li>
// <li class="p-list__item">リスト3</li>

DOMの操作

テキストの取得・操作

テキストの取得

  • Element.innerText;
    innerTextを使うと、ブラウザ上に表示されているテキストが取得される
  • Element.textContent;
    textContentを使うと、HTMLタグ内のテキストが取得される
  • Element.innerHTML;
    innerHTMLを使うと、HTMLタグ内のテキストがタグ込みで取得される
index.html
<p class="para">ここに<span style="display: none;">テキスト</span>が入ります。</p>
app.js
const para = document.querySelector(".para");

console.log(`innerText: ${para.innerText}`);
console.log(`textContent: ${para.textContent}`);
console.log(`innerHTML: ${para.innerHTML}`);

// 出力結果
// ここにが入ります。
// ここにテキストが入ります。
// ここに<span style="display: none;">テキスト</span>が入ります。

テキストの操作

  • Element.innerText = "代入するテキスト";
    改行は反映されるが、HTMLタグはブラウザ上にそのままテキストとして出力されてしまう
  • Element.textContent = "代入するテキスト";
    改行は反映されず、HTMLタグもブラウザ上にそのままテキストとして出力されてしまう
  • Element.innerHTML = "代入するテキスト";
    改行は反映されないが、HTMLタグの方はブラウザ上に反映される
index.html
<p class="para1"></p>
<p class="para2"></p>
<p class="para3"></p>
app.js
const para1 = document.querySelector(".para1");
const para2 = document.querySelector(".para2");
const para3 = document.querySelector(".para3");
        
const newText = "新しい<b>テキスト</b>\nが入ります。"
        
para1.innerText = newText;      
para2.textContent = newText;
para3.innerHTML = newText;

出力結果
innertext_textcontent_innerhtml.png

属性値の取得・操作

属性値の取得

index.html
<a href="https://www.google.co.jp/" class="link">リンク</a>
  • Element.属性名;
app.js
const link = document.querySelector(".link");

const href = link.href;

console.log(href); // https://www.google.co.jp/
  • Element.getAttribute("属性名");
app.js
const link = document.querySelector(".link");

const href = link.getAttribute("href");

console.log(href); // https://www.google.co.jp/

属性値の操作

index.html
<a href="https://www.google.co.jp/" class="link">リンク</a>
  • Element.属性名 = "代入する属性値";
app.js
const link = document.querySelector(".link");

link.href = "https://qiita.com/";
  • Element.setAttribute("属性名", "代入する属性値");
app.js
const link = document.querySelector(".link");

link.setAttribute("href", "https://qiita.com/");

スタイルの取得・操作

スタイルの取得

  • Element.style.CSSプロパティ名;
index.html
<p class="para">ここに<span style="color: red;">テキスト</span>が入ります。</p>
app.js
const coloredText = document.querySelector(".para span");

const colorValue = coloredText.style.color;

console.log(colorValue); // red

※1. 上記の書き方でCSSプロパティの値を取得できるのは、インラインスタイル（HTMLタグに直接スタイルを当てること）を使っている、もしくはJavaScriptからスタイルを設定している場合のみ
※2. font-sizeやbackground-colorのようにプロパティ名が2語以上の場合は、fontSizeやbackgroundColorのようにキャメルケースで書く

  • getComputedStyle(Element).CSSプロパティ名
index.html
<div class="box"></div>
style.css
.box {
    background-color: red;
    border: 2px solid black;
    height: 200px;
    width: 400px;
}
app.js
const box = document.querySelector(".box");

const boxStyle = getComputedStyle(box);

console.log(boxStyle.backgroundColor); // rgb(255, 0, 0)
console.log(boxStyle.border); // 2px solid rgb(0, 0, 0)
console.log(boxStyle.height); // 200px
console.log(boxStyle.width); // 400px

スタイルの操作

  • Element.style.CSSプロパティ名 = "代入する値";
index.html
<p class="para">ここに<span style="color: red;">テキスト</span>が入ります。</p>
app.js
const coloredText = document.querySelector(".para span");

coloredText.style.color = "purple";

※ font-sizeやwidthのように値に数字を用いるプロパティの場合でも、"16px"のように代入する値をクオーテーションで囲む
※ (2024/09/04修正) 代入する値が 数字+単位 の場合は、値をクオーテーションで囲む必要があるが、数字のみ（単位を必要としない）場合はクオーテーションで囲む必要はない

app.js
const para = document.querySelector(".para");

// 代入する値が 数字+単位
para.style.fontSize = "14px";
// 代入する値が 数字のみ
para.style.opacity = 0.7;

クラスの操作

クラスの追加

  • Element.classList.add("追加するクラス名");
index.html
<p class="para">ここにテキストが入ります</p>
app.js
const para = document.querySelector(".para");

para.classList.add("border");

console.log(para.getAttribute("class")); // para border

クラスの削除

  • Element.classList.remove("削除するクラス名");
index.html
<p class="para border">ここにテキストが入ります</p>
app.js
const para = document.querySelector(".para");

para.classList.remove("border");

console.log(para.getAttribute("class")); // para

クラスの付け外し

  • Element.classList.toggle("付け外しするクラス名");
index.html
<p class="para">ここにテキストが入ります</p>
app.js
const para = document.querySelector(".para");

para.classList.toggle("border");

console.log(para.getAttribute("class")); // para border
        
para.classList.toggle("border");
        
console.log(para.getAttribute("class")); // para

クラスが含まれているか判定

  • Element.classList.contains("判定するクラス名");
index.html
<p class="para">ここにテキストが入ります</p>
app.js
const para = document.querySelector(".para");

console.log(para.classList.contains("para")); // true

親・子・兄弟要素の取得

親要素の取得

  • Element.parentElement;

子要素の取得

  • Element.children;

兄弟要素の取得

  • Element.previousSibling;
  • Element.previousElementSibling;

※ previousElementSiblingは自分と同階層にある直前の要素を返してくれるが、previousSiblingの場合は、直前に改行や空白があればそれらを返す

  • Element.nextSibling;
  • Element.nextElementSibling;

※ nextElementSiblingは自分と同階層にある直前の要素を返してくれるが、nextSiblingの場合は、直前に改行や空白があればそれらを返す

index.html
<ul>
    <li><a>リスト1</a></li>
    <li class="myself"><a>リスト2</a></li>
    <li><a>リスト3</a></li>
</ul>
app.js
const myself = document.querySelector(".myself");

const parent = myself.parentElement;
const child = myself.children;
const prevSib = myself.previousSibling;
const prevElmSib = myself.previousElementSibling;
const nextSib = myself.nextSibling;
const nextElmSib = myself.nextElementSibling;

console.log(parent); // <ul>...</ul>
console.log(child[0]); // <a>リスト2</a>
console.log(prevSib); // #text
console.log(prevElmSib); // <li><a>リスト1</a></li>
console.log(nextSib); // #text
console.log(nextElmSib); // <li><a>リスト3</a></li>

(2024/09/04追記) 親要素の取得

  • Element.closest("CSSセレクター");
    指定したCSSセレクターと一致する祖先要素（自分自身を含む）を探索する
index.html
<nav class="p-nav">
    <ul class="p-nav__items">
        <li class="p-nav__item p-nav__item--one">リスト1</li>
        <li class="p-nav__item p-nav__item--two">
            <span class="myself">※</span>
            リスト2
        </li>
        <li class="p-nav__item p-nav__item--three">リスト3</li>
    </ul>
</nav>
app.js
const myself = document.querySelector(".myself");

console.log(myself.closest("li > span")); // <span class="myself">※</span>
console.log(myself.closest("li:has(span)")); // <li class="p-nav__item p-nav__item--two">...</li>
console.log(myself.closest(".p-nav")); // <nav class="p-nav">...</nav>

要素の追加・削除

子要素を追加

  • ParentElement.appendChild(追加する子要素);
    親要素の末尾（親要素の閉じタグの直前）に子要素を追加できる
index.html
<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>
app.js
const list = document.querySelector("ul");

const item = document.createElement("li");

item.textContent = "リスト4";

list.appendChild(item);

出力結果
appendchild.png

  • ParentElement.append(追加する子要素);
    親要素の末尾に子要素を追加できるが、appendChildとは違って一度に複数の要素を追加できたり、文字列を追加できたりする
index.html
<div class="container"></div>
app.js
const container = document.querySelector(".container");

const h1 = document.createElement("h1");
const img = document.createElement("img");

h1.textContent = "タイトルです。";
img.setAttribute("src", "画像URL");

container.append(h1, img, "ここにテキストが入ります。");

出力結果
append.png

兄弟要素を追加

  • Element.insertAdjacentElement("追加する場所", 追加する兄弟要素);

    追加する場所

    • beforebegin ... 基準となる要素の前
    • afterend ... 基準となる要素の後

    ※ この他にも、基準となる要素の開始タグ直後に要素を追加できるafterbeginや、基準となる要素の閉じタグ直前に要素を追加できるbeforeendというパラメータもある

index.html
<ul>
    <li class="myself">私はリストです。</li>
</ul>
app.js
const myself = document.querySelector(".myself");

const prevItem = document.createElement("li");
const nextItem = document.createElement("li");

prevItem.textContent = "直前のリストです。";
nextItem.textContent = "直後のリストです。";

myself.insertAdjacentElement("beforebegin", prevItem);
myself.insertAdjacentElement("afterend", nextItem);

出力結果
insertadjacentelement.png

  • Element.after(追加する兄弟要素);
    基準となる要素の直後に兄弟要素を追加できる
index.html
<ul>
    <li class="myself">私はリストです。</li>
</ul>
app.js
const myself = document.querySelector(".myself");

const nextItem = document.createElement("li");

nextItem.textContent = "直後のリストです。";

myself.after(nextItem);

出力結果
after.png

子要素を削除

  • ParentElement.removeChild(削除する子要素);
index.html
<ul>
    <li>リスト</li>
    <li class="myself">私は削除されます。</li>
    <li>リスト</li>
</ul>
app.js
const myself = document.querySelector(".myself");

const parent = myself.parentElement;

parent.removeChild(myself);

出力結果
removechild.png

  • ChildElement.remove();
index.html
<ul>
    <li>リスト</li>
    <li class="myself">私は削除されます。</li>
    <li>リスト</li>
</ul>
app.js
const myself = document.querySelector(".myself");

myself.remove();

出力結果
removechild.png

0
1
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1