ロジコヤ

15. DOMの基本 3

オンライン教材 > JavaScript超入門

Element作成の基本

DOMにElementを追加するには、Documentオブジェクトのメソッドを利用します。

createElement()

createElement() は、動的にElementを作成するメソッドです。

var element = document.createElement(HTMLタグ名)

appendChild()

appendChild() は、親要素にElementを追加するメソッドです。

親要素.appendChild(element)

removeChild()

removeChild() は、親要素から Elementを削除するメソッドです。

親要素.removeChild(element)

setAttribute()

setAttribute() はプロパティに値を設定するメソッドです。

Element.setAttribute(プロパティ名, 値)

プロパティに代入

setAttribute() を利用しなくても、Elementオブジェクトのプロパティに値を直接代入もできます。

Element.プロパティ名 = 値

Element作成

ファイル構成

/basic
├── css/
│      └── cafe_site.css
├── js/
│      └── cafe_site.js
└── cafe_site.html

cafe_site.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cafe JS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="css/cafe_site.css">
</head>

<body class="relative flex items-center justify-center min-h-screen overflow-hidden bg-black">
    <!-- 背景画像のコンテナ (imgタグを使った背景) -->
    <img id="background-image" class="absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-1000" />

    <!-- 背景画像のフィルター -->
    <div class="absolute inset-0 bg-black bg-opacity-50"></div>

    <!-- アニメーションテキスト -->
    <div class="text-center relative z-10">
        <h1 id="copy" class="text-3xl font-bold text-white tracking-widest"></h1>
    </div>

    <!-- 外部JavaScriptファイルの読み込み -->
    <script src="js/cafe_site.js" defer></script>
</body>

</html>

js/cafe_site.js

// キャッチコピーの文字
var message = "心ほどける、甘くて香ばしいブレイクタイム";
// 背景画像の配列
const images = [
    'images/cafe-shop-1.jpg',
    'images/cafe-shop-2.jpg',
    'images/cafe-shop-3.jpg',
];
// 画像の指定インデックス
var imageIndex = 0;
// アニメーションテキストのディレイ時間
const animationTextDelay = 200;
// 背景画像のフェードイン時間
const fadeInTime = 1000;
// 背景画像の切り替え時間
const backgroundSwitchTime = 8000;

// キャッチコピーのElement
const copyElement = document.getElementById('copy');
// 背景画像のElement
const backgroundImage = document.getElementById('background-image');

/**
 * animationText()
 * アニメーションテキスト
 */
function animationText(text) {
    var index = 0;
    function displayNextChar() {

    }
    displayNextChar();
}

/**
 * switchBackground()
 * 背景画像のスライドショー
 */
function switchBackground() {
    // 背景画像のインデックス更新
    imageIndex = (imageIndex + 1) % images.length;
}

// テキストアニメーションを開始
animationText(message);

css/cafe_site.css

/* カスタムフェードインアニメーション */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 1s ease-in-out;
}

親要素と事前データ

あらかじめ、キャッチコピー表示と背景画像用の親要素を用意しています。

js/cafe_site.js

// キャッチコピーのElement
const copyElement = document.getElementById('copy');

// 背景画像のElement
const backgroundImage = document.getElementById('background-image');

データ

キャッチコピーの文字と背景画像の配列も用意しています。

// キャッチコピーの文字
var message = "心ほどける、甘くて香ばしいブレイクタイム";

// 背景画像の配列
const images = [
    'images/cafe-shop-1.jpg',
    'images/cafe-shop-2.jpg',
    'images/cafe-shop-3.jpg',
];

子要素の作成と追加

子要素の作成

displayNextChar() で spanタグ作成します。

js/cafe_site.js

function animationText(text) {
    var index = 0;
    function displayNextChar() {
        // spanタグ作成
        const span = document.createElement('span');
    }
    displayNextChar();
}

文字設定

キャッチコピーの文字を設定し、フェードインのクラスも追加します。

js/cafe_site.js

function animationText(text) {
    var index = 0;
    function displayNextChar() {
        const span = document.createElement('span');
        // キャッチコピーの文字を設定
        span.textContent = text;
        // フェードインクラス追加
        span.classList.add('fade-in');
    }
    displayNextChar();
}

親要素に追加

親要素copyElementに、span を追加します。

js/cafe_site.js

function animationText(text) {
    var index = 0;
    function displayNextChar() {
        const span = document.createElement('span');
        span.textContent = text;
        span.classList.add('fade-in');
        // 親要素に span を追加
        copyElement.appendChild(span);
    }
    displayNextChar();
}

ブラウザ確認

ブラウザに文字が表示されるか確認します。

タイプライターテキスト

タイプライターテキストは、１文字ずつ時間をずらして表示することで実現できます。

現在の文字を指定

index を使って現在の文字を指定します。

js/cafe_site.js

function animationText(text) {
    var index = 0;
    function displayNextChar() {
        const span = document.createElement('span');
        // index を使って現在の文字を指定
        span.textContent = text[index];
        span.classList.add('fade-in');
        copyElement.appendChild(span);
    }
    displayNextChar();
}

文字表示の継続

setTimeout() を使って、最後の文字になるまで displayNextChar() 継続します。

js/cafe_site.js

