JavaScript-筑基（十）节点操作初识及下拉栏案例

最新推荐文章于 2024-11-07 13:38:59 发布

superfortunate

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量326

点赞数 1

分类专栏： JavaScript知识点详细学习笔记文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_59598992/article/details/122394423

版权

JavaScript知识点详细学习笔记专栏收录该内容

39 篇文章 2 订阅

订阅专栏

网页中所有的内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。

所有节点均可通过JavaScript进行访问和修改，所有HTML元素（节点）均可被修改，也可被创建或者删除。

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

元素节点nodeType 为 1 （实际开发主要获取）
属性节点nodeType 为 2
文本节点nodeType 为 3（文本节点包含文字、空格、换行等）

利用节点层级关系获取元素

利用父子节点关系获取元素
逻辑性较强，兼容性稍差

父节点parentNode，得到离元素最近的父级节点；如果无父节点，返回null；

 <div class="box">
        <span class="qaqqa"></span>
    </div>
  
    <script >
        var qaqqa = document.querySelector('.qaqqa');
        console.log(qaqqa.parentNode);
    </script>

子节点parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合

<ul>
        <li>123</li>
        <li>93</li>
        <li>293</li>
        <li>623</li>
    </ul>
    <script >
        var ul = document.querySelector('ul');
        console.log(ul.childNodes);
    </script>

返回所有包含元素节点和文本节点等

常用 parentNode.children，获取所有子元素节点

console.log(ul.children);

获取第一个子元素节点 parentNode.firstElementChild
获取第一个元素节点实际开发写法 parentNode.children[0]
获取最后一元素节点 parentNode.lastElementChild
获取最后一元素节点实际开发写法 parentNode.children[ul.children.length -1]

下拉栏案例（大部分代码）

.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;
        }
        
        .nav ul li a:hover {
            background-color: #c94d1c;
        }

  <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>

 var nav = document.querySelector('.nav');
       var lis = nav.children; //得到四个小li
       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';
           }
       }

祝你学习快乐！