select与selectAll返回的结果都是d3的选择集合，并且都能进行集合运算，唯一不同的是集合的数量，select的数量恒小于等于1，并且总是返回第一个元素(如果存在的话)，最令人惊讶的是，select还难以建立集合的父子关系；而selectAll则是选择的所有元素。
假定文档中现有的dom元素如下所示：
<body> <ul id="user-list"> <li class="list-group-item">0001 </li> <li class="list-group-item">0002 </li> </ul></body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
测试的相关代码如下所示：
alert(d3.select('#user-list>li.list-group-item').size()); // 输出1alert(d3.selectAll('#user-list>li.list-group-item').size()); // 输出2// 假定数据集合的内容如下var datas = [{ name : "yiifaa", age : 32}, { name : "yiifee", age : 29}, { name : "yiifoo", age : 29}];// 集合操作d3.select('#user-list') .select('li.list-group-item') .data(datas) .enter() // 因为现有的集合里只有一个元素，所以还能新增一个元素 .append('li') .classed('list-group-item', true) .text(function(d) { return d.name; });// 如果把上面的第二个选择语句换为selectAllvar addItems = d3.select('#user-list') .select('li.list-group-item') .data(datas) .enter();// 现有的集合与比较的集合都是两个元素，所以新增的元素为0 alert(addItems.size()); // 输出0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
执行上面的代码后，输出的HTML节点如下所示，请仔细观察select新增元素的插入位置：
<body> <ul id="user-list"> <li class="list-group-item">0001 </li> <li class="list-group-item">0002 </li> </ul></body><!-- 新插入的元素竟然会放置在这里，真是让人惊讶 --><li class="list-group-item">yiifee</li>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10