原生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()、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原生jsdom操作-增</title>
<style type="text/css">
</style>
</head>
<body>
<div id = 'content'></div>
</body>
<script>
var childDiv = document.createElement('div');
var childH1 = document.createElement('h1');
var textNode1 = document.createTextNode("我是子div");
var textH1 = document.createTextNode("我是子H1");
childH1.appendChild(textH1);
childDiv.appendChild(textNode1);
var content = document.getElementById('content')
content.appendChild(childDiv);
content.appendChild(childH1);
</script>
</html>
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
网友评论