ホームページ > 記事 > ウェブフロントエンド > jsでdom要素を取得するにはどうすればよいですか? dom を通じて要素オブジェクトを検索して取得する js メソッド (コード例)

jsでdom要素を取得するにはどうすればよいですか? dom を通じて要素オブジェクトを検索して取得する js メソッド (コード例)

青灯夜游オリジナル: 2018-10-11 13:31:564447ブラウズ

js で dom 要素を取得するにはどうすればよいですか?この記事では、JS の DOM とは何か、また DOM を通じて要素を検索および取得する方法を理解できるように、JS を使用して DOM を通じて要素オブジェクトを検索および取得する方法を紹介します。困っている友人は参考にしていただければ幸いです。

まず、js の dom とは何なのかを簡単に理解しましょう。

dom: HTML DOM、Document Object Model の略。Web ページが読み込まれると、ブラウザはページのドキュメントオブジェクトモデルを作成します。

通常、JavaScript を通じて HTML 要素を操作する必要があります。これを行うには、まず要素を見つけて取得する必要があります。 JavaScript の dom を通じて要素オブジェクト を検索して取得するための 3 つの一般的なメソッドを紹介します:

1: getElementById()

getElementById() メソッド: ID によってノード要素を取得します。ページに同じ ID を持つ複数のノードオブジェクトが含まれる場合、最初のノードオブジェクトのみが返されます。

構文:

document.getElementById("元素的id");

コード例: id="box" ボックスをクリックすると、ポップアップウィンドウが表示され、id="box" ボックスの内容が表示されます。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div id="box" onclick="getValue()">我是测试代码</div>
		<script>
		function getValue(){
		  var x=document.getElementById("box")
		  alert(x.innerHTML)
		 }
		</script>
	</body>
</html>

レンダリング:

jsでdom要素を取得するにはどうすればよいですか? dom を通じて要素オブジェクトを検索して取得する js メソッド (コード例)

注: getElementById() 括弧の前に「#」を追加する必要はありません。これは、メソッドによって、括弧内の値は要素の ID です。このメソッドは DOM オブジェクトを返します。

2. タグ名で要素を検索して取得します: getElementsByTagName()

getElementsByTagName() メソッド: 要素のタグ名で要素のセットを検索して取得しますオブジェクト (存在するだけ取得)。指定されたタグ名を持つオブジェクトのコレクションを返します。

文法:

document.getElementsByClassName("元素的标签名");

コード例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Hello World!</p>

<div id="main">
     <p>The DOM is very useful.</p>
     <p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>

<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write(&#39;id 为 "main" 的 div 中的第一段文本是：&#39; + y[0].innerHTML);
</script>

</body>
</html>

効果の図:

jsでdom要素を取得するにはどうすればよいですか? dom を通じて要素オブジェクトを検索して取得する js メソッド (コード例)

3. クラスを通して。 (クラス) 要素の検索と取得: getElementsByClassName()

getElementsByClassName() メソッド: 指定されたクラス (class) 属性値を通じて要素を検索して取得し、クラス名の要素のコレクションを返します。オブジェクトの集合体とも言えます。

文法:

document.getElementsByClassName("元素的class");

コード例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div id="main">
			<p class="a">我是测试代码1</p>
			<p class="a">我是测试代码2</p>
		</div>
		<script>
			var x = document.getElementById("main");
			var y = x.getElementsByClassName("a");
			document.write(&#39;id 为 "main" 的 div 中的第一段文本是：&#39; + y[0].innerHTML);
		</script>
	</body>
</html>

レンダリング:

jsでdom要素を取得するにはどうすればよいですか? dom を通じて要素オブジェクトを検索して取得する js メソッド (コード例)

要約: 以上がこの記事です内容全体が皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、

JavaScript ビデオチュートリアルをご覧ください。

jsでdom要素を取得するにはどうすればよいですか? dom を通じて要素オブジェクトを検索して取得する js メソッド (コード例)

関連記事