function animationText(text) {
    var index = 0;
    function displayNextChar() {
        const span = document.createElement('span');
        span.textContent = text[index];
        span.classList.add('fade-in');
        copyElement.appendChild(span);

        index++;
        // 文字が最後かチェック
        if (index < text.length) {
            // 最後の文字になるまで displayNextChar() 継続
            setTimeout(displayNextChar, animationTextDelay);
        } else {

        }
    }
    displayNextChar();
}

バックグラウンドイメージ

imgタグ作成

Imageオブジェクトを作成し、srcプロパティーに現在の画像パスを設定します。現在の画像は、images にインデックスを指定します。

js/cafe_site.js

function switchBackground() {
    // 背景画像のインデックス更新
    imageIndex = (imageIndex + 1) % images.length;

    // Imageオブジェクト作成
    const image = document.createElement('img');

    // 現在の画像パスを設定
    image.src = images[imageIndex];
}

onloadイベント

Imageオブジェクトの onloadイベントで、画像読み込み完了後の処理を実装します。style.opacity を setTimeout() で実行することで、フェードイン＆フェードアウトができます。

js/cafe_site.js

function switchBackground() {
    imageIndex = (imageIndex + 1) % images.length;
    const image = document.createElement('img');
    image.src = images[imageIndex];

    // 画像読み込み完了後の処理
    image.onload = () => {
        // フェードアウト
        backgroundImage.style.opacity = 0;

        // フェードインで画像表示
        setTimeout(() => {
            // imgタグのsrcを更新
            backgroundImage.src = images[imageIndex];
            // フェードイン
            backgroundImage.style.opacity = 1;
        }, fadeInTime);
    };
}

バックグラウンドイメージ切り替え

animationText() で最後の文字になったら、switchBackground() を実行します。

js/cafe_site.js

function animationText(text) {
    var index = 0;
    function displayNextChar() {
        const span = document.createElement('span');
        span.textContent = text[index];
        span.classList.add('fade-in');
        copyElement.appendChild(span);

        index++;
        // 文字が最後かチェック
        if (index < text.length) {
            setTimeout(displayNextChar, animationTextDelay);
        } else {
            // バックグラウンドイメージ切り替え
            switchBackground();
            // スライドショー
            setInterval(switchBackground, backgroundSwitchTime);
        }
    }
    displayNextChar();
}

ソース

js/cafe_site.js

// 画像の指定インデックス
var imageIndex = 0;
// アニメーションテキストのディレイ時間
const animationTextDelay = 200;
// 背景画像のフェードイン時間
const fadeInTime = 1000;
// 背景画像の切り替え時間
const backgroundSwitchTime = 8000;

// キャッチコピーの文字
var message = "心ほどける、甘くて香ばしいブレイクタイム";

// 背景画像の配列
const images = [
    'images/cafe-shop-1.jpg',
    'images/cafe-shop-2.jpg',
    'images/cafe-shop-3.jpg',
];

// キャッチコピーのElement
const copyElement = document.getElementById('copy');
// 背景画像のElement
const backgroundImage = document.getElementById('background-image');

/**
 * animationText()
 * アニメーションテキスト
 */
function animationText(text) {
    var index = 0;
    function displayNextChar() {
        const span = document.createElement('span');
        // span.textContent = text;
        span.textContent = text[index];
        span.classList.add('fade-in');
        copyElement.appendChild(span);

        index++;
        if (index < text.length) {
            setTimeout(displayNextChar, animationTextDelay);
        } else {
            // 初回背景画像切り替え
            switchBackground();
            // 背景画像スライドショー
            setInterval(switchBackground, backgroundSwitchTime);
        }
    }
    displayNextChar();
}

/**
 * switchBackground()
 * 背景画像のスライドショー
 */
function switchBackground() {
    // 背景画像のインデックス更新
    imageIndex = (imageIndex + 1) % images.length;

    // Imageオブジェクト作成
    // const image = new Image();
    const image = document.createElement('img');

    // 画像のパスを設定
    image.src = images[imageIndex];

    // 画像がロードされたら実行
    image.onload = () => {
        // フェードアウト
        backgroundImage.style.opacity = 0;

        // フェードインで画像表示
        setTimeout(() => {
            // imgタグのsrcを更新
            backgroundImage.src = images[imageIndex];
            // フェードイン
            backgroundImage.style.opacity = 1;
        }, fadeInTime);
    };
}

// テキストアニメーションを開始
animationText(message);

<< 配列の操作

連想配列 >>

JavaScript超入門

Lesson 01 JavaScriptとは
Lesson 02 はじめてのJavaScript
Lesson 03 JSファイルの実行
Lesson 04 演算
Lesson 05 変数と定数
Lesson 06 関数
Lesson 07 条件分岐
Lesson 08 繰り返し 1
Lesson 09 DOMの基本 1
Lesson 10 DOMの基本 2
Lesson 11 イベントの基本
Lesson 12 日付処理
Lesson 13 配列の基本
Lesson 14 配列の操作
Lesson 15 DOMの基本 3
Lesson 16 連想配列
Lesson 17 多次元配列
Lesson 18 繰り返し 2
Lesson 19 繰り返し 3
Lesson 20 CSSのコントロール
Lesson 21 thisキーワード
Lesson 22 ユーザ定義オブジェクト
Lesson 23 クラス操作
Lesson 24 クエリセレクタ
Lesson 25 イベントリスナー
Lesson 26 正規表現
Lesson 27 非同期処理1
Lesson 28 非同期処理2
Lesson 29 郵便番号検索
Lesson 30 Canvas