Zusammenfassung von JS Dom und Veranstaltungen

Dieses Mal bringe ich Ihnen eine Zusammenfassung von JS Dom und Ereignissen. Was sind die Vorsichtsmaßnahmen ?

Was ist der Unterschied zwischen innerText und innerHTML des Dom-Objekts?

innerHTML bezieht sich auf den gesamten Inhalt von der Startposition bis zur Endposition des Objekts, einschließlich des Html-Tags .
innerText bezieht sich auf den Inhalt von der Startposition bis zur Endposition, entfernt jedoch das HTML-Tag.

Was ist der Unterschied zwischen elem.children und elem.childNodes?

Knoten (Knoten) ist der gebräuchliche Name für jeden Objekttyp in der DOM-Hierarchie. Es gibt viele Arten von Knoten, z. B. Elementknoten, Attributknoten, Textknoten, Kommentarknoten usw. Element erbt die Node-Klasse, was bedeutet, dass Element einer der vielen Node-Typen ist. Das heißt, wenn NodeType 1 ist, ist Node ElementNode und Element verfügt über Attribute wie ID, Klasse und Kinder . children ist ein Attribut von Element und childNodes ist ein Attribut von Node.

Wie viele gängige Methoden gibt es zum Abfragen von Elementen?

Es gibt drei gängige Möglichkeiten, Elemente zu erhalten, nämlich über die Element-ID, über den Tag-Namen und über den Klassennamen.
1.getElementById
DOM stellt eine Methode namens getElementById bereit, die ein Knotenobjekt zurückgibt, das dem id-Attribut entspricht.
2.getElementsByTagName
Diese Methode gibt ein Array von Objekten zurück (HTMLCollection um genau zu sein, es ist kein Array im eigentlichen Sinne). Jedes Objekt entspricht einem bestimmten Tag im Dokument. eines Elements. Ähnlich wie getElementById stellt diese Methode nur einen Parameter bereit, und sein Parameter ist der Name des angegebenen Tags.
3.getElementsByClassName
Zusätzlich zum Abrufen von Elementen über angegebene Tags stellt DOM auch die Methode getElementsByClassName bereit, um Elemente mit angegebenen Klassennamen abzurufen.

Wie erstelle ich ein Element? Wie lege ich Attribute auf Elemente fest?

1.createElement(name) erstellt einen Elementknoten
createElement() ist eine Methode im Document-Objekt. Diese Methode gibt ein Elementobjekt basierend auf dem angegebenen Elementnamen zurück.
2. Legen Sie die Attribute des erstellten Elementknotens fest.
Nach dem Erstellen des Elements müssen wir möglicherweise die Elementattribute festlegen, z. B. CSS-Stile für das Element festlegen, Klickereignisse hinzufügen usw. Um Elementattribute festzulegen, können Sie die setAttribute-Methode des Element-Objekts verwenden oder den Attributnamen zum Festlegen verwenden.
3. Fügen Sie den Elementknoten an der angegebenen Position des DOM-Dokuments ein.
Nachdem das Element erstellt wurde, müssen Sie den Elementknoten an der angegebenen Position des DOM-Dokuments einfügen ()-Methode oder insertBefore()-Methode des Element-Objekts. Die Methode appendChild()
dient dazu, dem Element einen neuen untergeordneten Knoten hinzuzufügen, und der hinzugefügte untergeordnete Knoten ist sein letzter untergeordneter Knoten. Die Methode insertBefore() wird verwendet, um einen neuen Knoten vor dem vorhandenen Knoten einzufügen, und der hinzugefügte Knoten ist ein Geschwisterknoten.

Elemente hinzufügen oder löschen? Hinzufügen von

-Elementen: Verwenden Sie createElement, um Elemente hinzuzufügen.
Elemente löschen: Wenn Sie ein HTML-Element löschen müssen, müssen Sie zuerst das übergeordnete Element des Elements abrufen und dann mit „removeChild“ das entsprechende Element löschen.

