D3 可以选择一些 HTML 或 SVG 元素并更改它们的样式和/或属性： d3select 和 d3selectAll 。
这两个函数都将字符串作为其唯一参数。该字符串指定要选择的元素，并采用 CSS 选择器字符串的形式（例如 divitem ， #my-chart 或 g:first-child ）。
[//]: classed 是一个 boolean
除了将常量值传递给 style , attr , classed , property ,之外 text ， html 您还可以传入一个函数。例如：
该函数接受两个参数，通常命名为 d 和 i 。第一个参数 d 是 连接数据 （或“数据”）。 i 是选择中元素的 索引 。
此方法有两个参数：第一个是指定事件类型的字符串;第二个是触发事件时调用的函数（“回调函数”）。此回调函数有两个参数，通常命名为 e 和 d 。 e 是 DOM 事件对象并且 d 是连接数据。
最常见的事件包括（有关详细信息，请参阅 MDN 事件参考）：
在事件回调函数中， this 变量绑定到触发事件的 DOM 元素。这使我们能够执行以下 *** 作：
[//]:这 this 是一个 DOM 元素，而不是 D3 选择，因此如果您想使用 D3 修改它，您必须首先使用 d3select(this)
append 可以使用 D3和 insert 方法将元素添加到选择的元素中。可以使用 删除元素 remove 。
append 将一个元素附加到选择中的每个元素。如果元素已经有子元素，则新元素将成为 最后一个子元素 。第一个参数指定元素的类型。
insert 类似于 append 但它允许我们指定第二个参数， 该参数指定（作为 CSS 选择器）在哪个元素之前插入新元素 。
remove 从页面中 删除选择中的所有元素 。例如，给定一些圆圈，您可以使用以下方法删除它们：
大多数选择方法的返回值是选择本身。这意味着诸如 和 之类的选择方法 style 可以 attr 链接 on 起来。例如：
该 each 方法允许您为 选择的每个元素 调用一个函数。
回调函数有两个参数，通常命名为 d 和 i 。第一个参数 d 是 连接数据 。 i 是选择中元素的 索引 。 this 关键字是指选择中的当前 HTML 或 SVG 元素。
这是一个示例， each 用于为每个选择的元素调用函数。该函数计算索引是奇数还是偶数，并相应地修改圆：
该 call 方法允许调用一个函数， 选择本身 作为第一个参数传递给该函数。
call 在您想要对选择进行 *** 作的可重用函数时很有用。
例如， colorAll 获取一个选区并将选区元素的填充设置为橙色：
您可以使用 D3 的 filter 方法过滤选择。第一个参数是一个函数，它返回 true 是否应该包含元素。过滤的选择由该 filter 方法返回，因此您可以继续链接选择方法。
在此示例中，您过滤偶数元素并将它们着色为橙色：
通过调用 sort 和传入比较器函数对选择中的元素进行排序。比较器函数有两个参数，通常是 a 和 b ，它们代表被比较的两个元素的数据。如果比较器函数返回负数， a 将放在前面 b ，如果是正数， a 将放在后面 b 。
在获取子元素之前js肯定不知道总共有多少个子元素，所以子元素都是以元素集合的形式出现的（即使子元素只有一个甚至没有），然后再从中枚举出每个子元素，比如：
elemchildNodes[0] //这是第一个子元素
elemchildNodes[1] //这是第二个子元素，依此类推
此外，还可以使用children，它也是个集合，用法一样：
elemchildren[0] //这是第一个子元素
elemchildren[1] //这是第二个子元素，依此类推
childNodes和children的区别在于，前者会把文本元素（含回车、空格等）也作为子元素，后这则只把标签元素作为子元素
此外，如果知道子元素的ID、Name、Class或者标签名，也可以直接获取子元素，比如：
elemgetElementById("abc") //获取id为abc的子元素（ID具有唯一性，所以它可以直接获取）
elemgetElementsByName("xxx")[0] //获取name属性为xxx的第一个子元素（name属性允许重名，所以它是个集合）
elemgetElementsByClassName("hehe")[0] //获取class为hehe的第一个子元素（class属性也是可以重名的）
elemgetElementsByTagName("a")[0] //获取第一个a标签子元素
//获取指定节点的前一个兄弟节点
var id = documentgetElementById('mi');
consolelog(idpreviousElementSibling);//<li>苹果</li>
//获取指定节点的后一个兄弟节点
consolelog(idnextElementSibling);//<li>华为</li>
使用元素对象的getElementsByTagName('tagName')方法可以获得一个元素对象内所有的指定tagName标签的对象, 其返回值为一个数组, 然后遍历此数组即可 例如:
var ary = piecegetElementsByTagName("span"), i, spanObj;
for (i = 0; i < arylength; i++) {
spanObj = ary[i];
// 进行处理
}
当然, 前提是你的piece对象为一个有效的页面元素对象(如div对象)
var
smalls
=
documentgetElementById('small')getElementsByTagName('li');
这样可以获取所有id="small"下的
li
。
两种方式：
第一种纯js，使用递归：
<script>
/
第一个参数为页面元素对象或者数组
第二个参数为回调函数回调函数默认传递一个函数，即当前对象
/
function Each(obj,fun){
if('function'!==typeof(fun) || !obj){
return false;
}
if('undefined'!==typeof(objlength)){
for(var i=0;i<objlength;i++){
var o=obj[i];var r=fun(o)||true;
if(r===true){
r=Each(ochildren,fun);
if(!r) return false;
}
}
}else{
var r=fun(obj)||true;
if(r===true){
r=Each(objchildren,fun);
if(!r) return false;
}
}
}
</script>
用法：
//
Each(documentgetElementsByTagName("body"),function(obj){
if(objnodeName==="UL")//obj为当前遍历到的对象
return false;//如果返回false就会停止遍历
alert(objnodeName);
});
第二种方法，使用jquery:
$("body ")each(function(i, obj){
alert( "Item #" + i + ": " + obj );
});
<body>
<table class="tbeTarget" id="tbeTarget">
<tr>
<td class="tips1" id="tips1"> 12345abcd </td>
<td class="tips2" id="tips2"> 23456fvbg </td>
</tr>
</table>
<input type="button" onclick="getTdValue();" value="GETTDVALUE">
</body>
获取标签建议还是用ID来获取,简单方便
用getElementById("tbeTarget")可获取table
用getElementById("tips2")可获取到tips2
有ID的话,getElementById("tbeTarget")tips2也能得到你要的 tips2
特殊情况实在不能用ID时,也可用getElementsByTagName
var o=documentgetElementsByTagName("table"); 这个就获取到了所有的table标签,返回值是数组类型的
像你这个代码的话,只有个一个table,那 o[0]就是你要的table标签了
实在要用getElementByClassName的话,
var o=documentgetElementByClassName("tbeTarget");
var ot=ogetElementsByTagName("td"); //直接用ogetElementByClassName("tips2")应该也可以
for(var i=0;i<otlength;i++){
if(ot[i]class=="tips2"){
alert(ot[i]); //在这if里面,用ot[i]调用到的就是你要的 tips2了
}
}
Jquery的遍历，其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素。以某项选择开始，并沿着这条线进行移动，或向上（父级）、或向下（子级）、或水平（同级），直到找到目标元素为止，这种移动也被成为对DOM进行遍历。
其实对于DOM来说，这个不陌生，Jquery的遍历也就是在DOM树上上蹿下跳，当然这种上蹿下跳不是没有规则的，胡乱的找是让人鄙视的。通俗的说，在一颗树上（你也在树上，已经爬上去了，哈哈），以你所在的位置为起点，以树上有个桃子为目的地，你的这个起点也就是当前 this ,去移动去摘桃子的过程就是Jquery遍历，所以相对应的Jquery所衍生出的遍历方法可以分为三大类，即Jquery遍历之父级（祖先）、同级（同胞）和子级（后代）三种。
以上就是关于D3.js 选择全部的内容，包括:D3.js 选择、JS只有childrenNodes吗，没有childrenNOde那想访问子元素怎么写、js取父节点的兄弟节点的某个子元素怎么写等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）