其实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确实挺不错的。
网友评论