【JavaScript】よく使うDOM操作について厳選してまとめました

document.getElementById('banner')
//HTMLのID属性でbannerと指定されている要素を取得します

const allImages = document.getElementsByTagName('img')
//imgタグで囲まれている全ての要素を取得します

document.querySelector('img')
document.querySelector('img:nth-of-type(2)')
//imgタグの要素を取得します
//Allを付けない場合、最初に見つかった値が返されます

document.querySelector('.container')
//containerクラスを取得します

document.querySelector('＃container')
//containerIDを取得します

document.querySelector('a[title="まりも"]')
//aタグのtitleがまりもに指定されている要素を取得します

document.querySelectorAll('a')[1]
//aタグの2個目(インデックスで1個目)の要素を取ることもできます。

document.querySelector('h1').innnerHTML = '<i>AAA<i>'
//querySelectorでh1の要素を取得して、AAAの斜体文字にしています。

const h1 = document.querySelector('h1')

h1.style.color = 'green'
h1.style.fontsize= '3em'
h1.style.border= '2px solid blue'
//style.CSSのプロパティのようにして追加します

const h1 = document.querySelector('h1')

h1.classList.add('pink')
//h1にpinkクラスを割り当てることができます。

h1.classList.add('blue')
//pinkクラスが適用されたうえで、更にblueクラスを追加することもできます。

h1.classList.remove('pink')
//pinkクラスを外すこともできます

h1.classList.toggle('pink')
//toggleを使うことで、「pinkクラス付与」⇒[pinkクラス取り外し」が容易にできます

<div id="test">
    <div id="parent">
        <div id="child"></div>
    </div>
</div>

const child = document.getElementById("child");

console.log(child.parentElement);
//HTML内で指定しているchildの親要素、parentを取得します。

 <div id="parent">
      <div id="child1"></div>
      <div id="child2"></div>
      <div id="child3"></div>
  </div>

const parent = document.getElementById("parent");

console.log(parent.child);
//HTML内で指定しているparentの子要素、child1~3を取得します。

const image = document.createElement('img')
//imgタグを新しく作ります。

image.src= 'https://〇〇〇'
//作成したimageにsrcを挿入して画像を設定します。

const p = document.querySelector('p')

p.append('あいうえお')
//pタグにあいうえおと追加できます

img.before('h2')
//img要素の前にh2を追加します。

h1.after('h2')
//h1要素の後ろにh2を追加します。

const img = document.querySelector('img')
img.remove()