# d3对dom的操作
## 查找selection
selection使用类似与jquery的$()选择
在使用上有.:
- `.select()` 选择一个
- `.sleectAll()` 选择一组
例如以下文档结构
``` html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="a1" class="s1">
<div id="b1">
<div id="c1" class="s1"></div>
</div>
<div id="b2">
<div id="c2" class="s1"></div>
</div>
<div id="b3">
<span id="c3"></span>
</div>
</div>
<div id="A1" class="s1"></div>
</body>
</html>
```
操作实例如下：
``` js
d3.select('#a1').select('div')
//将会选中id为b1的div
d3.select('#a1').selectAll('div')
//将会选中id为b1,b2,b3的三个div
d3.select('#a1').selectAll('.s1')
//将会选中id为c1,c2的两个div
```
思考：d3.selectAll('.s1')选中了哪些div？
## 创建create
create有两种方式：
- `.append()` 追加
- `.insert()` 插入
例如以下文档结构
``` html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="a1" class="s1">
<div id="b1">
<div id="c1" class="s1"></div>
</div>
<div id="b2">
<div id="c2" class="s1"></div>
</div>
<div id="b3">
<span id="c3"></span>
</div>
</div>
<div id="A1" class="s1"></div>
</body>
</html>
```
``` js
d3.select('a1').append('div') //将会在id为b3后面创建一个div
d3.select('a1').insert('div') //将会在id为b1前面创建一个div
```
思考：d3.selectAll('.s1').insert('div')将会如何创建div？
## remove
删除节点和selection几乎一样，.remove()和.removeAll().所以不再赘述。
## 绑定数据
绑定数据的实质是将数据赋值到对应dom的property的`__data__`属性上。
两种方式：
- `.data()` //将数组的子元素依次绑定到选择的dom中
- `.datum()` //将数据全部分别绑定到选择dom中
``` html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="a1" class="s1">
<div id="b1">
<div id="c1" class="s1"></div>
</div>
<div id="b2">
<div id="c2" class="s1"></div>
</div>
<div id="b3">
<span id="c3"></span>
</div>
</div>
<div id="A1" class="s1"></div>
</body>
</html>
```
``` js
d3.select('#a1').selectAll('div').data([1,2,3,4,5,6])
// 会为#b1绑定1，会为#b2绑定2，会为#b3绑定3
d3.select('#a1').selectAll('div').datum([1,2,3,4,5,6])
// 会为#b1,b2,b3均绑定[1,2,3,4,5,6]
```
问题来了？data绑定数据时数据数组过长，我想选中有数据没有dom的呢？如果数据数组过短，只有dom没有数据如何选中？
那就是接下的操作：
- `.enter()` //选中只有数据没有dom的部分。其后面常跟随.append('div')，这里创建后数据是绑定了的。
- `.exit()` //选中的是只有dom没有数据的部分，其后面跟什么？.removeAll();
- `.merge(selectionA)` //将选中集与selectionA合并成新的选择集
``` javascript
/**
*data为数组
*/
update(dataSet){
var root=d3.select('div');
var divs = root.selectAll('div')
.data(dataSet)
//删除没有数据的dom
divs.exit().remove()
//为有数据没有dom的添加dom，并将有数据有dom的合并在一起，修改class
divs.enter().append("div")
.merge(divs)
.attr("class",function(d){return 's'+d})
}
```
思考：假如传递一个[1,2,3,4,5,6]会得到什么样的结构？
## 其他常见操作
- `.html()` 插入html代码
- `.text()` 插入文本
- `.on()` 添加事件监听
- `.filter()` 过滤
- `.stytle()` 修改/获取样式
- `.each()` 遍历
- `.node()` 返回dom对象
- `.nodes()`返回dom对象集
等等，在以后源码中遇到再补充，其余的请参考官方文档。
