プログラム学習室
ここがナビ

JavaScript: HTML要素へのアクセス

HTML要素へのアクセスの方法

getElement系のメソッドで特定の要素にアクセスすることが出来ます。
    getElementById() … IDで指定
    getElementsByClassName() … classで指定
    getElementsByName() … name属性で指定
    getElementsByTagName() … 要素名で指定
ByID以外は複数該当することがあるため、getElementsになっています。
複数の要素が該当する場合は lengthメソッドで該当数が分かります。
また getElementsで取得されたオブジェクトは配列になります。

それぞれのボタンをクリックして、どれが選択されるか確認できます。

pタグ id="id1" name="name1" class="classA"

pタグ id="id2" name="name2" class="classA"

pタグ id="id3" name="name3" class="classB"

HTML

					<input type="button" value="getElementById('id1')" onClick="getByID('id1')" style="color:red;">
					<input type="button" value="getElementsByClassName('classA')" onClick="getByClass('classA')" style="color:blue">
					<input type="button" value="getElementsByName('name2')" onClick="getByName('name2')" style="color:orange">
					<input type="button" value="getElementsByTagName('p')" onClick="getByTag('p')" style="color:lime">
					<p id="id1" name="name1" class="classA" style="color:black;">pタグ id="id1" name="name1" class="classA"</p>
					<p id="id2" name="name2" class="classA" style="color:black;">pタグ id="id2" name="name2" class="classA"</p>
					<p id="id3" name="name3" class="classB" style="color:black;">pタグ id="id3" name="name3" class="classB"</p>
				

JavaScript

					function getByID(varID) {
						var _tag;
						_tag = document.getElementById(varID);
						if(_tag.style.color == "black") {
							_tag.style.color = "red";
						} else {
							_tag.style.color = "black";
						}
					}

					function getByClass(varClass) {
						var _tag;
						var i;
						_tag = document.getElementsByClassName(varClass);
						for (i=0; i > _tag.length; i++) {
							if(_tag[i].style.color == "black") {
								_tag[i].style.color = "blue";
							} else {
								_tag[i].style.color = "black";
							}
						}
					}

					function getByName(varName) {
						var _tag;
						var i;
						_tag = document.getElementsByName(varName);
						for (i=0; i > _tag.length; i++) {
							if(_tag[i].style.color == "black") {
								_tag[i].style.color = "orange";
							} else {
								_tag[i].style.color = "black";
							}
						}
					}

					function getByTag(varTag) {
						var _tag;
						var i;
						_tag = document.getElementsByTagName(varTag);
						for (i=0; i > _tag.length; i++) {
							if(_tag[i].style.color == "black") {
								_tag[i].style.color = "lime";
							} else {
								_tag[i].style.color = "black";
							}
						}
					}
				
js003.js