javascript和jQuery操作dom的总结

其实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字符串，比如$('

hello world

')

删：

.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
來源：
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。