Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

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

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

 

 備忘録を兼ねて。

【注意点】

Idの方 ➜ Element

ClassNameの方 ➜ Elements

 

 [via]W3Schools.com

 

getElementById('' '')

 

HTML DOM getElementById() Method

http://www.w3schools.com/jsref/met_document_getelementbyid.asp

 

...

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.

 

styntax

document.getElementById("elementID")

 

 

 

 

例1

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

 

getElementsByClassName("")

 

HTML DOM getElementsByClassName() Method

http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

 

 

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.

 

 

 

Styntax

document.getElementsByClassName("classname")

 

 

例)


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

 

[結果]

幾つかある、クラス名「sample」の、"一つ目"の背景色が赤に変わる。

 

 

 

 

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

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

ただ実は...ByIdの方はもっとシンプルな書き方があります。こちらの方がおそらく一般的だと思います。

 

 


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 Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️