JavaScript中有许多常用的DOM方法可以用来查找和操作HTML页面中的元素。其中，parentNode方法是一种常用的方法，它用于查找指定元素的父节点。本文将为大家详细介绍parentNode方法是什么，以及如何在JavaScript中使用这个方法。

一、什么是parentNode方法？

在DOM模型中，每个元素都有一个parentNode属性，用于访问该元素的父节点。这个属性返回一个元素节点，它代表着该元素的直接父节点（也就是该元素所在的上一级元素）。通过parentNode属性，我们可以获取到当前元素的父节点，以及从父节点进一步向上寻找祖先节点。

二、parentNode方法的用法

在JavaScript中，parentNode最常见的用法就是用于查找元素的父节点。我们可以通过以下代码获取一个父节点：

```

var element = document.getElementById("child");

var parent = element.parentNode;

```

其中，getElementById方法用于获取ID为"child"的元素节点，然后使用parentNode方法获取该元素的父节点，将其赋值给变量parent。此时，变量parent就代表着元素"child"的父节点。

需要注意的是，使用parentNode方法获取的是元素节点，而不是文本节点或注释节点。如果指定的元素没有父节点，parentNode方法将返回null。

除了用于查找元素的父节点之外，parentNode方法还可以用于向上遍历祖先节点。例如，我们可以通过以下代码获取祖先节点的父节点：

```

var element = document.getElementById("child");

var ancestor = element.parentNode.parentNode;

```

在这个例子中，我们首先使用getElementById方法找到ID为"child"的元素节点，然后通过parentNode方法获取到它的直接父节点，在通过一次parentNode方法获取到祖先节点的父节点。这样一来，变量ancestor就代表元素"child"的祖先节点的直接父节点。

三、parentNode方法的特点

1、父节点只有一个

在DOM模型中，每个元素只有一个父节点。即使一个元素在页面中出现多次，它的父节点也只有一个。使用parentNode方法时，我们只能获取到元素的直接父节点，而无法获取到它的所有祖先节点。

2、容易受到HTML结构变化的影响

由于parentNode方法是从当前节点向上遍历父节点，因此如果页面结构发生变化，可能会导致parentNode方法获取到的父节点也发生变化。例如，如果元素移动到了新的位置，或者被删除了，其parentNode属性也会改变。因此，在使用parentNode方法时需要注意判断返回结果是否是预期的父节点。

3、可能会产生兼容性问题

虽然parentNode方法在主流浏览器中都得到了良好的支持，但是在某些情况下，这个方法可能会产生兼容性问题。例如，在IE7及以下版本中，如果节点没有父元素，使用parentNode方法时会抛出异常。因此，在编写跨浏览器的代码时，需要对不同的浏览器进行兼容性处理。

四、parentNode方法的应用

1、查找上一个元素

如果我们想要在DOM结构中查找到前一个元素，便可以利用parentNode方法和previousSibling方法进行遍历。具体代码如下：

```

var element = document.getElementById("second");

var previous = element.previousSibling;

while (previous && previous.nodeType != 1) { //排除空白文本节点

previous = previous.previousSibling;

}

console.log(previous);

```

在这个例子中，我们首先使用getElementById方法找到ID为"second"的元素的节点，然后通过previousSibling方法获取到它的前一个兄弟节点。由于previousSibling方法返回的可能是一个空白文本节点，因此我们需要通过循环来判断previous节点的nodeType是否为1，如果不是1则继续获取前一个兄弟节点，直到找到一个元素节点或者previous节点为null为止。最后，变量previous就代表元素"second"的前一个元素。

2、查找所有祖先元素

如果我们想要查找一个元素的所有祖先元素，便可以利用parentNode方法和getElementsByTagName方法进行遍历。具体代码如下：

```

var element = document.getElementById("child");

var ancestors = [];

while (element.parentNode) {

element = element.parentNode;

if (element.nodeType == 1) {

ancestors.push(element);

}

}

console.log(ancestors);

```

在这个例子中，我们使用getElementById方法找到ID为"child"的元素节点，并通过循环不断使用parentNode方法遍历它的父节点。当遍历到根节点时，我们结束循环，在过程中通过nodeType判断每个节点是否为元素节点，如果是元素节点则将其添加到数组ancestors中。最终，数组ancestors就代表元素"child"的所有祖先元素。