元素的特性、结构与操作节点详解

最编程 2024-07-26 15:34:20

...

一、节点

HTML文档可以看作是一个节点树，网页中的所有内容都是节点。

1.节点的属性

（1）节点类型：nodeType

元素节点 ---1

属性节点 ---2

文本节点 ---3 （文字、空格、换行）

（2）节点名称：nodeName

（3）节点值：nodeValue

2.节点层级

一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分。

（1）根节点：<html>就是根节点，有且只有一个

（2）父节点：一个节点的上级节点

（3)子节点：一个节点的下级节点

（4）兄弟节点：具有相同父节点的节点

3.节点的操作

（1）获取父节点：element.parentNode

<body>
    <div class="demo">
        <div class="box">
            <span class="child">西安邮电大学</span>
        </div>
    </div>
    <script>
        var child = document.querySelector('.child');
        console.log(child.parentNode);
    </script>
</body>

(2)获取子节点

在JavaScript中，可以使用childNodes属性或者children属性两种方式来获得当前元素的所有子节点的集合。

children是一个可读的属性，返回所有子元素节点。children只返回子元素节点，其余节点不返回，目前各大浏览器都支持该属性，在实际开发中通常使用“obj.children[索引] ”的方式来获取子元素节点。。

element.childNodes：获取使用电子节点

element.children:获取子元素节点

firstChild:获取第一个子节点

lastChild:获取最后一个子节点

firstElementChild:获取第一个子元素节点

lastElementChild:获取最后一个子元素节点

（3）获取兄弟节点

在JavaScript中，可以使用nextSibling属性获得下一个兄弟节点，或者使用previousSibling属性获得上一个兄弟节点，它们的返回值包含元素节点或者文本节点等。如果找不到，就返回null。

nextSiBling：获取下一个兄弟节点

previousSiBling：获取上一个兄弟节点

nextElementSiBling：获取下一个元素的兄弟节点

previElementSiBling：获取下一个元素的兄弟节点

<body>
    <div class="demo">
        <div class="box">
            <h2>德云</h2>
            <span class="child">西安邮电大学</span>
            <p>西安交通大学</p>
        </div>
    </div>
    <div>
        <ul>
            <li>红楼梦</li>
            <li>西游记</li>
            <li>水浒传</li>
            <li>三国演义</li>
        </ul>
    </div>
    <script>
        var child = document.querySelector('.child');
        console.log(child.parentNode);

        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');

        console.log(lis)
        console.log("childNodes获取ul的子节点：", ul.childNodes)//九个，包括换行
        console.log("children获取ul的子节点：", ul.children)//
        console.log("ul的第一个子节点类型：",ul.childNodes[0].nodeType) //文本
        console.log("ul的二个子节点类型：",ul.childNodes[1].nodeType)   //元素 （标签）

        console.log("ul的第一个子节点：",ul.firstChild);
        console.log("ul的最后一个子节点：",ul.lastChild);

        console.log("ul的第一个子元素节点：",ul.firstElementChild);
        console.log("ul的最后一个子元素节点：",ul.lastElementChild);

        var span = document.querySelector('.child');
        console.log("span的下一个兄弟节点：",span.nextSibling.nextSibling)
        console.log("span的上一个兄弟节点：",span.previousSibling.previousSibling)
    </script>
</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;
    }
    .nav ul li a:hover{
        background-color: #FFF5DA;
    }
</style>
<body>
    <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>
        <li>
            <a href="#">留言板</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">电话</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">邮箱</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        //1.获取外层的ul及其子元素节点
        var nav = document.querySelector('.nav');
        var lis = nav.children;
        //2.给每个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'
            }
        }
    </script>
</body>

（4）创建节点（动态创建节点）

在DOM中，使用document.createElement('tagName')方法创建由tagName指定的HTML元素，也称为动态创建元素节点。

document.write（）：若页面加载完毕，再次调用该方法会导致页面重绘

element.innerHTML：将节点加入到某个元素中，会导致元素的部分重绘

document.createElement（）：创建节点，结构清晰，效率不高

（5）添加和删除节点

DOM中，提供了node.appendChild()和node.insertBefore()方法用于添加节点，node. removeChild(child)用于删除节点。

appendChild（）：将节点添加到指定父节点的已有子节点集合末尾

insertBefore（）：将节点添加到指定父节点的已有子节点集合前面

removeChild（child）：删除一个指定的节点

【案例】简易留言板

案例分析：利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        padding: 100px;
    }
    textarea{
        width: 200px;
        height: 100px;
        border: 1px solid pink;
        outline: none;
        resize: none;
    }
    ul{
        margin-top: 50px;
    }
    li{
        width: 300px;
        padding: 5px;
        background-color: #eee;
        font-size: 15px;
        margin: 15px 0;
    }
    li a{
        float: right;
    }
</style>
<body>
    <textarea></textarea>
    <button>发布</button>
    <ul></ul>

    <script>
        //1.获取元素
        var btn = document.querySelector('button');
        var txt = document.querySelector('textarea');
        var ul = document.querySelector('ul');

        //2.按钮绑定click事件
        btn.onclick = function(){
            if(txt.value === ''){
                alert("您没有输入内容")
            }else{
                //2.1 创建子元素(li)
                var li = document.createElement('li');
                //2.2 将文本区的内容放入li中
                li.innerHTML = txt.value + "<a href='javascript:;'>删除</a>"
                txt.value = ''
                //2.3 将li添加到ul的最前面
                ul.insertBefore(li,ul.children[0]);

                //2.4 当用户点击删除时，删除ul下的li
                var as = document.querySelectorAll('a');
                for(var i=0;i<as.length;i++){
                    as[i].onclick = function(){
                        ul.removeChild(this.parentNode);//删除当前a标签的父节点--li
                    }
                }
            }
        }

    </script>
</body>

（6）复制节点（克隆节点）

在DOM中，提供了node.cloneNode()方法，返回调用该方法的节点的一个副本，也称为克隆节点或者拷贝节点。语法为“需要被复制的节点.cloneChild(true/false) ”。

true:深拷贝，复制节点本身和所有子节点

false（或空）：浅拷贝，只赋值节点本身

<body>
    <ul id="mylist">
        <li>苹果</li>
        <li>橘子</li>
        <li>橙子</li>
    </ul>
    <ul id="op"></ul>
    <button onclick="fun()">点我</button>

    <script>
        function fun(){
            //找到mylist的第一个子节点
            var item = document.getElementById('mylist').firstElementChild;
            //复制子节点
            var cloneItem = item.cloneNode(true);
            //将复制的节点添加到op中
            document.getElementById('op').appendChild(cloneItem)

        }
    </script>
</body>

上一篇： CSS里的层次结构：理解与应用元素分级

下一篇：深入理解CSS第16课：层次结构与布局解析

元素的特性、结构与操作节点详解

一、节点

1.节点的属性

2.节点层级

3.节点的操作