• 【JavaScript-节点操作】什么是节点，节点操作怎么用，操作节点能干吗？

    目录

    前言

    节点概述

    1.父节点

    2.子节点

    如何只获得元素节点

    3.兄弟节点

    1.nextSibling

    2.previousSibling

    3.nextElementsibling

    4.previousElementSibling

    4.创建节点

    5.留言发布案例

     写在最后

    前言

    博主是👦一个帅气的boy，你可以叫我山鱼君
    🖱 ⌨个人主页：山鱼君🐟的个人主页
    💖💖如果这篇文章对你有帮助的话希望三连下👍⭐✍支持一下博主🌊

    如果有什么建议的话可以在评论区留言哦！或者私信博主而也可以哦！

    JavaScript篇——js节点操作详解

    节点概述

    一般地 ,节点至少拥有nodeType (节点类型)、nodeName (节点名称)和nodeValue (节点值)这三个 基本属性。利用节点层级关系来获取元素，大多数利用父子兄关系来获取元素

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

    优点：不繁琐，逻辑性较强

    缺点：兼容性差

    注：在实际开发中，主要操作的是元素节点

    1.父节点

    parentNode属性可返回某节点的父节点,注意是最近的一个父节点 如果指定的节点没有父节点则返回null

    1.  <div class="box">
    2.         <span class="banners">百亿补贴span>
    3.     div>
    4.     <script>
    5.         // 一般获取元素
    6.         var banners = document.querySelector('.banners');
    7.         var box = document.querySelector('.box');
    8.         // 父节点：parentNode
    9.         // 利用节点获取元素
    10.         console.log(banners.parentNode);
    11.         // 注：得到的是离元素最近的父节点
    12.     script>
    13. body>

    2.子节点

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

    如和只获得元素节点

    方法1：

     方法2：parentNode. children是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返 回，虽然childern是一个非标准的，但是再开发中经常使用，也得到了认可，所以可以尽情使用

     

     该集合仍然为即时更新的集合。

    3.兄弟节点

    1.nextSibling

    nextSibling：下一个兄弟节点，包括文本节点和元素节点

    这里的换行属于文本节点，所以显示的是text

    2.previousSibling

    previousSibling：上一个兄弟节点，包括文本节点和元素节点

     依旧是换行的文本节点，因为previousSibling和nextSibling找到的是最近的一个节点，不进行文本节点和元素节点的区分

     3.nextElementsibling

    nextElementsibling返回当前元素下一个兄弟元素节点,找不到则返回null。

    4.previousElementSibling

    previousElementSibling如果没有上一个兄弟元素节点则返回null

     没有上一个兄弟元素节点所以返回值是null

    4.创建节点

     document. createElement()方法创建由tagName 指定的HTML元素。因为这些元素原先不存在, 是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。

     node. insertBefore ()方法将一个节点添加到父节点的指定子节点前面。

    5.留言发布案例

     思路：使用textarea，button，li，在表单域内发表留言，点击按钮，将添加一个li，并且把表单域的value传到li，下面是具体的源码。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9.     <style>
    10.         li {
    11.             list-style: none;
    12.             width: 200px;
    13.             background-color: rgb(176, 231, 250);
    14.         }
    15.  
    16.         textarea {
    17.             resize: none;
    18.             width: 300px;
    19.             height: 150px;
    20.             border: 1px solid blue;
    21.         }
    22.     style>
    23. head>
    24.  
    25. <body>
    26.     <textarea name="" id="" cols="30" rows="10">123textarea>
    27.     <button>发布button>
    28.     <ul>
    29.  
    30.     ul>
    31.     <script>
    32.         // 获取元素
    33.         var but = document.querySelector('button');
    34.         var text = document.querySelector('textarea');
    35.         var ul = document.querySelector('ul');
    36.         // 注册事件
    37.         but.onclick = function () {
    38.             if (text.value == '') {
    39.                 alert('您还没有输入呢？')
    40.                 return false;
    41.             } else {
    42.                 // 创建元素
    43.                 var li = document.createElement('li');
    44.                 li.innerHTML = text.value;
    45.                 // 添加元素
    46.                 ul.insertBefore(li, ul.children[0]);
    47.             }
    48.         }
    49.     script>
    50. body>
    51.  
    52. html>

     写在最后


    点赞👍：您的赞赏是我前进的动力！
    收藏⭐：您的支持我是创作的源泉！
    评论✍：您的建议是我改进的良药！
    山鱼🦈的个人社区:欢迎大家加—— 山鱼社区

  • 相关阅读:
    LeetCode50天刷题计划（Day 13—— 四树之和（8.50-10.00）
    PowerConsume功耗计算器
    走近足球运动·与棒球相似的体育项目·第一堂棒球课
    使用gdb调试Python程序
    9-6 Prometheus告警通知Alertmanager，结合邮箱，钉钉，企业微信实现告警，告警模板使用，告警分类发送
    多线程并发和进程通信模拟
    俄罗斯方块游戏开发教程7:消除判断和处理
    集合和集合框架
    Could not autowire field: protected tk.mybatis.mapper.common.Mapper
    Java_自定义实体类的列表List＜T＞调用remove()失败讲解
  • 原文地址：https://blog.csdn.net/zhaochen1127/article/details/126823256