Was ist der Unterschied zwischen DOM0-Ereignissen und DOM2-Ereignissen bei der Verwendung von Event Listening?

DOM0-Ereignis: DOM0-Ereignis bezieht sich auf die direkte Bindung des Ereignisses an den Knoten. Ein Knoten kann nur ein Ereignis binden, andernfalls verdeckt das Grau auf der Rückseite die Vorderseite.
var oBtn = document.querySelctor('#btn');
oBtn.onclick=function(){
console.log('a')
};
DOM2-Ereignis: DOM2 Level-Ereignisse können mehrere Ereignisse an ein Element binden, und nachfolgende Ereignisse überschreiben vorherige Ereignisse nicht. Sie können die Parameter true und false verwenden, um das Ereignis so festzulegen, dass es in der Bubbling-Phase oder Capture-Phase ausgelöst wird. Verwenden Sie „removeEventListener“, um Ereignisse zu entfernen.
oBtn.addEventListener("click",function(){
});
oBtn.removeEventListener("click",fn,false);

Was ist der Unterschied zwischen attachmentEvent und addEventListener?

1. Kompatibilitätsprobleme zwischen addEventListener und attachmentEvent
addEventListener ist eine Ereignisbindungsmethode, die den W3C-Spezifikationen entspricht. FireFox, Chrome und Safari verwenden sie alle zum Binden von Ereignissen.
attachEvent ist privat für den IE und entspricht nicht den W3C-Spezifikationen. Darüber hinaus kann es unter IE nur zum Binden von Ereignissen verwendet werden, und addEventListener ist ungültig.
Wenn Sie also Ereignisse binden möchten, müssen Sie sich mit Kompatibilitätsproblemen auseinandersetzen.
2. Grammatikregeln für addEventListener und attachmentEvent
addEventListener hat 3 Parameter: element.addEventListener(type,listener,useCapture)
attachEvent hat 2 Parameter: element.attachEvent(type,listener);
3 . Code-Kompatibilitätsverarbeitung
function regEvent(ele, event_name, fun)
{
if (window.attachEvent)
ele.attachEvent(event_name, fun); //IE-Browsing-Gerät
else
{
event_name = event_name.replace(/^on/, „“); //Wenn es mit on beginnt, löschen Sie on, z. B. onclick->click
ele . addEventListener (event_name, fun, false); // Nicht-IE-Browser

IE-Ereignis-Bubbling: Das Ereignis tritt auf dem auslösenden Element auf und wird Ebene für Ebene an das übergeordnete Element bis zum HTML-Element übergeben.
DOM2-Ereignis: Die Ereignisausbreitung ist in drei Phasen unterteilt: die Erfassungsphase, die Ereigniszielphase und die Blasenphase. Der Ereignis-Listener kann nur wählen, ob er in der Erfassungsphase oder der Bubbling-Phase ausgeführt werden soll.
Erfassungsphase: Wenn ein Ereignis auftritt, beginnt es am Wurzelknoten und sucht Ebene für Ebene nach unten, um das Zielelement zu kennen.
Bubbling-Phase: Ausgehend vom auslösenden Element wird das Ereignis Ebene für Ebene an das übergeordnete Element bis zum HTML-Element übergeben

Wie kann verhindert werden, dass das Ereignis sprudelt? Wie kann ein Standardereignis verhindert werden?

Verhindern Sie das Sprudeln von Ereignissen: Die Methode von w3c ist e.stopPropagation() und der IE verwendet e.cancelBubble = true.
Standardereignisse verhindern: Die Methode von w3c ist e.preventDefault() und IE verwendet e.returnValue = false.

Fragen und Antworten

Es gibt den folgenden Code, der erfordert, dass die Konsole den Textinhalt jedes Elements li anzeigt, wenn auf das Element li geklickt wird. Nicht kompatibel mit

 <ul class="ct">
      <li>这里是</li>
      <li>饥人谷</li>
      <li>前端6班</li>
  </ul>
  <script>
  //todo ...
  </script>

Code:

<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
//方法一
/*var item = document.getElementsByClassName("ct")[0].getElementsByTagName(&#39;li&#39;)
for(var i=0;i<item.length;i++){
item[i].addEventListener(&#39;click&#39;, function(){
console.log(this.innerText);
})
} */
//方法二
var item = document.getElementsByTagName(&#39;li&#39;)
for(var i=0;i<item.length;i++){
item[i].addEventListener(&#39;click&#39;, function(){
console.log(this.innerText);
})
}
</script>

Abschlusscode, Anforderungen:

1 Wenn Sie auf die Schaltfläche klicken, fügen Sie sie am Anfang hinzu von 89466c42c59958e763530a2065431577-Element hinzugefügt. Der Inhalt ist eine nicht leere Zeichenfolge, die vom Benutzer eingegeben wird. Wenn das Ende zum Hinzufügen angeklickt wird, wird der Benutzer nach bed06894275b65c1ab86501b08a632eb hinzugefügt ;li>Front End Class 6bed06894275b65c1ab86501b08a632eb 🎜>Die nicht leere Eingabezeichenfolge.2. Wenn auf jedes Element li geklickt wird, zeigt die Konsole den Textinhalt des Elements an.

<ul class="ct">
<li>这里是</li>
<li>555</li>
<li>666</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//todo ...
</script>

Code:

<ul class="ct">
<li>这里是</li>
<li>666</li>
<li>555</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>

<script>var ct = document.querySelector(&#39;.ct&#39;)var start = document.getElementById(&#39;btn-add-start&#39;);var end = document.getElementById(&#39;btn-add-end&#39;);var input = document.querySelector(".ipt-add-content");
     end.addEventListener(&#39;click&#39;,function(){            var list = document.createElement(&#39;li&#39;);        list.innerText = input.value        ct.appendChild(list);      })      start.addEventListener(&#39;click&#39;,function(){            var list = document.createElement(&#39;li&#39;);        list.innerText = input.value        ct.insertBefore(list,ct.firstChild);      })      ct.addEventListener(&#39;click&#39;, function(e){          if(e.target.tagName.toLowerCase() === &#39;li&#39;){           console.log(e.target.innerText);          }      });     </script>

Vervollständigen Sie den Code, Voraussetzung: Wenn die Maus auf dem li-Element platziert wird, wird es angezeigt img-preview Das Bild, das dem data-img des aktuellen li-Elements entspricht.

 <ul class="ct">
      <li data-img="1.png">鼠标放置查看图片1</li>
      <li data-img="2.png">鼠标放置查看图片2</li>
      <li data-img="3.png">鼠标放置查看图片3</li>
  </ul>
  <div class="img-preview"></div>
  <script>
  //todo ...
  </script>

Code:

<ul class="ct"><li data-img="http://img5.imgtn.bdimg.com/it/u=3425851328,2681317699&fm=21&gp=0.jpg">鼠标放置查看图片1</li><li data-img="http://pic24.nipic.com/20121003/10754047_140022530392_2.jpg">鼠标放置查看图片2</li><li data-img="http://img2.3lian.com/img2007/4/22/303952037bk.jpg">鼠标放置查看图片3</li></ul><div class="img-preview"></div><script>var ct = document.querySelector(&#39;.ct&#39;)var list = document.getElementsByTagName(&#39;li&#39;)var preview = document.querySelector(&#39;.img-preview&#39;)for(var i=0;i<list.length;i++){list[i].addEventListener(&#39;mouseover&#39;,function(){if(document.querySelector(&#39;img&#39;)){preview.removeChild(document.querySelector(&#39;img&#39;))console.log(1)}var item = document.createElement(&#39;img&#39;)var img = this.getAttribute(&#39;data-img&#39;)preview.appendChild(item)item.src=img;
    })      }    </script>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie Python, um die Bildähnlichkeit zu bestimmen

Javascript-Skript wird zum Herunterladen von Bildern verwendet

Das obige ist der detaillierte Inhalt vonZusammenfassung von JS Dom und Veranstaltungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!