JS-DOM 节点（简单留言案例）

最新推荐文章于 2022-10-11 20:36:32 发布

Mao.O

最新推荐文章于 2022-10-11 20:36:32 发布

阅读量455

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_60155232/article/details/126997763

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

节点概述

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

节点的基本属性

一般节点至少拥有：

node Tyoe(节点类型)

nodeName（节点名称）

nedeValue（节点值）

node Tyoe(节点类型)

元素节点 nodeType 为 1

属性节点 nodeType 为 2

文本节点 nodeType 为 3

    <div>div</div>
    <a href="javascript:;"></a>
    <script>
        var html = document.documentElement;//获取html元素节点
        var ele = document.querySelector('div');//获取div元素节点
        console.log(html.nodeType); // 1
        console.log(ele.nodeType); // 1
        console.log(ele.nodeName); // DIV
        console.log(ele.nodeValue); // null
    </script>

在开发中，常用的操作还是操作元素节点。
利用节点的子父兄关系，可以灵活的获取到元素。

节点的应用：节点层级

利用 DOM树可以把节点划分为不同层级关系，常用的是父子兄层级关系。

获取父节点元素

node.parentNode

此属性返回某节点中的父节点，注意是最近的一个父节点。

如果指定节点无父节点，则返回null。

    <div id="father">
        fatherDiv 
        <div id="son">sonDiv</div> 
    </div>
    <script>
        var son = document.querySelector('#son');
        console.log(son.parentNode); //div#father
    </script>

获取子节点元素

方式1：标准获取---parentNode.childNodes

获取所有子节点（包括文本节点），返回的类型为伪数组。

    <ul>
        <li>节点</li>
        <li>测试</li>
    </ul>

    <script>
        var ul = document.querySelector('ul');
        console.log(ul.childNodes[0]); //#text --此为ul的第一个子节点（换行）
        console.log(ul.childNodes[0].nodeType);//3
        console.log(ul.childNodes[1]);//li 
        console.log(ul.childNodes[2]);//#text 
        console.log(ul.childNodes[3]);//li
        console.log(ul.childNodes[4]);//#text
        console.log(ul.childNodes[5]);//undefined
    </script>

此方式返回值里面包含了所有子节点，包括元素节点和文本节点等。

因此需要专门处理才可以操作元素节点，不太方便，所以不提倡使用此方式。

方式2：非标准获取--parentNode.children（常用）

此方式是一个只读属性，返回所有的子元素节点，其他节点不返回。

    <ul>
        <li>节点</li>
        <li>测试</li>
    </ul>

    <script>
        var ul = document.querySelector('ul');
        console.log(ul.children[0]);//li
        console.log(ul.children[1]);//li
        console.log(ul.children[2]);//undefined
    </script>

获取首尾子节点元素

方式1（此方式获取到所有节点，包括文本等节点，故不常用）

获取子节点的第一个节点：parentNode.firstChild

获取子节点的最后一个节点：parentNode.lastChild

由于返回所有节点，所有两者输出为#text，获取不到元素节点。

方式2（常用方式）

此方式获取到的只有元素节点。

parentNode.firstElementChild

parentNode.lastElementChild

获取兄弟节点元素

方式1（此方式获取到所有节点，包括文本等节点，故不常用）

node.nexSibling:获取下一个兄弟节点

node.previousSibling:获取上一个兄弟节点

方式2（常用方式）

node.nextElementSibling :获取下一个兄弟元素节点

node.prebiousElementSibling:获取上一个兄弟元素节点

节点使用案例：简单新浪下拉菜单

案例需求：触碰菜单栏，显示出菜单栏内容（使用节点操作）。

核心js代码

    <script>
        var ful = document.querySelector('.ful');
        var lis = ful.children;//获取ful下面的所有小li（4个）
        
        for(var i = 0 ; i < lis.length ; i++){
            lis[i].onmouseover = function(){
                this.children[1].style.display = 'block';//zul显示
            }
            lis[i].onmouseout = function(){
                this.children[1].style.display = 'none';//zul隐藏
            }
        }
    </script>

