• JavaScript-DOM节点的相关操作

    目录

    1.获得DOM节点

    2.更新DOM节点

    3.删除DOM节点

    4.创建和插入DOM节点

    1.获得DOM节点

    DOM：文档对象模型

    浏览器网页就是一个 Dom 树形结构！

    • 更新：更新Dom节点
    • 遍历Dom节点：得到Dom节点
    • 删除：删除一个Dom节点
    • 添加：添加一个新的节点

    要操作一个 Dom 节点，就必须要先获得这个 Dom 节点

    获得Dom节点：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div id="father">
    9.     <h1>标题一h1>
    10.     <p id="p1">p1p>
    11.     <p class="p2">p2p>
    12. div>
    13.  
    14. <script>
    16.     var h1=document.getElementsByTagName('h1');
    17.     var p1=document.getElementById('p1');
    18.     var p2=document.getElementsByClassName('p2');
    19.     var father=document.getElementById('father');
    20.     //获取父节点下的所有子节点
    21.     var children=father.children;
    22.     // father.firstChild 获取第一个节点
    23.     // father.lastChild 获取最后一个节点
    24. script>
    25. body>
    26. html>

    这是原生代码，之后我们尽量都使用 jQuery();

    2.更新DOM节点

    先拿到 id1

    1. <body>
    2. <div id="id1">
    3. div>
    4. <script>
    5.   var id1=document.getElementById('id1');
    6. script>
    7. body>

    更新 id1 

    innerText：修改文本的值

    innerHTML :可以解析HTML文本标签

    操作js

    3.删除DOM节点

    删除节点的步骤：先获取父节点，再通过父节点删除自己

    删掉节点 p1：

    1. <div id="father">
    2.     <h1>标题一h1>
    3.     <p id="p1">p1p>
    4.     <p class="p2">p2p>
    5. div>
    6.  
    7. <script>
    8.     var self=document.getElementById('p1');
    9.     var father=p1.parentElement;
    10.     father.removeChild(selt);
    11. script>

     注意：删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意。

    4.创建和插入DOM节点

    我们获得了某个 Dom 节点，假设这个 Dom 节点是空的，我们通过 innerHTML 就可以增加一个元素了，但是这个 Dom 节点已经存在元素了，我们就不能这么干了！会产生覆盖

    追加append

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <p id="js">JavaScriptp>
    9. <div id="list">
    10.     <p id="me">JavaMEp>
    11.     <p id="ee">JavaEEp>
    12.     <p id="se">JavaSEp>
    13. div>
    14. <script>
    15.     var js = document.getElementById('js');
    16.     var list = document.getElementById('list');
    17.  
    18. script>
    19. body>
    20. html>

     另一种方式，创建一个新的标签实现插入：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <p id="js">JavaScriptp>
    9. <div id="list">
    10.     <p id="me">JavaMEp>
    11.     <p id="ee">JavaEEp>
    12.     <p id="se">JavaSEp>
    13. div>
    14. <script>
    15.     var js = document.getElementById('js');//已存在的节点
    16.     var list = document.getElementById('list');
    17.     //通过js创建一个新的节点
    18.     var newP=document.createElement('p');//创建一个p标签
    19.     //设置id
    20.     newP.id='newP';
    21.     newP.innerText='Hello,biubiu';
    22.     list.appendChild(newP)
    23. script>
    24. body>
    25. html>

     创建一个标签节点（通过这个属性，可以设置任意的值）

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <link rel="stylesheet" href="" type="text/css">
    7.     <script type="text/javascript" src="">script>
    8. head>
    9. <body>
    10. <p id="js">JavaScriptp>
    11. <div id="list">
    12.     <p id="me">JavaMEp>
    13.     <p id="ee">JavaEEp>
    14.     <p id="se">JavaSEp>
    15. div>
    16. <script>
    17.     var js = document.getElementById('js');//已存在的节点
    18.     var list = document.getElementById('list');
    19.     //通过js创建一个新的节点
    20.     var newP=document.createElement('p');//创建一个p标签
    21.     //newP.setAttribute('id','newP');
    22.     //设置id
    23.     newP.id='newP';
    24.     newP.innerText='Hello,biubiu';
    25.     list.appendChild(newP);
    26.     //创建一个标签节点
    27.     var myScript = document.createElement('script');
    28.     myScript.setAttribute('type','text/javascript');
    29. script>
    30. body>
    31. html>

    创建一个标签更改网页背景：

    1.     //可以创建一个style标签
    2.     var myStyle = document.createElement('style');
    3.     myStyle.setAttribute('type','text/css');
    4.     myStyle.innerHTML = 'body{background-color:chartreuse;}';//设置标签内容
    5.     document.getElementsByTagName('head')[0].appendChild(myStyle);

    插在前面 insertBefore

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <link rel="stylesheet" href="" type="text/css">
    7.     <script type="text/javascript" src="">script>
    8. head>
    9. <body>
    10. <p id="js">JavaScriptp>
    11. <div id="list">
    12.     <p id="me">JavaMEp>
    13.     <p id="ee">JavaEEp>
    14.     <p id="se">JavaSEp>
    15. div>
    16. <script>
    17.     var ee = document.getElementById('ee');
    18.     var js = document.getElementById('js');
    19.     var list = document.getElementById('list');
    20. //要包含的节点.insertBefore(newNode,targetNode)
    21.     list.insertBefore(js,ee);
    22. script>
    23. body>
    24. html>

  • 相关阅读:
    【WLAN】Android 13 WIFI 选网机制--NetworkNominator 解读
    数组19—unshift() ：将一个或多个元素添加到数组的开头
    抖音电商双11官方数据最全汇总！
    python中开发页面的两种方法：Qt Designer（PyQt图形化界面拖拽开发App界面）以及Django（开发Web应用框架）
    python-面向运行时性能优化-threading
    记录字节跳动前端面试，四轮技术面
    如何使用ArcGIS Pro自动矢量化道路
    NVM 安装及注意事项
    C++ 代码输出春天的春
    大一学生想自学web安全
  • 原文地址：https://blog.csdn.net/qq_61727355/article/details/126652628