Dans le processus d'apprentissage de JavaScript, vous rencontrerez le problème de l'obtention d'éléments par js. Cet article expliquera la méthode d'obtention d'éléments.
Dans le travail de développement front-end réel, nous rencontrons souvent le besoin d'obtenir certains éléments afin de mettre à jour le style, le contenu, etc. de l'élément. Le modèle d'objet de document (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une représentation structurée du document et définit un moyen d'accéder à la structure à partir du programme, modifiant ainsi la structure et le style du document et du contenu. Le DOM analyse un document en une collection structurée de nœuds et d'objets (objets contenant des propriétés et des méthodes), qui connecte les pages Web à des scripts ou à des langages de programmation. Par conséquent, JavaScript peut obtenir des nœuds d'éléments via l'API DOM. Les méthodes sont les suivantes : querySelector() et querySelectorAll() sont les méthodes de sélection d'éléments ES5
1 getElementById() :
Reçoit. un paramètre : l'ID de l'élément à obtenir (sensible à la casse, doit correspondre strictement), renvoie un objet Element (peut également être considéré comme une collection NodeList dynamique, mais la collection ne contient qu'un seul élément correspondant, mais elle reflétera également le DOM en temps réel le nœud change), si l'élément avec un ID spécifique n'existe pas dans le document courant, nul est renvoyé.
Syntaxe :
element = document.getElementById(id);
Exemple : Supprimer
<body>
<div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(1)
var body=document.querySelector('body');
body.removeChild(div); console.log(body); //(2)
</script></body>
//(1)处打印值 <div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>//(2)处打印值<body>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(1)
var body=document.querySelector('body');
body.removeChild(div); console.log(body); //(2)
</script></body>Exemple :
<!DOCTYPE html><html><head>
<title>getElementById example</title>
<script>
function changeColor(newColor) { var elem = document.getElementById("para1");
elem.style.color = newColor;
} </script></head><body>
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button></body></html>La méthode getElementById() ne recherchera pas les éléments qui ne sont pas dans le document. Après avoir créé un élément et attribué un identifiant, vous devez utiliser insertBefore() ou d'autres méthodes similaires pour insérer l'élément dans le document avant de pouvoir utiliser getElementById() pour obtenir :
var element = document.createElement("div");
element.id = 'testqq';var el = document.getElementById('testqq'); // el will be null!getElementsByClassName(). :
reçoit un paramètre, qui est une chaîne contenant un ou plusieurs noms de classe (les noms de classe sont séparés par des espaces), et renvoie une collection dynamique HTMLCollection (on peut également dire qu'elle renvoie un objet tableau de classe NodeList) . La collection contient L'élément actuel est le nœud racine et tous les éléments enfants portant le nom de classe spécifié.
Syntaxe :
var elements = document.getElementsByClassName(names); var elements = rootElement.getElementsByClassName(names);
getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur un document. L'élément appelant cette méthode sera utilisé comme élément racine pour cette recherche.
Exemple :
Obtenir tous les éléments avec la classe 'test' :
document.getElementsByClassName('test');
Obtenir tous les éléments, y compris les éléments de classe de 'red' et 'test' :
document.getElementsByClassName('red test');
Dans le nœud enfant de l'élément avec l'identifiant 'main', récupérez tous les éléments avec la classe 'test' :
document.getElementById('main').getElementsByClassName('test');
Exemple : Supprimer
//html代码<div class="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
//js代码一 <script>
var div = document.getElementsByClassName("myDiv"); console.log(div); //(3)
var p = document.getElementsByClassName("myP"); for (var i = 0; i < p.length; i++) {
div[0].removeChild(p[i]);
} console.log(p); //(4)
</script>/ /Imprimer la valeur à (3)
[div.myDiv] //Une collection HTMLCollection dynamique d'une longueur de 1 et innerHTML de
hello dolby
,< ="myP">hello bean, pourquoi il n'y a pas deux autres éléments p sera expliqué plus tard.La méthode ci-dessus de suppression de nœuds a vérifié que la méthode getElementsByClassName renvoie une collection dynamique HTMLCollection.
⬆️Dans le code ci-dessus, first div obtient une collection dynamique composée d'éléments avec le nom de classe "myDiv" dans la page, p obtient une collection dynamique composée d'éléments avec le nom de classe "myP" dans la page , puis utilise une boucle for pour supprimer chaque élément de la collection « myP » dans le premier élément de la collection « myDiv » (c'est-à-dire le seul élément div dans l'exemple ci-dessus. Par conséquent, uniquement le premier et le troisième). les éléments sont supprimés. C'est pourquoi ? Alors, comment pouvez-vous parcourir chaque élément de la collection HTMLCollection d'objets de type tableau et supprimer tous les éléments ? 3 getElementsByTagName() : Reçoit un paramètre : obligatoire. Obtenez le nom de la balise de l'élément (non sensible à la casse), renvoyez une collection dynamique HTMLCollection (on peut également dire qu'elle renvoie un objet tableau de type NodeList), la collection contient l'élément actuel en tant que nœud racine (à l'exclusion de l'élément actuel lui-même), toutes les balises spécifiées. L'ordre des éléments enfants du nom est l'ordre dans lequel ils apparaissent dans le sous-arbre de l'élément courant. Si aucun élément n'est trouvé, l'ensemble sera vide. elements = element.getElementsByTagName(tagName) Exemple : Exemple : Supprimer 以下for循环改为for (var i=0,len=p.length;i
La raison est que les changements dans la structure DOM dans la collection dynamique peuvent être automatiquement reflétés dans les objets enregistrés. Initialement p.legth=4, lorsque i=0, le premier p élément de la page est supprimé, et ensuite p. .length= 3 ; Lorsque i=1, l'élément d'index 1 dans les trois p restants est supprimé, puis p.length=2 lorsque i=2, la condition de i
Cela se fait toujours avec une boucle for⬇️, supprimez simplement le dernier élément de la collection d'objets à chaque fois~//js代码二 <script>
var div = document.getElementsByClassName("myDiv")[0]; console.log(div); //(5)
var p = document.getElementsByClassName("myP"); for (var i=p.length;i--;){
div.removeChild(p[i]);
} console.log(p); //(6)
</script>
//(5)处打印值<div class="myDiv"></div>//(6)处打印值[] //空的HTMLCollection集合，长度为0
Syntaxe : // check the alignment on a number of cells in a table. var table = document.getElementById("forecast-table");
var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
var status = cells[i].getAttribute("data-status");
if ( status == "open" ) {
// grab the data
}
}<body>
<div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(7)
var p = document.getElementsByTagName("p");//
div.removeChild(p[i]);
} console.log(p); //(8)
与getElementByClassName相同，返回动态集合，所以循环删除结果也相同
//(7)处打印值
//(8)处打印值[] //空的HTMLCollection集合，长度为04、getElementsByName()：
接收一个参数：带有给定name属性值的元素，返回一个动态NodeList类数组对象，对象中包含以当前元素为根节点，所有指定name属性值的子元素。最常用的场景是取得单选按钮。
示例：
<!DOCTYPE html><html lang="en"><head> ...</head><body>
<form name="up"><input type="text"></form><div name="down"><input type="text"></div>
<script>var up_forms = document.getElementsByName("up");console.log(up_forms[0].tagName); // returns "FORM"</script></body></html>示例：删除
<body>
<div id="myDiv">
<input type="radio" name="fav-color">red <input type="radio" name="fav-color">green <input type="radio" name="fav-color">blue </div>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(9)
var ipt_favCol = document.getElementsByName("fav-color"); for (var i = ipt_favCol.length; i--;) {
div.removeChild(ipt_favCol[i]);
} console.log(ipt_favCol); //(10)
</script></body>getElementByName返回的是一个NodeList动态集合
//(9)处打印值
5、querySelector()：
接收一个参数：一个包含一个或多个CSS 选择器的字符串（多个选择器以逗号分隔），返回匹配指定CSS选择器的第一个元素节点（无法选中CSS伪元素），没有发现匹配的节点则返回null。
语法：
element = document.querySelector(selectors);
示例：一个强大的选择方式
<div class="user-panel main">
<input name="login"/> //这个标签将被返回</div><script>
var el = document.querySelector("div.user-panel.main input[name=login]");
</script>示例：如果要匹配的ID或选择器不符合 CSS 语法（比如不恰当地使用了冒号或者空格），你必须用反斜杠将这些字符转义。由于 JavaScript 中，反斜杠是转义字符，所以当你输入一个文本串时，你必须将它转义两次（一次是为 JavaScript 字符串转义，另一次是为 querySelector 转义）：
<div id="foo\bar"></div><div id="foo:bar"></div><script> console.log('#foo\bar') // "#fooar" document.querySelector('#foo\bar') // 不匹配任何元素 console.log('#foo\\bar') // "#foo\bar" console.log('#foo\\\\bar') // "#foo\\bar" document.querySelector('#foo\\\\bar') // 匹配第一个div document.querySelector('#foo:bar') // 不匹配任何元素 document.querySelector('#foo\\:bar') // 匹配第二个div</script>
示例：删除
<div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(11)
var p = document.querySelector("p");
div.removeChild(p); console.log(p); //(12)
</script>//(11)处打印值 <div id="myDiv">
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>//(12)处打印值 <p class="myP">hello world</p> //如你所见，querySelector也是静态的快照6、querySelectorAll()：
接收一个参数：一个包含一个或多个CSS 选择器的字符串（多个选择器以逗号分隔），返回静态NodeList对象集合，该集合中包含匹配指定CSS选择器的所有节点，元素节点的变化无法实时反映在结果中；如果参数中包含CSS伪元素则返回一个空的对象集合。
语法：
elementList = document.querySelectorAll(selectors);
示例：
var matches = document.querySelectorAll("div.note, div.alert");
示例：删除
<div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(13)
var p = document.querySelectorAll("p"); for (var i = 0; i < p.length; i++) {
div.removeChild(p[i]);
} console.log(p); //(14)
</script>//(13)处打印值
7、elementFromPoint()：
接收两个参数：分别是相对于当前窗口左上角的横纵坐标，单位为CSS像素，不需要加单位；返回位于页面指定位置的元素，如果该元素不可返回（如滚动条）则返回它的父元素，如果坐标值无意义（如负值）则返回null。
语法
var element = document.elementFromPoint(x, y);
示例：
<!DOCTYPE html><html lang="en"><head><title>elementFromPoint example</title><script>function changeColor(newColor) { elem = document.elementFromPoint(2, 2); elem.style.color = newColor;}</script>
</head><body>
<p id="para1">Some text here</p><button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button></body></html>这一个获取元素的方法用得不多所以不多做介绍。
是不是觉得看了上面这些头好大啊，什么是动态什么是静态，有没有好记一点的方法呢？
有哒！
你可以简单地理解为，getElementBy系列返回的都是动态的HTMLCollection集合，动态集合中的DOM结构变化能实时地反映到所保存的对象中，而querySelector系列返回的都是静态的NodeList对象，是一个快照，对DOM的任何操作都不会对其产生影响。
那么Nodelist和HTMLCollection有什么异同呢？
相同点：
二者都是类数组对象
二者都具有length属性
二者都具有item()方法
二者都是动态的元素集合，每次访问都需要重新对文档进行查询。
你一定会好奇，诶？前面不是说querySelector系列返回的都是静态的NodeList对象咩？怎么又变成动态的呢？原因在此：
规范中对 querySelectorAll 有明确要求，规定其必须返回一个静态的 NodeList 对象。
在Chrome中情况如下：
document.querySelectorAll('a').toString(); // return "[object NodeList]"document.getElementsByTagName('a').toString(); // return "[object HTMLCollection]"
不同点：
NodeList 对象会包含文档中的所有节点，如 Element、Text 和 Comment 等；HTMLCollection 对象只会包含文档中的 Element 节点
本篇对hs获取元素进行了详细的讲解，更多相关内容请关注php中文网。
相关推荐：
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)