html代码

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

css代码

<style>
    a{
        color: black;
        font-size: 20px;
        align-content: center;
        margin: 0 auto;
        display: block;
        text-align: center;
        border: solid salmon;
        text-decoration: none;
    }

    .ful{
        list-style: none;
        overflow: hidden;
    }

    .ful>li{
        float: left;
        width: 50px;
        height: 150px;
    }

    .zul{
        list-style: none;
        margin-top: 5px;
        display: none;
    }

    .zul>li{
        border: solid rgb(43, 223, 239);
        margin-left: -35px;
        height: 30px;
    }

    .ful>li>a:hover{
        background-color: bisque;
    }

    .zul>li>:hover{
        background-color: bisque;
    }
</style>

节点操作

动态创建元素节点

document.createelement('tagName') ---tagName：标签名称

此方法由tagName指定的HTML中的标签元素，这些元素开始时不存在，在我们触发某操作后，动态生成。例如：点击按钮生成一个<li>标签等...

var li = document.createElement('li')//创建元素节点”li“---具体使用看如下：

动态添加元素节点

在上面，我们动态的创建了元素节点，但是只是创建，在页面上也看不到。

则：我们需要添加这个动态节点到指定位置。

添加方式

node.appendChild(child)

此方法将一个节点添加到指定父节点的子节点列表的末尾。

node.insertBefore(child,指定元素)

此方法将一个节点添加到父节点的指定子节点前面。

创建和添加元素节点演示：

    <ul></ul>

    <script>
        var ul = document.querySelector('ul');//获取ul元素节点

        var li = document.createElement('li')//创建元素节点li
        var a = document.createElement('a')//创建元素节点a
        console.log(ul.children.length);//输出ul内子节点长度：0 当前无元素
        ul.appendChild(li);//添加li元素节点
        console.log(ul.children.length);//输出长度为：1 
        ul.insertBefore(a,li)//在节点li前面添加
        console.log(ul.children.length);//输出长度为：2 

    </script>

浏览器检查元素结构：（发现动态创建和添加了元素节点）

动态删除节点

node.removeChild('需要删除的节点')

---下方案例中有使用---

案例使用：留言功能（动态创建节点）

案例说明：点击提交按钮，下方出现一条记录，

清空文本框内容，点击删除，删除节点。

删除功能：

JS核心代码

    <script>
        //获取元素    
        var textarea = document.querySelector('#liuyan');
        var but = document.querySelector('#button');
        var ul = document.querySelector('ul');
        
        //绑定事件
        but.onclick = function(){
                //判断文本输入框是否为空
            if(textarea.value == ''){
                alert('您输入的内容为空');
            }else{
                //创建元素
                var li = document.createElement('li');
                //向创建的节点元素中添加内容
                li.innerHTML = textarea.value + "<a href = 'javascript:;'>删除</a>"; 
                //添加元素 
                //往后添加
                // ul.append(li); 
                //往前添加
                ul.insertBefore(li,ul.children[0]) 
                textarea.value = '';//添加记录后清空文本框
                //添加删除功能
                var as = document.querySelectorAll('a');
                for(var i = 0 ; i < as.length; i++){
                    as[i].onclick = function(){
                        ul.removeChild(this.parentNode);
                    }
                }

            }
        }
    </script>

html代码

    <textarea name="liuyan" id="liuyan" cols="25" rows="5"></textarea>
    <input id="button" type="button" value="提交">
    <ul>
  
    </ul>

css代码

<style>
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    #liuyan{
        margin-top: 10px;
        margin-left: 30px;
        padding: 5px;
    }
    ul{
        margin-left: 30px;
        width: 180px;
    }
    ul li{
        background-color: salmon;
        margin: 2px;
        /* width: 20px;  */
    }
    li{
        list-style: none;
    }
    li a{
        text-decoration: none;
        float: right;
    }
</style>