关于javascript中的parentNode

在JavaScript中，parentNode是一个非常重要的属性，它用于获取一个节点的父节点，通过使用parentNode属性，我们可以访问和操作DOM（文档对象模型）中的节点及其父节点。

1. 什么是DOM？

DOM是W3C（万维网联盟）制定的一种标准，用于表示和操作HTML和XML文档的结构，它将文档解析为一个由节点和对象组成的结构树，每个节点都代表文档中的一个元素或属性，通过DOM，我们可以动态地修改文档的内容、结构和样式。

2. parentNode属性的作用

parentNode属性返回指定元素的父节点，如果该元素没有父节点，则返回null，这个属性非常有用，因为它允许我们遍历DOM树并访问祖先元素。

2.1 获取父节点

要获取一个元素的父节点，可以使用以下代码：

var element = document.getElementById("myElement");
var parent = element.parentNode;

在上面的代码中，我们首先使用getElementById方法获取了一个具有特定ID的元素，我们使用parentNode属性获取了该元素的父节点，并将其存储在变量parent中。

2.2 遍历DOM树

parentNode属性还可以用于遍历DOM树，通过递归地访问每个元素的父节点，我们可以从根节点开始，一直到达目标元素，下面是一个示例代码：

function traverseDOM(element) {
  if (element === null) {
    return;
  }
  // 处理当前元素的逻辑
  console.log(element);
  // 递归遍历父节点
  traverseDOM(element.parentNode);
}

在上面的代码中，我们定义了一个名为traverseDOM的函数，它接受一个元素作为参数，函数首先检查元素是否为null，如果是，则停止遍历，它处理当前元素的逻辑（在这个例子中，我们只是简单地打印出元素），它递归地调用自身，将当前元素的父节点作为参数传递进去，这样，我们就可以从根节点开始，一直到达目标元素。

3. parentNode属性的限制

虽然parentNode属性非常有用，但它也有一些限制，它只能获取到最近的父节点，而不能获取到更远的祖先节点，它只能获取到直接的父节点，而不能获取到间接的祖先节点，为了克服这些限制，我们可以使用其他DOM API，如getParent()方法和querySelector()方法。

3.1 getParent()方法

getParent()方法是一个非标准的DOM API，它返回指定元素的直接父节点或最近的祖先节点，下面是一个示例代码：

function getClosestParent(element, tagName) {
  while (element !== null) {
    if (element.tagName === tagName) {
      return element;
    }
    element = element.parentNode;
  }
  return null;
}

在上面的代码中，我们定义了一个名为getClosestParent的函数，它接受两个参数：一个是要查找的元素，另一个是要查找的标签名，函数使用一个循环来遍历元素的祖先节点，直到找到匹配的标签名为止，如果找到了匹配的标签名，则返回该元素；否则，返回null。

3.2 querySelector()方法

querySelector()方法是CSS选择器的一个方法，它可以用于选择符合特定条件的元素，通过结合使用querySelector()方法和parentNode属性，我们可以获取到更复杂的祖先节点，下面是一个示例代码：

function getAncestorByTagName(element, tagName) {
  var parent = element.parentNode;
  while (parent !== null) {
    if (parent.querySelector(tagName)) {
      return parent;
    }
    parent = parent.parentNode;
  }
  return null;
}

在上面的代码中，我们定义了一个名为getAncestorByTagName的函数，它接受两个参数：一个是要查找的元素，另一个是要查找的标签名，函数使用一个循环来遍历元素的祖先节点，直到找到匹配的标签名为止，如果找到了匹配的标签名，则返回该元素；否则，返回null。