Maison > Article > interface Web > Une explication détaillée de la navigation dans les nœuds DOM en JavaScript
Cet article explique principalement comment utiliser les nœuds DOM pour obtenir des éléments de page. Tout dans le document de page est un nœud : y compris les nœuds d'éléments, les nœuds de texte, les nœuds d'attribut, les nœuds de document et les nœuds de commentaires. Ce qui suit décrit deux méthodes principales pour obtenir des nœuds :
(1) Obtenir des nœuds (y compris tous les nœuds tels que les nœuds de texte, les nœuds d'éléments, etc.)
1.parentNode : Obtenez le nœud parent
2. childNodes : récupère les nœuds enfants, récupère chaque nœud enfant via la valeur d'index
3.firstChild : récupère le premier nœud enfant du nœud parent
4.lastChild : récupère le dernier nœud enfant du nœud parent
5.nextSibling : Obtenez le nœud enfant adjacent suivant Un nœud frère
6.previousSibling : Obtenez le nœud frère précédent adjacent au nœud enfant
7.attributes : Obtenez le nœud d'attribut
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>由节点关系获取元素</title>
<style>
</style>
</head>
<body>
<div name="div1">
<p name='p1'>文本节点</p>
<p>2</p>
<ul>
<li>3</li>
<li id="li4">4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<section>7</section>
<main><span>8</span><i>9</i></main>
<script>
//注意换行和空格也属于结点，属于文本节点，按节点关系访问时需要考虑。属性节点无须考虑。
//1. parentNode获取div
console.log(document.querySelector('p').parentNode);
console.log(document.querySelector('p').parentNode.attributes[0]);
console.log(document.querySelector('p').parentNode.nodeName); //DIV
console.log(document.querySelector('p').parentNode.nodeValue); //null
console.log(document.querySelector('p').parentNode.nodeType); //1 元素节点
// 2.通过childNodes获取第一个p
console.log(document.querySelector('div').childNodes[1]);
console.log(document.querySelector('div').childNodes[1].firstChild.nodeName);
console.log(document.querySelector('div').childNodes[1].firstChild.nodeType); //2 文本节点
console.log(document.querySelector('div').childNodes[1].firstChild.nodeValue);
// 3.firstChild获取main中的第一个子节点
console.log(document.querySelector('main').firstChild);
// 4.lastChild获取main中的最后一个子节点
console.log(document.querySelector('main').lastChild);
// 5.nextSibling获取相邻下一个兄弟元素
console.log(document.querySelector('#li4').nextSibling.nextSibling);
// 6.previousSibling获取相邻上一个兄弟元素
console.log(document.querySelector('#li4').previousSibling.previousSibling);
// 总结：除parentNode外，其他方法谨慎选择，一旦代码格式有变，就会出现错误
// 通过nodeName获取节点名称
//通过nodeValue获取节点值
// 通过nodeType返回节点类型
</script>
</body>
</html>(2) Obtenez le nœud d'élément
1.parentElement : obtenez le nœud de l'élément parent
2.children : obtenez le nœud de l'élément enfant, obtenez chaque nœud d'élément enfant via la valeur d'index
3.firstElementChild : obtenez le premier nœud d'élément enfant du parent
4.lastElementChild : Obtenez le dernier nœud d'élément enfant du parent
5.nextElementSibling : Obtenez le nœud d'élément frère suivant adjacent
6.previousElementSibling : Obtenez le nœud d'élément frère précédent adjacent
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取子元素节点</title>
</head>
<body>
<div>
<p>123</p>
<p>456</p>
<p>789</p>
</div>
<script>
//p标签总体算一个节点，内部的“123”不算
console.log(document.querySelector('div').childNodes);
console.log(document.querySelector('div').childNodes.length);
// 获取子元素节点
console.log(document.querySelector('div').children);
console.log(document.querySelector('div').children[1]);
console.log(document.querySelector('div').firstElementChild);
console.log(document.querySelector('div').firstElementChild.nextElementSibling);
console.log(document.querySelector('div').lastElementChild);
console.log(document.querySelector('div').lastElementChild.previousElementSibling);
console.log(document.querySelector('div').children[1].parentElement);
</script>
</body>
</html>Recommandations associées : [Tutoriel vidéo JavaScript]
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!