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

Question

知识水平:初级

我对代码的期望:

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

三元运算符用于检查 firstChild 中是否只有一个 nodeType 为 3。如果是，则获取文本，如果不是，则获取整个 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

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

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

  this.textContent = "-";
  

• 要分配 h2 内容，只需使用 .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 作为对元素的引用:

  this.removeChild(textContent);
  

可以改进的地方:

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

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

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

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