节点操作简单概述~JS

&Mark&

已于 2022-04-24 12:49:39 修改

阅读量563

点赞数

分类专栏： javascript 文章标签： javascript

于 2022-04-24 12:47:07 首次发布

本文链接：https://blog.csdn.net/qq_64970126/article/details/124380262

版权

javascript 专栏收录该内容

68 篇文章 4 订阅

订阅专栏

1:概述

一般，节点至少拥有nodeType（节点类型)、nodeName(节点名称）和nodeValue(节点值）这三个基本属性。

元素节点nodeType为1
属性节点nodeType为2
文本节点 nodeType为3（文本节点包含文字、空格、换行等)

这三个节点会返回不同的值，在后期会用来获取相关属性，我实际开发中,节点操作主要操作的是元索节点，nodetype==1的值，HTML所有标签都可以看为一个节点

2、获取方法

A:利用dom树可以把节点分为不同的层级关系，常见的是父子兄层级关系

B:父级节点

语法：node（获取过来的一个元素）. parentNode，parentNode属性可返回某节点的父节点，注意是最近的一个父节点如果指定的节点没有父节点则返回null

C：子节点

A:获取方法一（麻烦会返回所有节点）

语法：parentNode.childNodes（标准）

对于子节点是一个集合来说返回的是一个伪数组，假如ul里面有4个li就会返回9个节点，因为里面还存在5个txet节点（空格也算是节点），集合里面包含了所有的节点，包括元素节点、文本节点，如果只想要获得里面的元素节点，就需要处理

var ul = document.querySelector("ul");

for( var i=0;i<ul.childNodes.length; i++){

if(ul.childe[i].nodeyType==1){

console.log（ul. childNodes[i]）;

}

}

过程繁琐不提倡

推荐方法：parentNode.children（parentNode父节点名）

parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回(这个是我们重点掌握的）。虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以使用

我们想要获得第几个li可以采用如下方法

ul.children[0]、ul.children[1]、ul.children[2]

B：获取方法二（麻烦会返回第一个节点包含文字节点）

语法一：parentNode .firstChild 返回第一个子节点，找不到结果返回null。同样也是包含所有的节点。语法：parentNode. lastChild

返回第一个子节点，找不到结果返回null。同样也是包含所有的节点。

我们只需要获取元素节点就可以了为此出现方法三：

C：获取方法三（IE9以上支持此语法）

语法：parentNode .firstElementChild firstElementchild返回第一个子元素节点，找不到则返回null。

语法：parentNode . lastElementChild lastElementchild返回最后一个子元素节点，找不到则返回null。

下拉菜单利用parentNode.children元素节点制作

源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .bg {
            background-color: red;
        }
    </style>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul class="nae">
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul class="nae">
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul class="nae">
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul class="nae">
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        var nav = document.querySelector(".nav");
        var lis = nav.children;
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.children[1].style.display = "block";
            }
            lis[i].onmouseout = function() {
                this.children[1].style.display = "none";
            }
        }
    </script>
</body>

</html>