Quelles opérations les js natifs peuvent-ils effectuer sur DOM ? Comment faire fonctionner dom en utilisant js natif

Ce que cet article vous apporte, c'est quelles opérations les js natifs peuvent-ils effectuer sur le DOM ? La méthode de fonctionnement de js natif sur dom a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Création DOM à l'aide de js natif sur dom

Le nœud DOM (Node) correspond généralement à une étiquette, un texte ou un attribut HTML. Les nœuds DOM ont un attribut nodeType utilisé pour représenter le type de l'élément actuel, qui est un entier :

1 : Élément, élément
2 : Attribut, attribut
3 : Texte, texte

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

2. Requête DOM utilisant js natif sur 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;

Méthode compatible pour obtenir le premier nœud d'élément enfant :

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

3. Comment faire fonctionner le DOM avec du js natif Modifications du DOM (ajouter, supprimer, remplacer, insérer, cloner)

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

4. Fonctionnement des attributs des méthodes de fonctionnement de js natif sur dom

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

Recommandations associées :

Événements BOM, DOM et JS

Utilisez PHP au lieu de JS pour jouer avec DOM

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!