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

Question

知识水平：初学者

我对代码的期望 ：

1. 用户单击名为open的类。
2. 'open'中的textNode被替换为-号。
3. 然后，我转到该类的父级的第一个孩子，这是一个h2标签，并获取标题以便将其放置在名为“ info”的“ open”的同级中。
4. 最后，信息变为可见。

三元运算符将检查firstChild是否只有3的nodeType 。 如果是，则获取文本，如果不是，则获取整个innerHTML。 由于我从getElementsByClassName获得了html集合，因此我倾向于创建一个循环，以便可以修改样式。

为什么要这样做或不使用jQuery：我试图推动自己，并学习如何在没有第三方库的情况下有效地操纵dom。 我希望能得到改进代码的提示，但是请保持基本结构不变，因为我仍不熟悉高级快捷方式，并且我尝试学习不复制。

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

http://jsfiddle.net/r7bL6vLy/28/

function wrapper () {
    var open = document.getElementsByClassName(open);
    function trigger (){
        var info = this.nextSibling;
        var getTitle = this.parentNode.firstChild.(nodeType == 3 ? textContent : innerHTML)

        this.removeChild(textContent);
        this.appendChild(document.createTextNode('-'));

        info.appendChild(document.createTextNode(getTitle + 'details'));
        info.style.visibility = 'visible';
    }
    for (i = 0; i < open.length; i++) {
        open[i].addEventListener('click', trigger, false);
    }
}

HTML

<div id='A'>
    <h1>Stackoverflow Question</h1>
    <div class='open'>+</div>    
    <div class='info'>Content A...</div> 
</div>

<div id='B'>
    <h1>Stackoverflow Question</h1>
    <div class='open'>+</div>    
    <div class='info'>Content B...</div> 
</div>

Answer 1

您几乎拥有它：

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);

 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 { width:50%; height:100%; margin:auto; } h1 { width:100%; font-size:160%; text-align:center; } .open { width:22%; margin:auto; padding:10% 0; line-height:0; font-size:150%; text-align:center; font-weight:bold; background:yellow; border-radius:100%; } .info { width:100%; padding:5%; margin:5% auto 0 auto; text-align:center; background:ghostwhite; visibility:hidden; } 

 <div id='A'> <h1>Stackoverflow Question</h1> <div class='open'>+</div> <div class='info'>Content A...</div> </div> <div id='B'> <h1>Stackoverflow Question</h1> <div class='open'>+</div> <div class='info'>Content B...</div> </div> 

请记住，元素之间的空格成为文本节点。 因此，最好使用firstElementChild和nextElementSibling而不是firstChild和nextSibling 。

Answer 2

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

• 您无需进行任何遍历即可将+更改为-因为您已经有了open元素。 只需为其分配新值即可。

   this.textContent = "-"; 

• 要分配h2内容， .previousElementSibling.textContent使用.previousElementSibling.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作为对textContent的引用：

   this.removeChild(textContent); 

有待改进的地方：

• 更改文本时，应.textContent于操作.textContent不是创建新的文本节点。 现有节点是可变的，因此可以重复使用。

• 如果要将DOM的一部分复制到新位置，请不要使用.innerHTML ，而应使用.cloneNode(true) 。

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

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