javascript作为一门脚本语言，极大地简化了我们前端开发的流程。其中，表达父子关系是一个非常重要的概念，下面我们就来简单介绍一下javascript怎么表达父子关系。
一、DOM树结构
先来说一说Javascript最广泛使用的DOM树结构。HTML DOM树是一种层级结构，其中每个HTML元素都会成为父、子或兄弟关系的一部分，且所有节点都源于一个根。树结构的节点有以下概念：
- 元素节点：代表HTML元素
- 文本节点：代表元素的文本内容
- 属性节点：代表元素的属性
- 文档节点：代表整个HTML文档
- 注释节点：代表HTML中的注释内容
在DOM树中，元素节点就是父子节点之间最常见的关系。比如：
<div id="parent">
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>我们可以把一段HTML内容抽象成上述DOM结构，其中div标签是ul标签的父元素。而li标签是ul标签的子元素，也是div标签的孙子元素。而这种父子关系，在Javascript里是如何表达的呢？
立即学习“Java免费学习笔记（深入）”；
二、Node对象
在Javascript中，我们使用Node对象来表示这些DOM节点。Node对象是所有DOM节点的一个基类，所有DOM节点都继承了Node的属性和方法。Node对象有以下常用属性：
-
parentNode：表示父节点，如果没有则返回NULL。 -
childNodes：表示子节点的一个数组。 -
previousSibling：表示前一个兄弟节点。 -
nextSibling：表示后一个兄弟节点。
以上面那段HTML代码为例，我们可以通过以下方式来获取父子节点的关系：
const div = document.getElementById('parent');
const ul = div.firstElementChild;
const li1 = ul.firstElementChild;
const li2 = li1.nextElementSibling;
console.log(ul.parentNode === div); // true
console.log(li1.parentNode === ul); // true
console.log(li2.previousSibling === li1); // true
console.log(li1.nextSibling === li2); // true以上代码中，我们使用了getElementById方法来获取div，并使用firstElementChild方法获取其第一个子元素ul。接下来，我们使用firstElementChild方法获取ul的第一个子元素li1，并使用nextElementSibling方法获取li1的后一个兄弟节点li2。最后，我们使用Node对象的属性来检测它们之间的父子关系。
三、jQuery中的父子操作
除了使用Node对象来表示父子节点的关系，jQuery也提供了方便的DOM操作函数来实现同样的功能。以下是一些简单的示例：
-
parent()：这个方法返回匹配元素的父元素，可以传入一个选择器来过滤结果。
$('li').parent() // 返回行成父子关系的ul节点-
children()：这个方法返回匹配元素集合的所有子元素的集合，也可以传入选择器来过滤结果。
$('div').children() // 返回div下的所有子元素-
siblings()：这个方法返回匹配元素的所有兄弟元素，也可以传入选择器来过滤结果。
$('li').siblings() // 返回li的兄弟元素（不包括它自己）以上简单的示例中，jQuery提供了便捷的方法帮助我们查找和操作DOM节点父子关系，简化了Javascript操作DOM节点的流程。
结论
Javascript中使用Node对象来表示DOM节点的父子关系。在使用Node对象时，我们可以直接访问节点的属性，比如parentNode、previousSibling等来获取父子节点的关系。另外，jQuery库还提供了更加简单方便的函数来让我们操作和查找DOM节点之间的父子关系，通过巧妙使用这些函数，我们可以极大地快速完成前端开发工作，提高前端开发效率。
