在这种情况下，为什么我无法访问`element.firstChild`？

Question

＆＃13;

＆＃13;

function setText() {
  // doesn't change... why not!?
  document.getElementById("demo").firstChild.innerHTML = 'changed!';
}

//calling the function with setTimeout to make sure the HTML is loaded
setTimeout(setText, 500);

＆＃13;

<div id="demo">
  <p>first</p>
  <p>second</p>
</div>

＆＃13;

＆＃13;

＆＃13;

我似乎无法将<p>first</p>更改为<p>changed!</p>。为什么不呢？

Answer 1

元素内的空格被视为文本，文本被视为节点。

如果您将HTML更改为：

void strrev(char *s) {
    int i,n = strlen(s);
    for(i=n/2 ; i>=0 ; i--) {
        char c = s[i];
        s[i] = s[n-i-1];
        s[n-i-1] = c;
    }
}

它有效。试试吧。

或者您可以使用node.firstElementChild来忽略前导文本，或者使用像jQuery这样的库来处理这个问题。

Answer 2

关于安慰document.getElementById("demo").firstChild我明白了

突出显示的部分显示空文本。这可能是因为它不是第一个p元素。

相反，您可以使用firstElementChild

＆＃13;

＆＃13;

function setText() {
  document.getElementById("demo").firstElementChild.innerHTML = 'changed!';
}
setTimeout(setText, 1000);

＆＃13;

<div id="demo">
  <p>first</p>
  <p>second</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您始终可以使用children方法或querySelector

function SetText(){
  document.getElementById('demo').children[0].textContent = "changed"
}

或者

function SetText() {
  document.querySelector('#demo > *').textContent = "changed"
}

Answer 4

使用＆＃34; .firstChild＆＃34;如果有的话，将选择div中的空格。在你的情况下有一些。你有两个选择，要么拿我们的空格/换行，要么改用这个函数......

function setText() {
  // doesn't change because the firstChild isn't the <p> element...
  // try using firstElementChild
  document.getElementById("demo").firstElementChild.innerHTML = 'changed!';
}