javascript 在javascript中输出childNode值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8826966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
output the childNode value in javascript
提问by Leoh
how can i use js to output the value of a childNode with an alert(); function or creating a new element. for example.. have this:
我如何使用 js 输出带有 alert() 的 childNode 的值；函数或创建新元素。例如..有这个：
<ul id="main">
<li>
<h2>Alec</h2>
<p>NX-01</p>
<p>command: 2151</p>
</li>
<li>simple</li>
<li>William</li>
</ul>
<script>
var element = document.getElementById("main");
var values = element.childNodes[1].nodeValue; // the text simple this i want to output
alert('the value is:' + values);
</script>
回答by Michael Berkowski
You can use its innerTextproperty:
您可以使用它的innerText属性：
var element = document.getElementById("main");
var values = element.childNodes[1].innerText;
alert('the value is:' + values);
// Alec NX-01 command: 2151
The above should print all the text contents of the first <li>element (Alec NX-01 command: 2151)
以上应打印第一个<li>元素的所有文本内容（Alec NX-01 命令：2151）
To further refine it and retrieve the value Alecfor example, use another .childNodes[1]
Alec例如，要进一步细化它并检索值，请使用另一个.childNodes[1]
var element = document.getElementById("main");
var values = element.childNodes[1].childNodes[1].innerText;
alert('the value is:' + values);
// Alec
回答by Halcyon
Use .nodeValuefor IE and .textContentfor other browsers.
使用.nodeValue了IE和.textContent其他浏览器。
回答by Colin O'Dell
You can use innerTextinstead of nodeValueto get all the text inside of the <li>and it's children. See here for a working example: http://jsfiddle.net/B7Lvd/
您可以使用innerText而不是nodeValue获取里面的所有文本<li>和它的孩子。请参见此处的工作示例：http: //jsfiddle.net/B7Lvd/
回答by bardiir
Are you possibly looking for this:
你可能正在寻找这个：
var values = element.childNodes[1].innerHTML;
回答by ryandlf
Using jQuery would make this a lot easier, but with vanilla javascript you could do it this way.
使用 jQuery 会使这更容易，但是使用 vanilla javascript 你可以这样做。
var element = document.getElementById("main");
var values = element.childNodes;
for(var i in values) {
if(values[i].innerHTML == 'simple') {
alert('The value is: ' +values[i]);
}
}
Or you can access the children individually with values[0], values[1] etc. The question is slightly difficult to understand, but I think that is what you're looking to do.
或者您可以使用 values[0]、values[1] 等单独访问孩子。这个问题有点难以理解，但我认为这就是您想要做的。
回答by Tim Down
You need to take text nodes containing only whitespace into account. In most browsers these nodes appear as text nodes in the childNodescollection of a node, whereas in IE < 9 they are ignored. Therefore you need check the nodeTypeproperty while iterating through childNodes. Also, nodeValuewill not get you the text within the <li>element you're interested in: you need to use the DOM standard textContentproperty (falling back to the similar innerTextproperty in browsers that do not support textContent).
您需要考虑仅包含空格的文本节点。在大多数浏览器中，这些节点在节点集合中显示为文本childNodes节点，而在 IE < 9 中它们被忽略。因此，您需要nodeType在迭代时检查属性childNodes。此外，nodeValue不会为您提供<li>您感兴趣的元素中的文本：您需要使用 DOM 标准textContent属性（innerText在不支持的浏览器中回退到类似的属性textContent）。
function getChildElement(element, index) {
var elementCount = 0;
var child = element.firstChild;
while (child) {
if (child.nodeType == 1) { // Node with nodeType 1 is an Element
if (elementCount == index) {
return child;
}
elementCount++;
}
child = child.nextSibling;
}
}
var element = document.getElementById("main");
var child = getChildElement(element, 1);
var text = child.textContent || child.innerText;
alert("Found element with text " + text);
