dom增删改查

原生js

Paste_Image.png

增

• 若添加新元素：首先创建该元素节点，然后添加
• 创建元素节点：document.createElement('h1')
• 创建文本节点：document.createTextNode('描述')
• 增加：

  • 添加孩子

    • A.append(B) : 把B追加到A内部
    • A.appendTo(B) : 把A追加到B内部
    • A.prepend(B) : 在A的开始添加孩子B
    • A.prependTo(B) : 把A追加到B的开始

  • 添加兄弟

    • A.after(B) : 在A后添加B
    • A.before(B): 在A前追加B

  • 添加class

    • elm.classList.add('nn')
    • elm.className+=" nn" //nn前边有空格

  • node.insertBefore(A,B):在父节点node里面的B节点前面追加A

  • 替换节点：parent.replaceChild(child,oldElem);

删

• elementNow.remove():删除当前元素
• parent.removeChild(child):删除父元素中的子元素
• child.parentNode.removeChild(child)：不确定父元素的时候可以这样做

改

http://www.jianshu.com/writer#/notebooks/10862078/notes/15825654/preview

• ( 获取，设置) 修改HTML元素内容
  • node.textContent:用来设置或是获取某个元素内所有文本内容，包括子元素中的内容。（css等兼容性比innerText好）
  • node.innerText: 只获取当前节点内容
  • node.innerHTML：
  • node.outerHTML：
• 更改属性
  • 设置属性：node.setAttribute('style','color:red')
  • 获取属性：var a = node.getAttribute(''style'');
• 修改元素CSS
  • node.style.color="red"

查

• querySelector()、
• querySelectorAll()
• getElementById()、
• getElementsByTagName()、
• getElementsByName()、
• getElementsByClassName()、

jQuery

• 内部插入主要方法：
  • append(content) 向每个匹配的元素内部追加内容。
  • prepend(content) 向每个匹配的元素内部前置内容。
• 外部插入：
  • after(content) 在每个匹配的元素之后插入内容。
  • before(content) 在每个匹配的元素之前插入内容。
• 删除：
  • empty() 删除匹配的元素集合中所有的子节点。
  • remove([expr]) 从DOM中删除所有匹配的元素。

http://www.jianshu.com/p/9af2990adedb
http://www.jianshu.com/p/4ad0ba579fb2
http://www.cnblogs.com/wuyaxing/p/6429838.html