suchen

Heim >Web-Frontend >js-Tutorial >Umfassende Analyse von js-Selektoren

Umfassende Analyse von js-Selektoren

怪我咯
怪我咯Original
2017-04-01 09:13:491401Durchsuche

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"); ist der ID-Attributwert des abzurufenden Elements.

2.getElementsByName (Elemente über das Namensattribut abrufen)

Verwendung: document.getElementsByName("Name"); Name ist der Namensattributwert des abzurufenden Elements Geeignet zum Senden von Formulardaten. Wenn das Namensattribut festgelegt ist und das Element ein Formular, ein IMG, ein Iframe, ein Applet, eine Einbettung oder ein Objekt ist, wird im Dokumentobjekt automatisch ein Attribut erstellt, das nach dem Namensattributwert benannt ist. Sie können also über document.domName

3.getElementsByTagName (Elemente nach Elementnamen abrufen) referenzieren

Verwendung: document.getElementsByTagName(TagName); TagName ist der Tag-Name des Zu erhaltendes Element: Wenn TagName * ist, bedeutet dies, dass alle Elemente des Dokuments auch durch ein DOM-Element ersetzt werden können. Auf diese Weise kann jedoch nur die Teilmenge der Elemente hinter dem DOM-Element abgerufen werden.

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

Verwendung: document.getElementsByClassName(ClassName); Wenn Sie mehrere gleichzeitig erhalten möchten, trennen Sie diese 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 obige ist der detaillierte Inhalt vonUmfassende Analyse von js-Selektoren. 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：Boolesche Typen in JavaScript-Typen analysierenNächster Artikel：Boolesche Typen in JavaScript-Typen analysieren

In Verbindung stehende Artikel

Mehr sehen