Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿


【js】「getElementById」 と「getElementsByClassName」 は紛らわしい??( ˙◊˙◞ )◞?

[16.11.29 : 間違い等訂正しました]




Idの方 ➜ Element

ClassNameの方 ➜ Elements




getElementById('' '')


HTML DOM getElementById() Method



An ID should be unique within a page. However, if more than one element with the specified ID exists, the getElementById() method returns the first element in the source code.









var x = document.getElementById("sample") ; = "red" ;




HTML DOM getElementsByClassName() Method



Definition and Usage

The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as a NodeList object.

The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.

Tip: You can use the length property of the NodeList object to determine the number of elements with a specified class name, then you can loop through all elements and extract the info you want.









var x = document.getElementsByClassName("sample") ;
x[0].style.backgroundColor = "red" ;








...ByIdの方/ 同じ結果を得る、もう一つの簡単な記述

さっきは...ById と...ByClassNameを比較するために同じ記述の仕方でした。




document.getElementById("sample").style.backgroundColor = "red" ;





This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Thanks!
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️