JS获取子节点、父节点和兄弟节点的方法实例总结

下面我来详细讲解一下JS获取子节点、父节点和兄弟节点的方法实例总结。

1. 获取子节点

在JavaScript中，可以使用childNodes属性获取选定元素的子节点列表，该属性返回一个NodeList对象。NodeList对象类似于数组，但有些方法不同。要获取具体的子节点，可以使用索引值来获取。

示例1

<!DOCTYPE html>
<html>
<head>
    <title>获取子节点示例</title>
</head>
<body>
    <ul id="list">
        <li>apple</li>
        <li>banana</li>
        <li>orange</li>
    </ul>
    <script type="text/javascript">
        var list = document.getElementById("list");
        var childNodes = list.childNodes; // 返回一个NodeList对象
        for (var i = 0; i < childNodes.length; i++) {
            if (childNodes[i].nodeType === 1) { // 如果是元素节点
                console.log(childNodes[i].innerHTML);
            }
        }
    </script>
</body>
</html>

在上面的示例中，我们首先获取了id为list的ul元素，然后通过childNodes属性获取它的子节点列表。由于childNodes属性返回的是一个NodeList对象，在循环中我们需要判断每个节点类型是否为元素节点（nodeType===1），如果是则输出该节点的innerHTML。

示例2

<!DOCTYPE html>
<html>
<head>
    <title>获取子节点示例</title>
</head>
<body>
    <div id="parent">
        <p>这是父元素</p>
        <ul>
            <li>apple</li>
            <li>banana</li>
            <li>orange</li>
        </ul>
        <p>这也是父元素</p>
    </div>
    <script type="text/javascript">
        var parent = document.getElementById("parent");
        var ul = parent.getElementsByTagName("ul")[0]; // 获取第一个<ul>元素
        var childNodes = ul.childNodes;
        for (var i = 0; i < childNodes.length; i++) {
            if (childNodes[i].nodeType === 1) { // 如果是元素节点
                console.log(childNodes[i].innerHTML);
            }
        }
    </script>
</body>
</html>

在上面的示例中，我们首先获取了id为parent的div元素，然后通过getElementsByTagName方法获取它里面的第一个ul元素。接着，再通过childNodes属性获取该ul元素的子节点列表，最后输出列表中所有的元素节点innerHTML。

2. 获取父节点

在JavaScript中，可以使用parentNode属性获取选定元素的父节点，该属性返回一个Node对象。

示例

<!DOCTYPE html>
<html>
<head>
    <title>获取父节点示例</title>
</head>
<body>
    <div id="son">
        <p>这是子元素</p>
    </div>
    <script type="text/javascript">
        var son = document.getElementById("son");
        var parent = son.parentNode;
        console.log(parent.id);
    </script>
</body>
</html>

在上面的示例中，我们首先获取了id为son的div元素，然后通过parentNode属性获取其父节点。最后输出父节点的id。

3. 获取兄弟节点

在JavaScript中，可以使用previousSibling和nextSibling属性获取选定元素的前一个兄弟节点和后一个兄弟节点，这两个属性返回Node对象。由于浏览器解析HTML代码时，会将代码中的空白符号也解释为节点，因此在使用这两个属性时需要小心。如果选中元素的前一个空白符号被解释为节点，则previousSibling返回该空白符号对应的Node对象。同理，如果选中元素的后一个空白符号被解释为节点，则nextSibling返回该空白符号对应的Node对象。

示例

<!DOCTYPE html>
<html>
<head>
    <title>获取兄弟节点示例</title>
</head>
<body>
    <ul id="list">
        <li>apple</li>
        <li>banana</li>
        <li>orange</li>
    </ul>
    <script type="text/javascript">
        var list = document.getElementById("list");
        console.log(list.firstChild.nextSibling.innerHTML);
        console.log(list.lastChild.previousSibling.innerHTML);
    </script>
</body>
</html>

在上面的示例中，我们首先获取了id为list的ul元素，然后使用firstChild和lastChild属性获取该元素的第一个子节点和最后一个子节点。接着，使用nextSibling和previousSibling属性获取第一个子节点的后一个兄弟节点和最后一个子节点的前一个兄弟节点，最后输出这两个兄弟节点的innerHTML。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS获取子节点、父节点和兄弟节点的方法实例总结 - Python技术站

JS获取子节点、父节点和兄弟节点的方法实例总结

1. 获取子节点

示例1

示例2

2. 获取父节点

示例

3. 获取兄弟节点

示例

相关文章