简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  N Möglichkeiten, Elemente in JS und deren dynamische und statische Diskussionen zu erhalten

N Möglichkeiten, Elemente in JS und deren dynamische und statische Diskussionen zu erhalten

jacklove
jackloveOriginal
2018-05-21 14:09:271458Durchsuche

Beim Erlernen von JavaScript werden Sie auf das Problem stoßen, dass js Elemente erhält. In diesem Artikel wird die Methode zum Abrufen von Elementen erläutert.

Bei der eigentlichen Front-End-Entwicklungsarbeit stoßen wir häufig auf die Notwendigkeit, bestimmte Elemente abzurufen, um den Stil, den Inhalt usw. des Elements zu aktualisieren. Das Document Object Model (DOM) ist eine Programmierschnittstelle für HTML- und XML-Dokumente. Es bietet eine strukturierte Darstellung des Dokuments und definiert eine Möglichkeit, vom Programm aus auf die Struktur zuzugreifen und so die Struktur und den Stil des Dokuments und des Inhalts zu ändern. Das DOM analysiert ein Dokument in eine strukturierte Sammlung von Knoten und Objekten (Objekte, die Eigenschaften und Methoden enthalten), die Webseiten mit Skripten oder Programmiersprachen verbinden. Daher kann JavaScript Elementknoten über die DOM-API abrufen. Die Methoden lauten wie folgt: querySelector() und querySelectorAll() sind die ES5-Elementauswahlmethoden

1:

