ホームページ > 記事 > ウェブフロントエンド > 従来の方法を使用して HTML 内の DOM 要素を取得する方法
従来の方法を使用して HTML 内の DOM 要素を取得する方法
- autoloadオリジナル
- 2021-04-07 14:44:151955ブラウズ
JS の DOM は JavaScript 学習の重要な部分です。# の習得 # #DOM 要素 は、HTML と JS の間の重要な架け橋です。この記事では、# # を取得する従来の方法について説明します。 #DOM 要素。 #1.getElementById() メソッド
指定された ID を持つ最初のオブジェクトへの参照を返します<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="list" onclick="getValue()>
<li class="item">item1</li>
<li class="item">item2</li>
<li class="item">item3</li>
<li class="item">item4</li>
<li class="item">item5</li>
</ul>
</body>
</html><script>
function getValue()
{
var x=document.getElementById("id")
alert(x.innerHTML)
}
</script>
</script>
2.getElementsByName() メソッド
指定された名前を持つオブジェクトのコレクションを返します。 <!DOCTYPE html>
<html>
<body>
<ul >
<li class="item" name="item">item1</li>
<li class="item" name="item">item2</li>
<li class="item" name="item">item3</li>
<li class="item" name="item">item4</li>
<li class="item" name="item">item5</li>
</ul>
</body>
</html><script>
var x=document.getElementsByName("item");
alert(x.length);
</script>
指定されたタグ名を持つオブジェクトのコレクションを返します。
<!DOCTYPE html>
<html>
<body>
<ul >
<li >item1</li>
<li >item2</li>
<li >item3</li>
<li >item4</li>
<li >item5</li>
</ul>
</body>
</html><script>
var x=document.getElementsByTagName("li");
alert(x.length);
</script>推奨: 「2021 js 面接の質問と回答 (大要約)」
以上が従来の方法を使用して HTML 内の DOM 要素を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。