zoukankan      html  css  js  c++  java
  • dom操作节点-----怎样添加、移除、移动、复制、创建和查找节点?

    1)创建新节点

      document.createElement("标签名") //创建一个具体的元素
      document.createTextNode(“文本内容”) //创建一个文本节点   

    2)添加

      元素.appendChild(“节点/文本内容”) //添加  节点/文本内容 到 元素 的所有子节点的末尾
    
      元素.insertBefore(“需插入的节点/文本”,“指点的节点”) // 将需插入的节点/文本 插入到 指定节点 之前

    3)  文档碎片

    1.创建文档碎片
    var frag = document.createDocumentFragment()-----创建文档碎片
    2.先将创建的元素添加到文档碎片
      frag.appendChild("元素")
    3.将文档碎片添加到指定的元素中
      元素.appendChild(frag)

    4)  移除:

     父元素.removeChild(“被删除的子元素”) //移除父元素中的子元素
    
      元素.remove()//直接移除元素

    5)  替换:

     父元素.replaceChild(“新元素”,“旧元素”) // 用新元素替换旧元素

    6)查找---------获取页面元素

      document.getElementById("id 名") //通过元素Id,唯一性-----------------返回一个对象
      document.querySelector("选择器")----------------------选择器为类名或者id名,返回一个对象(只获取第一个对象)
      document.getElementsByTagName(“标签名”) //通过标签名称---------------返回一个伪数组
      document.getElementsByName(“name属性值") //通过元素的Name属性的值-----------返回伪数组
      document.getElementByClassName("类名")--------------返回伪数组,(火狐,谷歌支持,ie不支持)   document.querySelectorAll("选择器")------------------返回伪数组   document.documentElement----------------------注意,不是方法,所以不带(),获取html标签   document.body--------------------------注意,不是方法,所以不带(),获取body标签
  • 相关阅读:
    四则运算题目生成器
    个人博客作业Week1
    M1/M2项目阶段总结
    个人博客作业week7
    个人博客作业—2
    第一周个人博客作业
    关于生成四则运算式
    个人博客作业week7
    第二次博客作业
    关于webservice大数据量传输时的压缩和解压缩
  • 原文地址:https://www.cnblogs.com/SRH151219/p/10382634.html
Copyright © 2011-2022 走看看