要素に対応するJavaScriptオブジェクトを取得する4つの方法がHTMLで詳しく説明されています

目次

要素とタグ

特定の方法:

1つは、getElementById()メソッドです。

2つ目は、getElementsByClassName()メソッドです。

         3つ目は、getElementsByTagName()メソッドです。

         4、getElementsByName()メソッド


要素とタグ:

ラベル:<>のペアで囲まれたラベルの一般的な用語を指します。
要素:開始タグから終了タグまでのすべてのコードを参照します。要素には、タグよりも多くのコンテンツが含まれています。

 

特定の方法:

1つは、getElementById()メソッドです。

機能:idが指定されたコンテンツであるすべての要素を取得します。
コード例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="ttt">
			<span>郑州大学</span><i>河南大学</i>
		</div>
		<!--document-->
		
		<script>
			var element = document.getElementById("ttt");//获取HTML元素对应javaS对象
			console.log(element);
		</script>
	</body>
</html>

結果表示:

2つ目は、getElementsByClassName()メソッドです。

役割:クラス名が指定されたコンテンツであるすべての要素を取得します。
コード例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p class="z">黄河水</p>
		<p class="z">长江水</p>

		<!--document-->
		
		<script>
			var elements = document.getElementsByClassName("z");
			console.log(document.getElementsByClassName("z")[0]);
			for(var i in elements){
				console.log(element[i]);
			}
			console.log("######################");
			for(var i=0;i<elements.length;i++){
				console.log(elements[i]);
			}
		</script>
	</body>
</html>

結果表示:

3つ目は、getElementsByTagName()メソッドです。

役割:タグが指定されたコンテンツであるすべての要素を取得します。
コード例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p class="z">黄河水</p>
		<p class="z">长江水</p>
	
		<!--document-->
		<script>
			
			console.log("######################");
			elements = document.getElementsByTagName("p");
			for(var i=0;i<elements.length;i++){
				console.log(elements[i]);
			}
		</script>
	</body>
</html>

結果表示:

4、getElementsByName()メソッド

役割:name属性が指定されたコンテンツであるすべての要素を取得します。
コード例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" name="hobby" />足球<input type="checkbox" name="hobby" />篮球<input type="checkbox" name="hobby" />乒乓球
	
		<script>
			
			console.log("######################");
			elements = document.getElementsByName("hobby");
			for(var i=0;i<elements.length;i++){
				console.log(elements[i]);
			}
			
			function tttt(){
				var element = document.getElementById("user_name");
				console.log(element.value);
			}
			
		</script>
	</body>
</html>

結果表示:

 

おすすめ

転載: blog.csdn.net/m0_46383618/article/details/107431621