为具有相同 class 名称的所有 div 绘制 canvas 行

Question

我正在制作一个文档，它将通过用户输入构建一个树型图。我正在尝试将样式 divs 连接到它们从 canvas 行分支的相对 div 。我一直在使用 .getBoundingClientRect() 来获取位置，但是 div 是静态的内联块，所以每次添加新的时，整个结构都会改变。

所以，这是我在每次创建新分支时调用 'for loop' 的尝试，以重新绘制所有 canvas 线。

var lines = function(){
    var blocks=document.getElementsByClassName('block');
for (i=1;i<blocks.length-1;i++){
    var blockDiv = blocks[i]
    var offset = blockDiv.getBoundingClientRect();
    var xa = offset.left+40;
    var ya = offset.top+40;
    var blockFrom = blockDiv.parentNode.parentNode.previousSibling;
    var offsets = blockFrom.getBoundingClientRect();
    var yb = offsets.top+40;
    var xb = offsets.left+40;
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.moveTo(xa,ya);
    ctx.lineTo(xb,yb);
    ctx.stroke();   
  }
}

这里有一个 jsfiddle 所以你可以看到 div 的一般结构。

当函数被调用时，我没有得到 canvas 行和
的控制台错误 166 未捕获类型错误：blockDiv.parentNode.parentNode.previousSibling.getBoundingClientRect 不是函数<br>
我被这个难住了，非常感谢您的帮助。
我是 canvas、javascript 和一般编码的新手，所以任何其他建设性的批评也将不胜感激。 :)

请只使用 Vanilla js！

Answer 1

问题是这样的：

Gecko-based browsers insert text nodes into a document to represent whitespace in the source markup. Therefore a node obtained, for example, using Node.firstChild or Node.previousSibling may refer to a whitespace text node rather than the actual element the author intended to get.

https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling

因此，更改此行：

var blockFrom = blockDiv.parentNode.parentNode.previousSibling;

对此：

var blockFrom = blockDiv.parentNode.parentNode.previousSibling.previousSibling;

为具有相同 class 名称的所有 div 绘制 canvas 行

draw canvas lines to all divs with the same class name

html

javascript

html5-canvas