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标签

 

posted @ 2019-02-15 11:22  SRH啦  阅读(635)  评论(0编辑  收藏  举报