URLクエリパラメータの解析とJavaScriptの基本的なDOM操作

1. URLからGETパラメータを抽出する

以下のJavaScript関数は、URLからGETパラメータを抽出し、キーと値のペアでJSONオブジェクトとして返します。


function extractQueryParams(url) {
    const params = {};
    const query = url.split('?')[1];
    if (query) {
        const pairs = query.split('&');
        for (const pair of pairs) {
            const [key, value] = pair.split('=');
            params[key] = decodeURIComponent(value || '');
        }
    }
    return params;
}

2. RegExp構築方法の違いとメールアドレスの正規表現

RegExp構築子とリテラル形式の主な違いは、エスケープ文字の扱いとパフォーマンスです。リテラル形式の方が効率的です。

メールアドレスの正規表現:


const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

3. ページ内の全てのチェックボックスを取得する


const inputs = document.getElementsByTagName('input');
const checkboxes = [];
for (let i = 0; i < inputs.length; i++) {
    if (inputs[i].type === 'checkbox') {
        checkboxes.push(inputs[i]);
    }
}

4. DOM操作: ノードの追加、削除、移動、複製、作成、検索

  • ノードの作成
    • document.createDocumentFragment(): DOMフラグメントを作成
    • document.createElement(tagName): 要素を作成
    • document.createTextNode(text): テキストノードを作成
  • ノードの操作
    • appendChild(node): 子ノードを追加
    • removeChild(node): 子ノードを削除
    • replaceChild(newNode, oldNode): 子ノードを置換
    • insertBefore(newNode, referenceNode): 既存の子ノードの前に新しい子ノードを挿入
  • ノードの検索
    • getElementsByTagName(tagName): タグ名で要素を取得
    • getElementsByName(name): 名前属性で要素を取得
    • getElementById(id): IDで要素を取得

5. 各リストアイテムのインデックスを表示する（クロージャ）


const ul = document.getElementById('test');
const lis = ul.getElementsByTagName('li');
for (let i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].onclick = (function(index) {
        return function() {
            alert(index);
        };
    })(i);
}

6. ノードのドラッグアンドドロップの実装

以下がドラッグアンドドロップの基本的なステップです：

  1. ドラッグ対象のノードにmousedown, mousemove, mouseupイベントをバインド
  2. mousedownイベントでドラッグ開始
  3. mousemoveイベントで現在の位置を更新
  4. mouseupイベントでドラッグ終了
  5. ブラウザの境界を考慮する

7. AMDとCMDの違い

  • AMDは依存モジュールを事前に読み込み、CMDは遅延読み込み
  • CMDは依存性を近接させる、AMDは依存性を前方に配置
  • CMDはAPIの役割を明確に分ける

8. ECMAScript 6 のクラスの定義


class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return `(${this.x}, ${this.y})`;
  }
}

9. call() と apply() の意味と違い

applyは配列形式の引数を受け取り、callは個別の引数を受け取ります。どちらもthisの値を変更します。

10. 配列とオブジェクトのネイティブメソッド

Arrayのメソッド:

  • concat(): 配列を結合
  • join(): 配列要素を文字列に結合
  • length: 配列の長さ
  • pop(): 最後の要素を削除して返す
  • push(): 配列に要素を追加
  • reverse(): 配列の順序を逆転
  • shift(): 最初の要素を削除して返す
  • slice(): 配列の一部を返す
  • sort(): 配列をソート
  • splice(): 配列の要素を挿入、削除、または置換
  • toLocaleString(): 配列をローカル文字列に変換
  • toString(): 配列を文字列に変換
  • unshift(): 配列の先頭に要素を追加

Objectのメソッド:

  • hasOwnProperty(): プロパティが直接持つかどうか
  • isPrototypeOf(): オブジェクトが別のオブジェクトのプロトタイプかどうか
  • propertyIsEnumerable(): プロパティが列挙可能かどうか
  • toLocaleString(): オブジェクトをローカル文字列に変換
  • toString(): オブジェクトを文字列に変換
  • valueOf(): オブジェクトの原始値を返す

11. JavaScriptのプロトタイプとプロトタイプチェーン

プロトタイプチェーンは、継承と共有プロパティのために使用されるオブジェクトの連鎖です。


function clone(proto) {
    function Dummy() {}
    Dummy.prototype = proto;
    Dummy.prototype.constructor = Dummy;
    return new Dummy();
}

function object(oldObj) {
    function F() {}
    F.prototype = oldObj;
    return new F();
}

const newObj = object(oldObj);

12. 非同期読み込みの方法

  • defer属性: IEのみサポート
  • async属性: スクリプトの非同期読み込み
  • スクリプトタグの動的生成とDOMへの挿入

document.writeとinnerHTMLの違い:

  • document.write: ページ全体を再描画
  • innerHTML: ページの一部を再描画

13. == と === の違い

==は型変換後に比較し、===は型変換なしで直接比較します。

タグ: javascript dom RegExp class prototype

10月18日 06:03 投稿

ホットタグ

©2026 異端開発室