小动画仅适用于 .data？

Question

我制作了这个小动画，以便我可以练习，它的目的是在单词的开头添加最后一个字母。 我认为它也应该与“.innerTEXT”而不是.data一起使用，但事实并非如此。您能解释一下.data 为何以及如何工作吗？在 w3schools 上，我了解到 .data 返回一个 URL，所以这不应该与 .innerTEXT 一起使用吗？

document.addEventListener('DOMContentLoaded', function() {
const div = document.getElementById('1');
const node = div.childNodes[0];
let text = node.data;

setInterval(() => {
text=text[text.length - 1] + text.substring(0, text.length-1);
node.data = text;
}, 100);
});

<div id="1">asdf</div>

Answer 1

请参阅下面带有innerText 的工作示例。

document.addEventListener('DOMContentLoaded', function() {
const div = document.getElementById('1');
let text = div.innerText;

setInterval(() => {
    text=text[text.length - 1] + text.substring(0, text.length-1);
    div.innerText = text;
}, 100);
});

<div id="1">asdf</div>

您也可以像以前一样对节点执行此操作，但您应该使用textContent：

document.addEventListener('DOMContentLoaded', function() {
const div = document.getElementById('1');
const node = div.childNodes[0];
let text = node.textContent;

setInterval(() => {
    text=text[text.length - 1] + text.substring(0, text.length-1);
    node.textContent = text;
}, 100);
});

<div id="1">asdf</div>