-1

我试图弄清楚它试图从下面的代码中得到什么：

var svg   = document.querySelector('svg'),
path  = document.querySelector('path');
var code = document.querySelector('#code');

上面引用的代码是：

<textarea id="code">var curve = new CurveAnimator(
 [206,47], [182,280],
 [90,234], [273,101]
);

var o = document.getElementById('img');
o.style.position = 'absolute';

curve.animate(2, function(point,angle){
  o.style.left = point.x+"px";
  o.style.top  = point.y+"px";
  o.style.transform =
    o.style.webkitTransform =
    o.style.MozTransform =
    "rotate("+angle+"deg)";
});
</textarea>

<section>
<svg viewBox="0 0 450 370" width="400px" height="370px" xmlns="http://www.w3.org/2000/svg" class="content">
    <path d="M50,300 C50,100 350,100 350,300 " />
</svg>
</section>

目标是获取这些 HTML 代码并将其放置在 javascript 本身中，这样它就不会在 HTML 代码的标签中查找它。但是，我无法找出它从那些querySelector中得到了什么，以便我自己去做。

任何帮助都会很棒！

当我做alert(document.getElementById('code')); 我明白了：

在此处输入图像描述

代码串：

var code = "var curve = new CurveAnimator([206,47], [182,280],[90,234], [273,101]);var o = document.getElementById('img');
o.style.position = 'absolute';curve.animate(2, function(point,angle){o.style.left = point.x+""px"";o.style.top  = point.y+""px"";o.style.transform = o.style.webkitTransform =o.style.MozTransform =""rotate("" + angle + ""deg)"";});"
4

3 回答 3

3 
document.querySelector('svg')  === document.getElementsByTagName('svg').item(0)
document.querySelector('path') === document.getElementsByTagName('path').item(0)
document.querySelector('#code') === document.getElementById('code')

querySelector返回第一个匹配的元素，或者null如果它没有找到任何元素。

document.querySelector

返回文档中与指定选择器组匹配的第一个元素（使用文档节点的深度优先前序遍历）。

您应该学习有关 CSS 选择器的教程。

于 2012-05-16T20:06:10.870 回答
1

你得到了正确的东西，如果你想要#code的内容，那么你需要做

alert(document.getElementById('code').innerHTML)

你现在所做的就是找到名为的节点code

将该代码放到您需要执行此操作的页面上，

var node = document.createElement("script");
node.innerHTML = document.getElementById('code').innerHTML;
document.getElementsByTagName("head").appendChild(node);

这将从您的文本区域中提取代码，在标题中创建一个脚本标签，并从您的 div 中添加内容..然后页面将准备好使用的代码，您所要做的就是调用它。

或者，您可以将此内容放在外部 js 文件中，并在文档加载时以类似的方式将其添加到页面中......

var node = document.createElement("script");
node.setAttribute("href","js/curveanimate.js") 
document.getElementsByTagName("head").appendChild(node)
于 2012-05-16T20:24:08.617 回答
0

您只需在末尾添加“.value”即可查看该属性

alert(document.getElementById('code').value)

这是您的代码的示例。

编辑：

这是否更符合您正在寻找的内容？

于 2012-05-16T20:54:11.047 回答