我的javascript提示脚本不起作用。(My javascript hint script does not work. Accessing and manipulating the DOM)

我的javascript提示脚本不起作用。(My javascript hint script does not work. Accessing and manipulating the DOM)

知识水平：初学者

我对我的代码的期望 ：

用户单击名为open的类。 'open'中的textNode被替换为 - 符号。 然后我转到该类的父级的第一个孩子，这是一个h2标签并获得标题，以便将其放在名为'info'的'open'兄弟中。 最后信息变得可见。

三元运算符是检查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>

Knowledge level: Beginner

What I expect from my code:

The user clicks on a class named open. The textNode within 'open' gets replaced with a - sign. Then I go to the first child of the parent of that class which is an h2 tag and get the title in order to place it within the sibling of 'open' named 'info'. At last info turns visible.

The ternary operator is to check if we have only a nodeType of 3 within the firstChild. If yes get the text, if not then get the entire innerHTML. Since I get a html collection from getElementsByClassName I tend to create a loop so that I can modify the style.

Why I do this or don't use jQuery: I am trying to push myself and learn how to effectively manipulate the dom without third party libraries. I would appreciate hints on improving my code but please keep the basic structure the same as I am still not into advanced short cuts and I am trying to learn not copy.

Problem I am not sure how "correct" my idea of manipulating the dom is. I could not get this to work, neither do I know how to effectively tell javascript to handle only the currently clicked element.

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>

最满意答案

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作为textContent的引用：

this.removeChild(textContent);

可以改进的事情：

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

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

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

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

this.nextSibling will give you the textNode representing the whitespace between the elements. Use .this.nextElementSibling instead.

You don't need to do any traversal to change the + to a - since you already have the open element. Just assign it the new value.

this.textContent = "-";

To assign the h2 content, simple use .previousElementSibling.textContent and assign it to info.textContent

info.textContent = this.previousElementSibling.textContent

Some things you were doing wrong were:

using invalid syntax here:

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

Should have been an if statement, though the condition doesn't really seem necessary. You can use .textContent on an element too, as long as you don't need the HTML representation.

Technically you could do this:

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

...but that's pretty ugly. Avoid clever tricks like this.

Using textContent as a reference to an element:

this.removeChild(textContent);

Things that could be improved:

When changing text, favor manipulating .textContent over creating new text nodes. The existing nodes are mutable and so can be reused.

If you want to copy a section of the DOM to a new location, don't use .innerHTML but instead use .cloneNode(true).

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

Otherwise you're taking the DOM nodes, serializing them to HTML and then immediately parsing the HTML into new nodes. All that string manipulation can be avoided simply by cloning.