javascript和jQuery操作dom的总结

2019年5月23日 131次阅读 来源: sunnyghx

其实dom的操作无非四点：增删查改 还有就是属性操作和class操作
先总结原生js的操作

增：

  • createElement方法用来生成HTML元素节点。
    var newDiv = document.createElement("div");
    createElement方法的参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。

  • createTextNode()
    createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");

上面代码新建一个div节点和一个文本节点

  • createDocumentFragment()
    createDocumentFragment方法生成一个DocumentFragment对象。
    var docFragment = document.createDocumentFragment();
    DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。

删：

  • parentNode.removeChild(childNode)

查：

这个无需多说，有几种API我们再熟悉不过了，现在只需记住两个：

  • document.querySelector()
  • document.querySelectorAll()
    括号里选取规则和css的选择器完全一样。

改：

  • parentNode.appendChild(childNode) 用于向父节点内部末尾添加节点
  • parentNode.insertBefore(newNode,oldNode) 用于向oldNode之前插入元素
  • parentNode.replaceChild(newelement,oldelement) 用于替换元素

属性操作：

  • getAttribute()用于获取元素的attribute值

  • createAttribute()方法生成一个新的属性对象节点，并返回它。
    createAttribute方法的参数name，是属性的名称。

  • setAttribute()方法用于设置元素属性，比如：

var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");
  • romoveAttribute()用于删除元素属性

class操作：

var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active')   //新增 class
nodeBox.classList.remove('active')  //删除 class
nodeBox.classList.toggle('active')   //新增/删除切换
node.classList.contains('active')   // 判断是否拥有 class

js的原生总结常用的就这些了，相对应的jQuery方法如下

增：

创建节点就写html字符串，比如$('<div>hello world</div>')

删：

.remove()和.empty()。remove方法还可以设置过滤选项。
还有一种“剪切”方法叫.detach()

查：

jQuery有个遍历系统，可以查找父子兄弟元素，需要时查这里查找元素之间的关系

改：

  • append() – 在被选元素的结尾插入内容
  • prepend() – 在被选元素的开头插入内容
  • after() – 在被选元素之后插入内容
  • before() – 在被选元素之前插入内容
    这些方法的参数都可以接收无限多个的
    我觉得记住这四个完全够了，那些insertBefore啥的搞得我头痛……

属性操作：

  • .val()处理input的value
  • .attr(attributeName,value)处理元素属性
  • .removeAttr() 删除属性

class操作

  • addClass() – 向被选元素添加一个或多个类
  • removeClass() – 从被选元素删除一个或多个类
  • toggleClass() – 对被选元素进行添加/删除类的切换操作
  • css() – 设置或返回样式属性

总结

总的来说，jquery方法要比原生javascript方便许多，尤其是在dom操作方面。我看见有的人使用jQuery就是为了用它的选择器，别的都写原生，从一个侧面也反应出jquery的dom确实挺不错的。

作者：_于易
链接：https://www.jianshu.com/p/35e318d8bb85
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

    原文作者：sunnyghx
    原文地址: https://www.jianshu.com/p/6fb362834dc4
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