JavaScript代码未按预期工作

Question

这是我的项目。我想把userWord的字母放在五个框里。但是，当我使用这个JavaScript代码时，为什么只有每隔一个字母会出现？

http://codepen.io/abdulahhamzic/pen/xVMXQa

for (var i = 0; i < 5; i++) {  
        document.getElementsByClassName("letters")[input].childNodes[i].innerHTML = "<h1>" + userWord[i].toUpperCase() + "</h1>";
    }    

我似乎无法找到解决方案。:)

- Abdullah Hamzic

---

<h1>标签内的文本在childNodes列表中被视为一个节点。 - Paul L

你是想要制作一个猜词游戏吗？ - AlphaG33k

不完全是，这个想法有点不同，但这只是应用程序制作的起点。虽然我在JavaScript方面并不是很初学者。 :) - Abdullah Hamzic

Answer 1

childNodes 属性返回元素内的所有节点，包括文本节点和实际元素之间的空白。相反，尝试使用 children，它仅返回子元素，这正是您想要的。

例如：

for (var i = 0; i < 5; i++) {  
    document.getElementsByClassName("letters")[input].children[i].innerHTML = "<h1>" + userWord[i].toUpperCase() + "</h1>";
}

我在您的CodePen中测试了这个，它完全符合您的要求。更多细节请参见：

MDN文档：childNodes MDN文档：children

- Andrew Burgess

---

哦，我之前不知道children和childNodes之间的区别。现在我明白了。谢谢！ - Abdullah Hamzic

@АбдулахХамзиќ 随时可以！如果您能将我的提交标记为答案，那就太好了。 :) - Andrew Burgess

是的，当然！我甚至不知道有这样一个选项 :) - Abdullah Hamzic

Answer 2

那将是：

for (var i = 0; i < 5; i++) {
    document.getElementsByClassName("letter")[i].firstElementChild.textContent = userWord[i].toUpperCase();
}

或者

Array.prototype.slice.call(document.querySelectorAll(".letters > .letter"), 0, 5).forEach(function (node, index) {
    node.textContent = userWord[index].toUpperCase();
});

Documentation:

• ParentNode.firstElementChild
• Node.textContent
• Function.prototype.call()
• Document.querySelectorAll()
• Array.prototype.forEach()

- w35l3y

Answer 3

ChildNodes 会获取文本，你需要使用 .children()。

var word = 'МАЈКА';
var userWord;
var theNode;
var theClone;
var input = 0;
function game() {
        userWord = document.getElementById("text").value;
        theNode = document.getElementsByClassName("letters")[input];
        theClone = theNode.cloneNode(true);
        document.body.appendChild(theClone);
        for (var i = 0; i < 5; i++) {  
            document.getElementsByClassName("letters")[input].children[i].innerHTML = "<h1>" + userWord[i].toUpperCase() + "</h1>";
        }
        input++;
}

工作演示!! http://codepen.io/nicholasabrams/pen/yOZwNP

- AlphaG33k