JavaScript の基本チュートリアル: HTML 要素を取得する方法

IDでHTML要素を取得

document.getElementById()

例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>getElementById</title>	
</head>
<body>
	<h2><a href="www.php.cn">Javascript DOM</a></h2>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementById('sp');
		document.write(sum);
	</script>
</body>
</html>

スクリプトステートメントをheadタグに入れるとnullが出力されることに注意してください

次に、以下では、html 要素のコンテンツを取得する innerHTML を見ていきます

例を書いてみましょう:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementById("sp");
		alert(sum.innerHTML);
	</script>
</body>
</html>

このようにして、php 中国語 Web サイトを出力し、js コードを実行して、 php 中国の Web サイト

私たちも同じことをします。合計を再割り当てすることができます。コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementById("sp");
		sum.innerHTML="玩转javascript";
		alert(sum.innerHTML);
	</script>
</body>
</html>

友達、firebug デバッグページを開いて、ショートカットキー F12

を押してください。タグ名で HTML 要素を検索

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementsByTagName("p");
		document.write(sum);
	</script>
</body>
</html>

は配列コレクションを返します。次のコードを参照してください:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>

	<script type="text/javascript">
		var sum=document.getElementsByTagName("li");
		//alert(sum);  //返回一个数组集合
		//alert(sum.length);//返回数组数量
		//alert(sum[0]);  //返回HTMLLIElement  li的节点对象
		//alert(sum.item(0)); //同上，意义一样
		//alert(sum[0].tagName);  //返回第一个标签的名字
		alert(sum[0].innerHTML);  //显示第一个标签的内容
	</script>
</body>
</html>

次に、ボディノードオブジェクトを取得する方法を見てみましょう。ただし、HTML にはボディのペアが 1 つだけあり、2 番目のボディはありません。ボディのペア

コードは次のとおりです

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum=document.getElementsByTagName("body")[0];
		alert(sum);
	</script>
</body>
</html>

getElementsByName

同じ名前の要素を取得し、オブジェクト配列を返します

次のコード: 注意IE Fox と Google Chrome 違いは、Firefox と Google の両方がこれをサポートしていることです。name 属性は IE ブラウザーの div の属性ではないため、一般的に、IE はフォームで name を使用することが多いです

。

getElementsByClassName

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
		<div name="test">php 中文网</div>

	<script type="text/javascript">
		var sum=document.getElementsByName("test")[0];
		alert(sum);
	</script>
</body>
</html>

はオブジェクトを返します。コードの一部を見てみましょう:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
		<div name="test" class="dv">php 中文网</div>

	<script type="text/javascript">
		var sum=document.getElementsByClassName("dv");
		alert(sum);
	</script>
</body>
</html>

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>getElementById</title> </head> <body> <h2><a href="www.php.cn">Javascript DOM</a></h2> <p id="sp">php中文网</p> <script type="text/javascript"> var sum = document.getElementById('sp'); document.write(sum); </script> </body> </html>

提出するリセットコード

自動運転