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标签
  • 相关阅读:
    精通javascript、javascript语言精粹读书笔记
    javascript语言精粹。3、对象;4、函数;深入原型链,对象的原理!
    权限管理
    javascript碎碎念(面向对象备忘)
    几个JavaScript面试题
    JavaScript类属性的定义方法和区别
    j
    Java调用SQL存储过程 输入输出参数(转)
    Java中文乱码解决
    js中eval详解
  • 原文地址:https://www.cnblogs.com/SRH151219/p/10382634.html
Copyright © 2011-2022 走看看