Question

我有代码，假设找到div的第一个子（div）而不是更改其内容，这是我的代码：

var headDiv = document.getElementById('sliderContainer');
var childDiv = headDiv.childNodes[0];
childDiv.innerHTML = 'Working';

这似乎不起作用，这里的问题是什么？

直播：http://jsbin.com/aqozef/edit#javascript,html,live

完整代码：

<!doctype html>
<html>
<head>
    <script type="javascript">
        function scrollit(){
            var headDiv = document.getElementById('sliderContainer');
            var childDiv = headDiv.childNodes[0];
            childDiv.innerHTML = 'Working';
        }
    </script>
    <style type="text/css">
        #sliderContainer{width:100px;height:100px;overflow:hidden;}
        .sliderContent{width:100px;height:100px;float:left;}
    </style>
</head>

<body>
    <div id="sliderContainer">
        <div class="sliderContent" style="background-color:blue;">s</div>
        <div class="sliderContent" style="background-color:yellow;">a</div>
    </div><br/><br/>
    <button onclick="scrollit();">scroll it</button>
</body>
</html>

Answer 1

第一个子节点可能是文本节点而不是元素节点。例如，当你的HTML看起来像这样时就是这种情况：

<div>
    <div> I'm the first element child</div>
</div>

第一个div之后的换行符和第二个之前的空格是一个文本节点。

要获取元素节点，请使用children ^[MDN]：

headDiv.children[0].innerHTML = "Working";

注意： IE6 - IE8也包含children中的注释节点。只要你没有评论，就可以了。

或者，您可以遍历子节点，查找第一个元素节点：

var child = element.firstChild;
while(child && child.nodeType !== 1) child = child.nextSibling;

参考： Node.firstChild，Node.nodeType，Node.nextSibling。

如果您要更改文本节点的值，则必须更改nodeValue ^[MDN]属性：

node.nodeValue = "Working";

改变第一个孩子的文字

1 个答案: