JSQuerySelector：如何在不需要HTML标记的情况下将HTML标记数据硬编码到javascript中

我试图从下面的代码中找出它想要得到什么：

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>

querySelector

返回第一个匹配的元素，如果未找到任何元素，则返回

null

文档查询选择器

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

---

你应该学习一个关于CSS选择器的教程。

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

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)

---

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

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

编辑：

---

document.querySelector（'svg'）==document.getElementsByTagName（'svg'）[0]

：-）（路径相同），但不

querySelector（）

只返回第一个匹配的元素？以及对@FlorianMargaine…=）衷心的+1）+1对于

null

/

未定义的
行为，我不知道@尼尔：有什么区别吗？@FlorianMargaine。我更新了，neil给出了更好的语法。它做的是开箱即用的| |空的事情。使用
[0]
阅读@FlorianMargaine将集合视为一个数组，因此越界引用就像使用
时常规JavaScript未定义的属性访问一样工作（如果您从事这类工作，会触发严格警告）。项（0）
调用集合上的方法，因此，它将其参数转换为整数，如果超出范围，则返回null。Protip：在处理DOM元素时，使用
console.log
而不是
alert
。您得到了正确的结果，如果您想要#code的内容，则需要执行
alert（document.getElementById（'code'）.innerHTML）
您现在所做的就是找到名为
code
@StealthRT的节点
html（）
是jQuery，你需要
。据我所知，如果你准备使用jQuery，就没有必要（？）使用
document.querySelector（）
（尽管有人可能知道一些不寻常的情况）。一般来说，jQuery将完成所有
document的工作。querySelector（）
还可以做更多的工作。@Beetroot Beetroot我不一定只是为了好玩而使用jQuery……我想这取决于你的知识水平/你想在简单的旧js中做多少额外的编码，但是它给站点增加了一个开销，这对于您的需求来说可能是多余的…为什么我尝试这样做：var code='var curve=new CurveAnimator（[206,47]，[182280]，[90234]，[273101]）；var o=document.getElementById（\'img\'）；o、 style.position=\'absolute\'；动画（2，函数（点，角度）{o.style.left=point.x+“px”；o.style.top=point.y+“px”；o.style.transform=o.style.webkitttransform=o.style.MozTransform=“旋转（“+angle+”deg）”；}）；'没用？这不是一个完全不同的问题吗？哈哈，请给我正确的标记！lolit似乎只是一个字符串，但我不认为转义在单引号内起作用……请尝试将其括在双引号内并转义
“
相反……可能会做这个小把戏，OP说：目标是将这些HTML代码放在javascript本身中，这样就不会在HTML代码的标记中寻找它。然而，我无法从那些提问者身上找到答案，以便自己去做；请避免通过评论将回答者拖到问题范围之外。如果你有一个新问题，并且你能够自己将其表述为一个适当的问题，请改为提出一个新问题。@tdwill:正确，但我如何将代码放入javascript中，而不必在HTML标记中找到它？这似乎只是动态地将代码放入HTML标记中。我想不必在标签上做任何事情。
var node = document.createElement("script");
node.setAttribute("href","js/curveanimate.js") 
document.getElementsByTagName("head").appendChild(node)

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