Heim > Artikel > Web-Frontend > Umfassende Analyse von js-Selektoren für Sie (grundlegendes Tutorial)

Umfassende Analyse von js-Selektoren für Sie (grundlegendes Tutorial)

亚连Original: 2018-05-21 09:25:591323Durchsuche

Jetzt bringe ich Ihnen eine umfassende Analyse der JS-Selektoren. Lassen Sie mich es jetzt mit Ihnen teilen und es allen als Referenz geben.

Zu den nativen JS-Selektoren gehören getElementById, getElementsByName, getElementsByTagName und getElementsByClassName. Im Folgenden werde ich die Verwendung dieser vier Selektoren einzeln vorstellen.

1.getElementById (Element nach ID abrufen)

Verwendung: document.getElementById("Id"); Id ist der ID-Attributwert des abzurufenden Elements .

2.getElementsByName (Elemente nach Namensattribut abrufen)

Verwendung: document.getElementsByName("Name"); Name ist der Namensattributwert des zu verwendenden Elements erhalten, diese Methode eignet sich im Allgemeinen zum Senden von Formulardaten. Wenn das Namensattribut festgelegt ist, wenn das Element ein Formular, ein IFrame, ein Applet, eine Einbettung oder ein Objekt ist, wird automatisch ein Attribut erstellt, das nach dem Namensattributwert benannt ist Dokumentobjekt. Daher kann auf das entsprechende Dom-Objekt über document.domName

3.getElementsByTagName (Elemente nach Elementnamen abrufen)

Verwendung: document.getElementsByTagName(TagName); TagName ist Um den Tag-Namen eines Elements zu erhalten, bedeutet TagName *, dass alle Elemente abgerufen werden können. Das Dokument kann auch durch ein DOM-Element ersetzt werden, aber auf diese Weise können Sie nur die Teilmenge der Elemente hinter dem DOM-Element abrufen .

4.getElementsByClassName (Elemente über CSS-Klassen abrufen)

Verwendung: document.getElementsByClassName(ClassName); ist der CSS-Klassenname des abzurufenden Elements. Wenn Sie mehrere gleichzeitig abrufen möchten, trennen Sie sie durch Leerzeichen nach jeder CSS-Klasse. Beispielsweise ruft document.getElementsByClassName("class2 class1") Elemente der Stile class1 und class2 ab. Das Dokument kann auch durch ein DOM-Element ersetzt werden, sodass nur eine Teilmenge der Elemente hinter dem DOM-Element abgerufen werden kann.

<!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>

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Detaillierte Analyse des abstrakten JS-Fabrikmusters für Sie

Detaillierte Analyse der Entprellung und Drosselung von JS-Funktionen (Bild- und Text-Tutorial)

So gestalten Sie Ihren JS-Code besser und leichter lesbar (siehe ausführliche Einführung)

Das obige ist der detaillierte Inhalt vonUmfassende Analyse von js-Selektoren für Sie (grundlegendes Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Entwurfsmuster für umfangreiche JavaScript-Anwendungsarchitekturen (Fortgeschritten)Nächster Artikel：Entwurfsmuster für umfangreiche JavaScript-Anwendungsarchitekturen (Fortgeschritten)

In Verbindung stehende Artikel

Mehr sehen