javascript - 小动画只能与 .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>