我的javascript提示脚本不工作。访问和操作DOM

知识水平：初学者

我对代码的期望值：

用户单击名为open的类

“open”中的textNode将替换为-符号

然后我转到该类父类的第一个子类，它是一个

h2

标记，并获取标题，以便将其放置在名为“info”的“open”的同级中

信息终于显现出来了

三元运算符用于检查在

第一个子节点中是否只有一个3的
节点类型。如果是，则获取文本，如果不是，则获取整个innerHTML。
由于我从
getElementsByClassName
获得了一个html集合，因此我倾向于创建一个循环，以便修改样式

我为什么这样做或不使用jQuery:
我正在努力推动自己，学习如何在没有第三方库的情况下有效地操作dom。我会很感激关于改进我的代码的提示，但请保持基本结构不变，因为我仍然不喜欢高级捷径，我正在努力学习而不是复制

问题我不确定我操作dom的想法是否“正确”。我无法让它工作，我也不知道如何有效地告诉javascript只处理当前单击的元素


函数包装器（）{
var open=document.getElementsByClassName（打开）；
函数触发器（）{
var info=this.nextSibling；
var getTitle=this.parentNode.firstChild。（节点类型==3？文本内容：innerHTML）
this.removeChild（textContent）；
this.appendChild（document.createTextNode（'-'）；
info.appendChild（document.createTextNode（getTitle+'details'）；
info.style.visibility='visible'；
}
对于（i=0；i

HTML


堆栈溢出问题
+    
内容A。。。
堆栈溢出问题
+    
内容B。。。
你差点就成功了：

function trigger (){
  var info = this.nextElementSibling,
      getTitle = this.parentNode.firstElementChild.textContent;
  this.textContent = '-';
  info.appendChild(document.createTextNode(getTitle + 'details'));
  info.style.visibility = 'visible';
}
var open = document.getElementsByClassName('open');
for (i = 0; i < open.length; i++)
  open[i].addEventListener('click', trigger, false);


堆栈溢出问题
+    
内容A。。。
堆栈溢出问题
+    
内容B。。。

this.nextSibling
将为您提供表示元素之间空白的textNode。改用
.this.nextElementSibling

您无需执行任何遍历即可将
+
更改为
-
，因为您已经拥有
打开的
元素。只需为其指定新值

this.textContent = "-";


要分配
h2
内容，只需使用
.previouselement同级.textContent
并将其分配给
info.textContent

info.textContent = this.previousElementSibling.textContent



你做错的一些事情是：


此处使用无效语法：

var getTitle = this.parentNode.firstChild.(nodeType == 3 ? textContent : innerHTML)

应该是一个
if
语句，尽管该条件似乎不是必需的。您也可以在元素上使用
.textContent
，只要您不需要
HTML
表示

从技术上讲，您可以这样做：

var child = this.parentNode.firstElementChild;
var getTitle = child[child.nodeType === 3 ? "textContent" : "innerHTML"];

…但那太难看了。避免这种聪明的把戏

使用
textContent
作为对元素的引用：

this.removeChild(textContent);



可以改进的事情：


更改文本时，喜欢操作
.textContent
而不是创建新的文本节点。现有节点是可变的，因此可以重用

如果要将DOM的一部分复制到新位置，请不要使用
.innerHTML
，而是使用
.cloneNode（true）

否则，您将获取DOM节点，将它们序列化为HTML，然后立即将HTML解析为新节点。所有这些字符串操作都可以通过克隆来避免

我真的很自豪！我的逻辑并没有完全让我失望：）作为一个更有经验的程序员，你有什么增强技巧或者做些什么吗？@Asperger也许我会使用类似于
this.parentNode.querySelector（'.info'）的东西
而不是
this.nextElementSibling
，这样源代码中元素顺序的更改不会影响JS。我也在考虑这一点，但直到现在才知道如何实现这一点。使用sibling和querySelector有什么优点或缺点吗？在支持和支持方面performance@Asperger也许
querySelector
会稍微慢一点，因为它会在所有子体中搜索，但如果没有太多内容，这应该无关紧要。它从IE8开始就受到支持，而从IE9开始就受到支持（我认为在以前版本的IE
nextSibling
中忽略了空格，所以它的行为或多或少像
nextElementSibling
）hey眯着眼睛。关于第一点…我理解，但我想我很难想象它。你能给我举个第一句话的例子吗？空白部分有点混乱me@Asperger：很难显示空白，除了说明在键入HTML时，您使用了
换行符
字符和
选项卡
或
空格
字符来为HTML提供良好的缩进。这些都是文本字符，就像其他字符一样。因此，如果你有
foobarbaz
你有一个
元素
，后面跟着一个
文本节点
，后面跟着另一个
元素
。现在想象一下，
条
就是您的格式化空间。它仍然是一个文本节点。哦！那太糟糕了。我不知道它实际上会影响这些。是的，旧版本的IE不表示空白，但现在基本上HTML中的任何内容都表示为一个节点，因此您通常会使用
.nextElementSibling
，
.previousElementSibling
，
.firstElementChild
和
.lastElementChild
。我对我的三元运算符的糟糕语法很感兴趣。逻辑仅仅是多余的还是语法错误？如果节点类型不是纯文本，则可以设置整个innerHTML
var child = this.parentNode.firstElementChild;
var getTitle = child[child.nodeType === 3 ? "textContent" : "innerHTML"];

this.removeChild(textContent);

var copy = myElem.cloneNode(true);
targetElem.appendChild(copy);