Je rencontre souvent des problèmes avec javascript dom pendant mes études, donc cet article va les expliquer.
En plus de l'objet document, l'élément le plus couramment utilisé dans le DOM est l'objet Element, qui représente des éléments HTML.
Les objets élément peuvent avoir des nœuds enfants de type nœuds d'élément, nœuds de texte et nœuds de commentaire. DOM fournit une série de méthodes pour ajouter, supprimer, modifier et interroger des éléments.
Élément Il en existe plusieurs. attributs importants
nodeName : nom de la balise d'élément et un tagName similaire
nodeType : type d'élément
className : nom de classe id : identifiant de l'élément enfants : liste d'éléments enfants (HTMLCollection)
childNodes : enfant liste d'éléments (NodeList)
firstChild : le premier élément enfant
lastChild : le dernier élément enfant
nextSibling : l'élément frère suivant
previousSibling : l'élément frère précédent
parentNode , parentElement : élément parent La méthode
élément de requête
getElementById
renvoie le nœud d'élément correspondant à l'attribut ID spécifié. Si aucun nœud correspondant n'est trouvé, null est renvoyé. C'est également le moyen le plus rapide d'obtenir un élément. La méthode
var elem = document.getElementById("test");getElementsByClassName()
getElementsByClassName renvoie un objet de type tableau (objet de type HTMLCollection), incluant tous les éléments dont les noms de classe remplissent les conditions spécifiées (la plage de recherche s'inclut elle-même). ), l'élément Les modifications sont reflétées dans les résultats renvoyés en temps réel. Cette méthode peut être appelée non seulement sur l'objet document, mais également sur n'importe quel nœud d'élément. La méthode
var elements = document.getElementsByClassName(names);//getElementsByClassName方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素。
document.getElementsByClassName('red test');``` * getElementsByTagName()
getElementsByTagName renvoie tous les éléments avec la balise spécifiée (la portée de recherche s'inclut elle-même). La valeur de retour est un objet HTMLCollection, c'est-à-dire que les résultats de la recherche sont une collection dynamique et que les modifications apportées à tous les éléments seront reflétées dans la collection renvoyée en temps réel. Cette méthode peut être appelée non seulement sur l'objet document, mais également sur n'importe quel nœud d'élément.
var paras = document.getElementsByTagName("p");
//上面代码返回当前文档的所有p元素节点。注意，getElementsByTagName方法会将参数转为小写后，再进行搜索。```getElementsByName() getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
// Supposons qu'il existe un formulaire
var form = document.getElementsByName("x");var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
//querySelector方法无法选中CSS伪元素。```querySelectorAll() querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。
elementList = document.querySelectorAll(selectors);//querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。var matches = document.querySelectorAll("div.note, div.alert");//上面代码返回class属性是note或alert的div元素。elementFromPoint() elementFromPoint方法返回位于页面指定位置的元素。
var element = document.elementFromPoint(x, y);//上面代码中，elementFromPoint方法的参数x和y，分别是相对于当前窗口左上角的横坐标和纵坐标，单位是CSS像素。
elementFromPoint方法返回位于这个位置的DOM元素，如果该元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值），则返回null。
Créer un élément
createElement() createElement方法用来生成HTML元素节点。
var newDiv = document.createElement("div");//createElement方法的参数为元素的标签名，即元素节点的tagName属性。//如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。createTextNode() createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。
var newDiv = document.createElement("div");var newContent = document.createTextNode("Hello");//上面代码新建一个div节点和一个文本节点
createDocumentFragment()//createDocumentFragment方法生成一个DocumentFragment对象。var docFragment = document.createDocumentFragment();```
L'objet DocumentFragment est un fragment DOM qui existe en mémoire, mais n'appartient pas au document actuel. Il est souvent utilisé pour générer une structure DOM plus complexe, puis l'insérer dans le document actuel. L'avantage de ceci est que, étant donné que DocumentFragment n'appartient pas au document actuel, toute modification apportée à celui-ci n'entraînera pas le rendu de la page Web, ce qui offre de meilleures performances que la modification directe du DOM du document actuel.
##Modifier les éléments
* appendChild()
Ajouter un élément à la fin de l'élément
var newDiv = document.createElement("div");var newContent = document.createTextNode("Hello");newDiv.appendChild(newContent);```
insertBefore()Insérer un élément avant un élément
var newDiv = document.createElement("div");var newContent = document.createTextNode("Hello");newDiv.insertBefore(newContent, newDiv.firstChild);replaceChild()
replaceChild() accepte deux paramètres : l'élément à insérer et l'élément à remplacer
newDiv.replaceChild(newElement, oldElement);``` * removeChild()
Supprimer l'élément
parentNode.removeChild(childNode);``` cloneNode()
Clone Element, la méthode a un paramètre booléen Lorsque true est transmis, il sera profondément copié, c'est-à-dire que l'élément et ses sous-éléments seront copiés (IE copiera également ses événements. Lorsque false, seuls les éléments). l'élément lui-même sera copié
node.cloneNode(true);```##属性操作* getAttribute() //getAttribute()用于获取元素的attribute值node.getAttribute('id');``` createAttribute()
//createAttribute()方法生成一个新的属性对象节点，并返回它。attribute = document.createAttribute(name); createAttribute方法的参数name，是属性的名称。
setAttribute()
//setAttribute()方法用于设置元素属性var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");//等同于var node = document.getElementById("div1");var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);```
* romoveAttribute()removeAttribute()用于删除元素属性 node.removeAttribute('id'); element.attributes
Bien sûr, ce que fait la méthode ci-dessus peut également être réalisé par une opération de classe attribut de tableau element.attributes
## ##HTMLCollection et NodeList Nous savons que les objets Element représentent des éléments, donc les collections de plusieurs éléments ont généralement deux types de données. L'objet NodeList représente une liste ordonnée de nœuds. interface qui représente une collection d'éléments HTML.Elle offre la possibilité de parcourir la liste.Les méthodes et attributs de
Les méthodes suivantes obtiennent l'objet HTMLCollection
document.images //所有img元素
document.links //所有带href属性的a元素和area元素
document.anchors //所有带name属性的a元素
document.forms //所有form元素
document.scripts //所有script元素
document.applets //所有applet元素
document.embeds //所有embed元素
document.plugins //document.与embeds相同
document.getElementById("table").children
document.getElementById("table").tBodies
document.getElementById("table").rows
document.getElementById("row").cells
document.getElementById("Map").areas
document.getElementById("f2").elements //HTMLFormControlsCollection extends HTMLCollection
document.getElementById("s").options //HTMLOptionsCollection extends HTMLCollection```Ce qui suit. les méthodes obtiennent l'objet NodeList
document.getElementsByName("name1")
document.getElementsByClassName("class1")
document.getElementsByTagName("a")
document.querySelectorAll("a")
document.getElementById("table").childNodes
document.styleSheets //StyleSheetList，与NodeList类似```#####HTMLCollection与NodeList有很大部分相似性* 都是类数组对象，都有length属性，可以通过for循环迭代* Tout Il est en lecture seule
* et tous sont en temps réel, c'est-à-dire que les modifications apportées au document seront immédiatement reflétées sur les objets pertinents (il y a une exception, la NodeList renvoyée par document.querySelectorAll n'est pas en temps réel)
* sont tous Il existe une méthode item(), vous pouvez obtenir des éléments via item(index) ou item( "id")#####La différence est que * L'objet HTMLCollection a la méthode nomméeItem(), vous pouvez transmettre l'identifiant ou le nom pour obtenir des éléments
* La méthode item() de HTMLCollection et l'obtention d'éléments via des attributs (document.forms.f1) peut prendre en charge l'identifiant et le nom, tandis que l'objet NodeList ne prend en charge que l'identifiant
Cet article fournit une explication pertinente de dom , pour plus de contenu connexe, veuillez faire attention au php chinois site web.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
