ホームページ > 記事 > ウェブフロントエンド > JS セレクターの包括的な分析 (基本チュートリアル)
JS セレクターの包括的な分析 (基本チュートリアル)
- 亚连オリジナル
- 2018-05-21 09:25:591323ブラウズ
ここで、js セレクターの包括的な分析をお届けします。今からそれを皆さんと共有し、皆さんの参考にしてください。
ネイティブ JS セレクターには、getElementById、getElementsByName、getElementsByTagName、getElementsByClassName の 4 つがあります。以下では、これら 4 つのセレクターの使用法を 1 つずつ紹介します。
1.getElementById(IDで要素を取得)
使い方: document.getElementById("Id"); Idは取得する要素のid属性値です。
2.getElementsByName (name 属性による要素の取得)
Usage: document.getElementsByName("Name"); Name は、取得する要素の name 属性値です。このメソッドは、一般に、フォーム データを送信する場合に適しています。要素は form 、 img 、 iframe 、 applet 、 embed 、 object です。 name 属性を設定すると、 name 属性値に基づいて名前が付けられた属性が Document オブジェクトに自動的に作成されます。したがって、 document.domName
3.getElementsByTagName (要素名で要素を取得) を通じて、対応する dom オブジェクトを参照できます
使用法: document.getElementsByTagName(TagName) は、取得する要素のタグ名です。 TagName は * すべての要素を取得するという意味の場合、ドキュメントを DOM 要素に置き換えることもできますが、この方法では DOM 要素の後ろにある要素のサブセットしか取得できません。
4.getElementsByClassName (CSS クラスを介して要素を取得する)
使用法: document.getElementsByClassName(ClassName); で複数の要素を取得する場合は、ClassName は要素の CSS クラス名です。同時に、各 CSS ではクラスがスペースで区切られます。 たとえば、 document.getElementsByClassName("class2 class1") は、class1 および class2 スタイルの要素を取得します。そのため、DOM 要素の背後にある要素のサブセットのみを取得できるように、ドキュメントを DOM 要素に置き換えることもできます。
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<p>我是通过标签获取</p>
<p id="box">我是通过id获取</p>
<p class="box1">我是通过class获取</p>
<form action="" name="box2">
我是通过name获取
</form>
</body>
<script type="text/javascript">
var p = document.getElementsByTagName("p");
var box = document.getElementById("box");
var box1 = document.getElementsByClassName("box1");
var box2 = document.getElementsByName("box2");
</script>
</html>
以上、皆様の参考になれば幸いです。
関連記事:
JS 関数のデバウンスとスロットリングの詳細分析 (グラフィック チュートリアル)
JS コードをより美しくする方法読みやすいです 読んでください（詳しい紹介をご覧ください）
以上がJS セレクターの包括的な分析 (基本チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。