Empfängt ein Parameter: Die ID des abzurufenden Elements (Groß-/Kleinschreibung beachten, muss strikt übereinstimmen), gibt ein Elementobjekt zurück (kann auch als dynamische NodeList-Sammlung betrachtet werden, aber die Sammlung enthält nur ein übereinstimmendes Element, wird aber auch reflektiert Wenn das Element mit einer bestimmten ID im aktuellen Dokument nicht vorhanden ist, wird nul zurückgegeben.
Syntax:

element = document.getElementById(id);

Beispiel: Löschen

<body>
    <div id="myDiv">
        <p class="myP">hello world</p>
        <p class="myP">hello dolby</p>
        <p class="myP">hello dot</p>
        <p class="myP">hello bean</p>
    </div>
    <script>
        var div = document.getElementById("myDiv");        console.log(div); //(1)
        var body=document.querySelector(&#39;body&#39;);
        body.removeChild(div);        console.log(body); //(2)
    </script></body>
//(1)处打印值    <div id="myDiv">
        <p class="myP">hello world</p>
        <p class="myP">hello dolby</p>
        <p class="myP">hello dot</p>
        <p class="myP">hello bean</p>
    </div>//(2)处打印值<body>
    <script>
        var div = document.getElementById("myDiv");        console.log(div); //(1)
        var body=document.querySelector(&#39;body&#39;);
        body.removeChild(div);        console.log(body); //(2)
    </script></body>

Beispiel:

<!DOCTYPE html><html><head>
  <title>getElementById example</title>
  <script>
  function changeColor(newColor) {    var elem = document.getElementById("para1");
    elem.style.color = newColor;
  }  </script></head><body>
  <p id="para1">Some text here</p>
  <button onclick="changeColor(&#39;blue&#39;);">blue</button>
  <button onclick="changeColor(&#39;red&#39;);">red</button></body></html>

getElementById( )-Methode sucht nicht nach Elementen, die nicht im Dokument enthalten sind. Nachdem Sie ein Element erstellt und eine ID zugewiesen haben, müssen Sie insertBefore() oder andere ähnliche Methoden verwenden, um das Element in das Dokument einzufügen, bevor Sie getElementById() verwenden können, um Folgendes zu erhalten: 

var element = document.createElement("div");
element.id = &#39;testqq&#39;;var el = document.getElementById(&#39;testqq&#39;); // el will be null!

getElementsByClassName():

Empfangt einen Parameter, bei dem es sich um eine Zeichenfolge handelt, die einen oder mehrere Klassennamen enthält (Klassennamen werden durch Leerzeichen getrennt), und gibt eine dynamische HTMLCollection-Sammlung zurück (man kann auch sagen, dass sie ein NodeList-ähnliches Array-Objekt zurückgibt). welches das aktuelle Element enthält Als Wurzelknoten alle untergeordneten Elemente mit angegebenen Klassennamen.
Syntax: 

var elements = document.getElementsByClassName(names); 
var elements = rootElement.getElementsByClassName(names);

getElementsByClassName kann für jedes Element aufgerufen werden, nicht nur für Dokumente. Das Element, das diese Methode aufruft, wird als Stammelement für diese Suche verwendet.
Beispiel:

Alle Elemente mit der Klasse „test“ abrufen:

document.getElementsByClassName('test');

Alle Elemente einschließlich der Klasse Elements abrufen von 'red' und 'test':

document.getElementsByClassName('red test');

Im untergeordneten Knoten des Elements mit der ID „main“ alle Elemente abrufen mit Klasse 'test':

document.getElementById('main').getElementsByClassName('test');

Beispiel: Löschen 

//html代码<div class="myDiv">
        <p class="myP">hello world</p>
        <p class="myP">hello dolby</p>
        <p class="myP">hello dot</p>
        <p class="myP">hello bean</p>
    </div>
//js代码一    <script>
        var div = document.getElementsByClassName("myDiv");        console.log(div); //(3)
        var p = document.getElementsByClassName("myP");        for (var i = 0; i < p.length; i++) {
            div[0].removeChild(p[i]);
        }        console.log(p); //(4)
    </script>

/ /Print value at (3)
[div.myDiv] //Eine dynamische HTMLCollection-Sammlung mit einer Länge von 1 und innerHTML von a94c063bc1661d92dd07e8b1741790f4hello dolby94b3e26ee717c64999d7867364b1b4a3, 6843c777c14b79e7fb9089b104e99125hello bean94b3e26ee717c64999d7867364b1b4a3, warum es keine anderen zwei p-Elemente gibt, wird später erklärt.

//Wert bei (4) drucken
[p.myP,p.myP] //Eine dynamische HTMLCollection-Sammlung mit einer Länge von 2 und innerHTML bzw. „hello dolby“ und „hello bean“.

Die obige Methode zum Löschen von Knoten hat überprüft, dass die Methode getElementsByClassName eine dynamische HTMLCollection-Sammlung zurückgibt.

⬆️Im obigen Code erhält zunächst div eine dynamische Sammlung bestehend aus Elementen mit dem Klassennamen „myDiv“ auf der Seite, p erhält eine dynamische Sammlung bestehend aus Elementen mit dem Klassennamen „myP“ auf der Seite , und verwendet dann eine for-Schleife, um jedes Element in der „myP“-Auflistung im ersten Element in der „myDiv“-Auflistung (d. h. dem einzigen div-Element im obigen Beispiel) zu löschen. Daher nur das erste und das dritte Elemente werden gelöscht. Aus diesem Grund?
Der Grund dafür ist, dass Änderungen in der DOM-Struktur in der dynamischen Sammlung automatisch in den gespeicherten Objekten widergespiegelt werden können. Zunächst wird p.legth=4, wenn i=0, das erste p-Element auf der Seite gelöscht und danach p.legth=4 .length= 3; Wenn i=1, wird das Element mit Index 1 in den verbleibenden drei p gelöscht, und wenn p.length=2 ist, ist die Bedingung von i09834a9b1177344ad1e8dc4556c8f2bc36cc49f0c466276486e50c850b7e4956

与getElementByClassName相同，返回动态集合，所以循环删除结果也相同

//(7)处打印值0bd60c3c81ecadce59a7dc90d0ee7fb616b28748ea4df4d9c2150843fecfba68//(8)处打印值[] //空的HTMLCollection集合，长度为0

4、getElementsByName()：

接收一个参数：带有给定name属性值的元素，返回一个动态NodeList类数组对象，对象中包含以当前元素为根节点，所有指定name属性值的子元素。最常用的场景是取得单选按钮。
示例：

<!DOCTYPE html><html lang="en"><head> ...</head><body>
<form name="up"><input type="text"></form><div name="down"><input type="text"></div>
<script>var up_forms = document.getElementsByName("up");console.log(up_forms[0].tagName); // returns "FORM"</script></body></html>

示例：删除

<body>
    <div id="myDiv">
        <input type="radio" name="fav-color">red        <input type="radio" name="fav-color">green        <input type="radio" name="fav-color">blue    </div>
    <script>
        var div = document.getElementById("myDiv");        console.log(div); //(9)
        var ipt_favCol = document.getElementsByName("fav-color");        for (var i = ipt_favCol.length; i--;) {
            div.removeChild(ipt_favCol[i]);
        }        console.log(ipt_favCol); //(10)
    </script></body>

getElementByName返回的是一个NodeList动态集合

//(9)处打印值0bd60c3c81ecadce59a7dc90d0ee7fb6"red""green""blue"16b28748ea4df4d9c2150843fecfba68//(10)处打印值[] //空的NodeList集合，长度为0

5、querySelector()：

接收一个参数：一个包含一个或多个CSS 选择器的字符串（多个选择器以逗号分隔），返回匹配指定CSS选择器的第一个元素节点（无法选中CSS伪元素），没有发现匹配的节点则返回null。
语法：

element = document.querySelector(selectors);

示例：一个强大的选择方式

<div class="user-panel main">   
 <input name="login"/> //这个标签将被返回</div><script>  
  var el = document.querySelector("div.user-panel.main input[name=login]");
</script>

示例：如果要匹配的ID或选择器不符合 CSS 语法（比如不恰当地使用了冒号或者空格），你必须用反斜杠将这些字符转义。由于 JavaScript 中，反斜杠是转义字符，所以当你输入一个文本串时，你必须将它转义两次（一次是为 JavaScript 字符串转义，另一次是为 querySelector 转义）：

<div id="foo\bar"></div><div id="foo:bar"></div><script>
  console.log(&#39;#foo\bar&#39;)               // "#fooar"
  document.querySelector(&#39;#foo\bar&#39;)    // 不匹配任何元素
  console.log(&#39;#foo\\bar&#39;)              // "#foo\bar"
  console.log(&#39;#foo\\\\bar&#39;)            // "#foo\\bar"
  document.querySelector(&#39;#foo\\\\bar&#39;) // 匹配第一个div
  document.querySelector(&#39;#foo:bar&#39;)    // 不匹配任何元素
  document.querySelector(&#39;#foo\\:bar&#39;)  // 匹配第二个div</script>

示例：删除

   <div id="myDiv">
        <p class="myP">hello world</p>
        <p class="myP">hello dolby</p>
        <p class="myP">hello dot</p>
        <p class="myP">hello bean</p>
    </div>
    <script>
        var div = document.getElementById("myDiv");        console.log(div); //(11)
        var p = document.querySelector("p");
        div.removeChild(p);        console.log(p); //(12)
    </script>
//(11)处打印值    <div id="myDiv">
        <p class="myP">hello dolby</p>
        <p class="myP">hello dot</p>
        <p class="myP">hello bean</p>
    </div>//(12)处打印值        <p class="myP">hello world</p> //如你所见，querySelector也是静态的快照

6、querySelectorAll()：

接收一个参数：一个包含一个或多个CSS 选择器的字符串（多个选择器以逗号分隔），返回静态NodeList对象集合，该集合中包含匹配指定CSS选择器的所有节点，元素节点的变化无法实时反映在结果中；如果参数中包含CSS伪元素则返回一个空的对象集合。
语法：

elementList = document.querySelectorAll(selectors);

示例：

var matches = document.querySelectorAll("div.note, div.alert");

示例：删除

   <div id="myDiv">
        <p class="myP">hello world</p>
        <p class="myP">hello dolby</p>
        <p class="myP">hello dot</p>
        <p class="myP">hello bean</p>
    </div>
    <script>
        var div = document.getElementById("myDiv");        console.log(div); //(13)
        var p = document.querySelectorAll("p");        for (var i = 0; i < p.length; i++) {
            div.removeChild(p[i]);
        }        console.log(p); //(14)
    </script>

//(13)处打印值
   0bd60c3c81ecadce59a7dc90d0ee7fb616b28748ea4df4d9c2150843fecfba68//(13)处打印值
   [p.myP,p.myP,p.myP,p.myP] //返回的是静态NodeList集合，元素节点的变化无法实时反映在结果中

7、elementFromPoint()：

接收两个参数：分别是相对于当前窗口左上角的横纵坐标，单位为CSS像素，不需要加单位；返回位于页面指定位置的元素，如果该元素不可返回（如滚动条）则返回它的父元素，如果坐标值无意义（如负值）则返回null。
语法

var element = document.elementFromPoint(x, y);

示例：

<!DOCTYPE html><html lang="en"><head><title>elementFromPoint example</title><script>function changeColor(newColor) {  elem = document.elementFromPoint(2, 2);  elem.style.color = newColor;}</script>
</head><body>
<p id="para1">Some text here</p><button onclick="changeColor(&#39;blue&#39;);">blue</button>
<button onclick="changeColor(&#39;red&#39;);">red</button></body></html>

这一个获取元素的方法用得不多所以不多做介绍。

是不是觉得看了上面这些头好大啊，什么是动态什么是静态，有没有好记一点的方法呢？
有哒！

你可以简单地理解为，getElementBy系列返回的都是动态的HTMLCollection集合，动态集合中的DOM结构变化能实时地反映到所保存的对象中，而querySelector系列返回的都是静态的NodeList对象，是一个快照，对DOM的任何操作都不会对其产生影响。

那么Nodelist和HTMLCollection有什么异同呢？

相同点：

二者都是类数组对象

二者都具有length属性

二者都具有item()方法

二者都是动态的元素集合，每次访问都需要重新对文档进行查询。

你一定会好奇，诶？前面不是说querySelector系列返回的都是静态的NodeList对象咩？怎么又变成动态的呢？原因在此：
规范中对 querySelectorAll 有明确要求，规定其必须返回一个静态的 NodeList 对象。
在Chrome中情况如下：

document.querySelectorAll(&#39;a&#39;).toString();    // return "[object NodeList]"document.getElementsByTagName(&#39;a&#39;).toString();    // return "[object HTMLCollection]"

不同点：

NodeList 对象会包含文档中的所有节点，如 Element、Text 和 Comment 等；HTMLCollection  对象只会包含文档中的 Element 节点

本篇对hs获取元素进行了详细的讲解，更多相关内容请关注php中文网。

相关推荐：

JavaScript全总结之DOM的Element

实现jquery懒加载、回到顶部

关于this的相关问题

Das obige ist der detaillierte Inhalt vonN Möglichkeiten, Elemente in JS und deren dynamische und statische Diskussionen zu erhalten. 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：Die Verwendung von Kombinationsmustern in Entwurfsmustern bei der JavaScript-Programmerstellung (fortgeschritten)Nächster Artikel：Die Verwendung von Kombinationsmustern in Entwurfsmustern bei der JavaScript-Programmerstellung (fortgeschritten)

In Verbindung stehende Artikel

Mehr sehen