Welche Operationen können native JS auf DOM ausführen? So bedienen Sie Dom mit nativem JS

In diesem Artikel erfahren Sie, welche Operationen native JS im DOM ausführen können. Die Operationsmethode von nativem js auf dom hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

1. DOM-Erstellung mit nativem js auf dom

DOM-Knoten (Knoten) entspricht normalerweise einer Beschriftung, einem Text oder einem HTML-Attribut. DOM-Knoten verfügen über ein nodeType-Attribut, das den Typ des aktuellen Elements darstellt, das eine Ganzzahl ist:

1: Element, Element
2: Attribut, Attribut
3: Text, Text

var node1 = document.createElement(‘p’); 
var node2 = document.createTextNode(‘hello world!’);

2. DOM-Abfrage mit nativem js auf dom

// 返回当前文档中第一个类名为 “myclass” 的元素 
var el = document.querySelector(“.myclass”);
// 返回一个文档中所有的class为”note”或者 “alert”的p元素 
var els = document.querySelectorAll(“p.note, p.alert”);
// 获取元素 
var el = document.getElementById(‘xxx’); 
var els = document.getElementsByClassName(‘highlight’); 
var els = document.getElementsByTagName(‘td’); 
Element也提供了很多相对于元素的DOM导航方法：
// 获取父元素、父节点 
var parent = ele.parentElement; 
var parent = ele.parentNode;
//只读，没有兼容性问题 
var offsetParent=ele.offsetParent;
//只读，找到最近的有定位的父节点。
//没有定位父级时，默认是body;但在IE7以下，如果当前元素没有定位属性，返回body，如果有，返回HTML;
//如果当前元素某个父级触发了haslayout，则返回触发了haslayout这个元素。
// 获取子节点，子节点可以是任何一种节点，可以通过nodeType来判断 
var nodes = ele.children;
//标准下、非标准下都只含元素类型，但对待非法嵌套的子节点，处理方式与childNodes一致。 
var nodes = ele.childNodes;
//非标准下：只包含元素类型，不会包含非法嵌套的子节点。 　　　　　　　　　　　　　　　　
//标准下：包含元素和文本类型，会包含非法嵌套的子节点。
//获取元素属性列表 
var attr = ele.attributes;
// 查询子元素 
var els = ele.getElementsByTagName(‘td’); 
var els = ele.getElementsByClassName(‘highlight’);
// 当前元素的第一个/最后一个子元素节点 
var el = ele.firstChild;
//对待标准和非标准模式，如childNods 
var el = ele.lastChild; 
var el = ele.firstElementChild;
//非标准不支持 
var el = ele.lastElementChild;
// 下一个/上一个兄弟元素节点 
var el = ele.nextSibling; 
var el = ele.previousSibling; 
var el = ele.nextElementSibling; 
var el = ele.previousElementSibling;

Kompatible Methode zum Abrufen des ersten untergeordneten Elementknotens:

var first=ele.firstElementChild||ele.children[0];

3. Wie man DOM mit nativem js betreibtDOM-Änderungen (Hinzufügen, Löschen, Ersetzen, Einfügen, Klonen)

// 添加、删除子元素 
ele.appendChild(el); 
ele.removeChild(el);
// 替换子元素 
ele.replaceChild(el1, el2);
// 插入子元素 
parentElement.insertBefore(newElement, referenceElement);
//克隆元素 
ele.cloneNode(true) //该参数指示被复制的节点是否包括原节点的所有属性和子节点

4. Attribut Betrieb der nativen Js-Betriebsmethode auf Dom

// 获取一个{name, value}的数组 
var attrs = el.attributes;
// 获取、设置属性 
var c = el.getAttribute(‘class’); 
el.setAttribute(‘class’, ‘highlight’);
// 判断、移除属性 
el.hasAttribute(‘class’); 
el.removeAttribute(‘class’);
// 是否有属性设置 
el.hasAttributes();

Verwandte Empfehlungen:

Ereignisse in BOM, DOM und JS

Verwenden Sie PHP anstelle von JS, um mit DOM zu spielen

Das obige ist der detaillierte Inhalt vonWelche Operationen können native JS auf DOM ausführen? So bedienen Sie Dom mit nativem JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!