Question

如何使用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>

Answer 1

您可以使用其innerText属性：

var element = document.getElementById("main");
var values = element.childNodes[1].innerText;
alert('the value is:' + values);
// Alec NX-01 command: 2151

上面应该打印第一个<li>元素的所有文本内容（Alec NX-01命令：2151）

要进一步细化并检索值Alec，请使用其他.childNodes[1]

var element = document.getElementById("main");
var values = element.childNodes[1].childNodes[1].innerText;
alert('the value is:' + values);

// Alec

Answer 2

对IE使用.nodeValue，对其他浏览器使用.textContent。

Answer 3

您可以使用innerText代替nodeValue来获取<li>及其子项内的所有文字。请参阅此处查看工作示例：http://jsfiddle.net/B7Lvd/

Answer 4

你可能正在寻找这个：

var values = element.childNodes[1].innerHTML;

Answer 5

使用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]);
    }
}

或者您可以使用值[0]，值[1]等单独访问孩子。这个问题有点难以理解，但我认为这就是您要做的事情。

Answer 6

您需要考虑仅包含空格的文本节点。在大多数浏览器中，这些节点在节点的childNodes集合中显示为文本节点，而在IE＆lt; 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);

在javascript中输出childNode值

6 个答案: