JS fügt DOM-Knoten hinzu, löscht, ändert und überprüft sie-js-Tutorial-php.cn

JS fügt DOM-Knoten hinzu, löscht, ändert und überprüft sie

php中世界最好的语言

Freigeben： 2018-05-30 09:23:51

Original

3029 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen zum Hinzufügen, Löschen, Ändern und Überprüfen von DOM-Knoten mit JS vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

DOM bedeutet: DOM ist das Document Object Model, eine Reihe von API-Schnittstellen, die auf der Browserprogrammierung basieren und ein vom W3C herausgegebener Standard sind Wenn die Webseite geladen wird, erstellt der Browser das Dokumentobjektmodell der Seite:

Gemäß dem HTML-DOM-Standard des W3C ist der gesamte Inhalt eines HTML-Dokuments ein Knoten:

1. Das gesamte Dokument ist ein Dokumentknoten . 2. Jedes

HTML-Element

3 Der Text innerhalb des HTML-Elements ist ein Attributknoten.
5. Daher behandelt das HTML-DOM das HTML-Dokument als Baumstruktur. Über ihn kann auf alle Knoten im Knotenbaum zugegriffen werden JS.

1. Knoten anhängen

Einen Elementknoten erstellen >2,

Knoten anhängen

var op = document.createElement("p");//创建一个p元素，因为是document对象的方法。
var opText = document.createTextNode("666");//创建一个文本节点内容是“666”，因为是document对象的方法。
op.appendChild(opText);//父级.appendChild(子节点);在p元素中添加“666”
document.body.appendChild(op);//父级.appendChild(子节点);;document.body是指向<body>元素
document.documentElement.appendChild(createNode);//父级.appendChild(子节点);;document.documentElement是指向<html>元素

Nach dem Login kopieren

2. Knoten einfügen

createElement（标签名）1 Eine Möglichkeit, Knoten einzufügen, und Sie können auch bereits vorhandene Elemente hinzufügen. Die vorhandenen Elemente werden von der ursprünglichen Position an die neue Position verschoben.
2 und appendChild（节点） sind Referenzknoten, was bedeutet, dass ein Knoten vorne eingefügt wird des b-Knotens. >
3. Knoten löschen und entfernen createTextNode（节点文本内容）

1 , der entfernte Knoten ist immer noch im Dokument, aber seine Position ist nicht mehr im Dokument 4. Ersetzen Sie den Knoten

, das zum Ersetzen von Knoten verwendet wird, akzeptiert zwei Parameter, der erste Parameter ist der einzufügende Knoten und der zweite Parameter ist der zu ersetzende Knoten appendChild（节点）
5 insertBefore（a,b）1.

childNodes

enthält untergeordnete Knoten von Textknoten und Elementknoten. A, untergeordnete Knoten können auch untergeordnete Knoten erhalten Knoten und sind mit verschiedenen Browsern kompatibel, einschließlich IE6-8

B, removeChild(节点)parentNode

: Holen Sie sich den übergeordneten Knoten

var op = document.createElement("p");//创建一个p元素，因为是document对象的方法。
var op1 = document.getElementById("p1");
document.body.insertBefore(op,op1);//在op1节点前插入新创建的元素节点
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

Nach dem Login kopieren

3, A , firstChild ;

firstElementChildreplaceChild(插入的节点，被替换的节点) findet den ersten untergeordneten Knoten. Es liegt ein

Browserkompatibilitätsproblem

vor: firstChild ist IE-kompatibel, firstElementChild ist nicht IE-kompatibel.

var removeChild = document.body.removeChild(p1);//移除document对象的方法p1

Nach dem Login kopieren

B, lastChild ;

lastElementChild

findet den letzten untergeordneten Knoten. Es liegt ein Browserkompatibilitätsproblem vor: lastChild ist IE-kompatibel und lastElementChild ist nicht IE-kompatibel.

var replaceChild= document.body.replaceChild(p1,p2); //将p1替换p2

Nach dem Login kopieren

nextSibling

; nextElementSibling findet den nächsten Geschwisterknoten. Es gibt auch

Kompatibilitätsprobleme

for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的对象。
//nodeType是节点的类型，利用nodeType来判断节点类型，再去控制子节点
//nodeType==1 是元素节点
//nodeType==3 是文本节点
  if (oList.childNodes[i].nodeType == 1) {//查找到oList内的元素节点
    console.log(oList.childNodes[i]);//在控制器日志中显示找到的元素节点
  }
}

Nach dem Login kopieren

previousSibling

;

previousElementSibling

findet den vorherigen Geschwisterknoten. Es gibt auch Kompatibilitätsprobleme.

var oList = document.getElementById('list');//oList是做的ul的对象
var oChild=document.getElementById('child');//oChild是做的ul中的一个li的对象
//通过子节点查找父节点//parentNode：获取父节点
console.log(oChild.parentNode);//在控制器日志中显示父节点
console.log(oList.children);//在控制器日志中显示oList子节点
console.log(children.length)//子节点的个数

Nach dem Login kopieren

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! Empfohlene Lektüre

Welche sind die häufig verwendeten mathematischen Funktionen in JS? So bedienen Sie Vue, um das V-Modell in einer benutzerdefinierten Komponente zu aktivieren

Das obige ist der detaillierte Inhalt vonJS fügt DOM-Knoten hinzu, löscht, ändert und überprüft sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!