web関連

【javascript】特定のclassのついた要素を取得する方法

2018/12/24

2019/04/02

【javascript】特定のclassのついた要素を取得する方法

javascriptの「getElementsByClassName()」を使って特定のclassを持った要素にcssを当てたかったけどうまくいかなかった時の備忘録

「getElementsByClassName()」を使って要素を取得する方法

bodyを非表示しようと思って書いたコード

<script>
// ×取得できない
document.getElementsByClassName("body").style.opacity = "0";

// ○取得できる(ループさせないとダメ)
var findClass = document.getElementsByClassName('body');
for(var i = 0; i < findClass.length; i++) {
findClass[i].style.opacity = "0";
}
</script>

「getElementsByClassName()」は「getElements」と複数形になっているように単体での取得はできず「body」のような1つしかないようなタグでも配列のような「HTMLCollection」という値で返すみたい
だから「for」文でループさせて中身を取り出す必要性があるみたい

↓その他のループさせて取り出すやつ

// タグ名を指定して取得(divとかbodyとか)
getElementsByTagName()

// name属性(inputとかについてるやつ)
getElementsByName()

// なんでも指定できるっぽい(tag、id、class、etc…)
querySelectorAll()
ってかbodyであれば↓の記述だけでループさせずに行けたわ
まぁ汎用性を考えたら…、ね
document.body.style.opacity = "0";

 

あ、「querySelector()」はループさせなくていいみたい

ちゃんと非表示できた

document.querySelector("body").style.opacity = "0";
「getElementById()」と「querySelector()」はループさせなくても大丈夫みたいっすね
 

wordpressとか使ってるとbodyタグってclassとかidとかたくさんついてるからあんまりいじりたくないので「document.body」使って指定しようと思う