previousSibling
时间: 2023-12-01 18:03:19 浏览: 26
`previousSibling` 是一个 DOM 属性,用于获取当前节点的前一个同级节点(即在同一层级上的前一个节点)。这个属性返回一个节点对象,如果当前节点没有前一个同级节点,则返回 null。注意,该属性只返回节点对象,不包括文本节点或注释节点。
下面是一个示例:
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.getElementsByTagName('li')[1];
console.log(secondItem.previousSibling); // 返回第一个 li 节点之前的文本节点
console.log(secondItem.previousElementSibling); // 返回第一个 li 节点
</script>
```
在上面的示例中,我们获取了第二个 `li` 节点,并使用 `previousSibling` 属性获取了它前面的文本节点。然而,我们可以使用 `previousElementSibling` 属性来获取前一个元素节点。
相关问题
js通过event获取兄弟元素的方法
可以通过以下两种方式获取兄弟元素:
1. 使用`event.target`获取当前元素,再通过`parentNode`属性获取父元素,最后通过`children`属性获取父元素下的所有子元素,再通过循环遍历获取兄弟元素。
示例代码如下:
```
function getSiblings(event) {
var siblings = [];
var parent = event.target.parentNode;
var children = parent.children;
for (var i = 0; i < children.length; i++) {
if (children[i] !== event.target) {
siblings.push(children[i]);
}
}
return siblings;
}
```
2. 使用`event.target`获取当前元素,再通过`previousElementSibling`和`nextElementSibling`属性获取前一个兄弟元素和后一个兄弟元素。
示例代码如下:
```
function getSiblings(event) {
var siblings = [];
var previousSibling = event.target.previousElementSibling;
var nextSibling = event.target.nextElementSibling;
while (previousSibling) {
siblings.push(previousSibling);
previousSibling = previousSibling.previousElementSibling;
}
while (nextSibling) {
siblings.push(nextSibling);
nextSibling = nextSibling.nextElementSibling;
}
return siblings;
}
```
js 获取指定兄弟元素
如果要获取指定的某个兄弟元素,可以借助 `previousSibling` 和 `nextSibling` 属性以及 `nodeName` 属性来筛选出需要的元素。
例如,如果要获取元素 `element` 的前一个同级元素中的第一个 `div` 元素,可以使用如下代码:
```javascript
var sibling = element.previousSibling;
while (sibling) {
if (sibling.nodeType === 1 && sibling.nodeName.toLowerCase() === 'div') {
// 找到了符合条件的元素,进行处理
console.log(sibling);
break;
}
sibling = sibling.previousSibling;
}
```
代码中使用了一个 `while` 循环来遍历 `element` 的前一个同级元素列表,通过判断节点类型和节点名称来筛选出需要的元素。如果找到了符合条件的元素,则进行相应的处理,否则继续往前遍历。如果要获取后一个同级元素中的指定元素,可以将 `previousSibling` 替换为 `nextSibling`,并且改变判断条件即可。