sai_dive IL

学んだことのアウトプットブログ

【JavaScript】DOM操作

DOM操作

idで要素の取得
let 変数 = document.getElementById('id名');

タグ名で要素の取得
let 変数 = document.getElementsByTagName('タグ名');

name属性で要素の取得
let 変数 = document.getElementsByName(’name名');

クラス名で要素の取得
let 変数 = document.getElementsByClassName('クラス名');

セレクタで要素の取得(最初の一つのみ)
let 変数 = document.querySelector('セレクタ名');

セレクタで要素の取得(複数)
let 変数 = document.querySelectorAll('セレクタ名');

コンテンツの取得
変数.textContent;

コンテンツの置換
変数.textContent = '置換の値';

コンテンツの入力値を取得
変数.value;

コンテンツの属性値を取得
変数.getAttribute('属性名');

クラス属性を追加、更新
変数.setAttribute('class', '追加するクラス名');

クラス属性の削除
変数.removeAttribute('class');

要素の追加
変数.appendChild(追加したい要素);

要素の削除
変数.removeChild(削除したい要素);