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字符串,比如$('<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
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

推荐阅读更多精彩内容