• DOM节点

     dom节点：   dom树里每一个内容都称之为节点

    节点类型：

    元素节点  ：所有的标签  比如body、div       html是根节点

    属性节点 ： 所有的属性  比如href 

    文本节点 :   所有的文本

    其他节点

    节点查找：

     

    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.     <title>Documenttitle>
    8.     <style>
    9.         * {
    10.             margin: 0;
    11.             padding: 0;
    12.         }
    13.  
    14.         .erweima {
    15.             position: relative;
    16.             width: 160px;
    17.             height: 160px;
    18.             margin: 100px auto;
    19.             border: 1px solid #ccc;
    20.         }
    21.  
    22.         .erweima i {
    23.             position: absolute;
    24.             left: -13px;
    25.             top: 0;
    26.             width: 10px;
    27.             height: 10px;
    28.             border: 1px solid #ccc;
    29.             font-size: 12px;
    30.             line-height: 10px;
    31.             color: #ccc;
    32.             font-style: normal;
    33.             cursor: pointer;
    34.         }
    35.     style>
    36. head>
    37.  
    38. <body>
    39.     <div class="erweima">
    40.         <img src="./images/code.png" alt="" />
    41.         <i class="close_btn">xi>
    42.     div>
    43.     <script>
    44.  
    45.         // 1. 查找所需要的标签
    46.         let close_btn = document.querySelector(".close_btn");
    47.  
    48.  
    49.         // 2. 注册事件
    50.         close_btn.addEventListener("click", function () {
    51.             // 使用parentNode找到父节点==》.erweima   操作它即可
    52.            this.parentNode.style.display = 'none'
    53.         });
    54.  
    55.  
    56.  
    57.     script>
    58. body>
    59.  
    60. html>

    父元素查找：

    子元素.parentNode

    子元素查找：

    父元素.children

     子节点查找：

    childNodes

    获得所有子节点、包括文本节点（空格、换行）、注释节点等   所有的

    children（重点）

    获取所有元素节点

    返回的还是一个伪数组

    父元素.children

    兄弟关系查找：

    下一个兄弟节点：  nextElementSibling属性

    上一个兄弟节点： previousElementSibling属性

     

     

    增加节点：

     

    目标：能够根据需求增加节点的能力

    很多情况下，我们需要在页面中增加元素

    比如，点击发布按钮，可以新增一条信息

    一般情况下，我们新增节点，按照如下操作：

    创建一个新的节点

    把创建的新结点放入到指定的元素内部

    学习路线：

    创建节点

    追加节点

    追加节点：

    要想在界面看到，还得插入到某个父元素中

    插入到父元素的最后一个子元素：

    父元素.appendChild(要插入的元素)

    插入到父元素中某个子元素的前面

    父元素.insertBefore(要插入的元素，在哪个元素前面)

    克隆节点：

     

    cloneNode会克隆一个跟原标签一样的元素， 括号里面传入布尔值

    若为true，则代表克隆时会包含后代节点一起克隆      深拷贝

    若为false，则表示克隆是不包含后代节点                   浅拷贝

    默认为false

    删除节点：

     目标：能够具备根据需求删除节点的能力

    若一个节点在页面中已不需要时，可以删除它

    在javaScript原生DOM操作时，要删除元素必须通过父元素删除

    语法：  父元素.removeChild(要删除的元素)

    注意：

    如果不存在父子关系则删除不成功

    删除的是        父元素.children[ 你想删除的子元素索引号]

    删除节点和隐藏节点（display：none）有区别的：隐藏节点还是存在的，但是删除，则是从html中删除节点

  • 相关阅读:
    es6_Promise
    HyperLynx中层叠设计实例
    光猫桥接与直接拨号的对比
    Zookeeper经典应用场景实战（二）
    嵌入式Linux学习—从裸机到应用教程大全
    如何设计 API？
    Redis 集群
    ⟨A⟩ = Tr(ρA) 从数学上来讲什么意思
    怎么给图片添加贴纸？介绍几个简单的方法
    阿里云慢下来了？
  • 原文地址：https://blog.csdn.net/weixin_43368552/article/details/126242397