我在追随https://www.w3resource.com/javascript-exercises/javascript-basic-exercises.php，但在练习5上卡住了:
- 编写一个JavaScript程序，以正确的方向旋转字符串"w3resource".这是通过定期从字符串末端删除一个字母并将其附加到前面来完成的.
我的第一个 idea 是创建一个变量并使用queryselector将我的内容放入我的h1中，现在我正在寻找一种方法来更改该字符串.我知道在JS中，字符串是不变的，所以我的 idea 是基于使用不同的变量来做到这一点，直到那时我的 idea 都很好，但我陷入了如何在h1元素内的文本上获得所需索引的问题，这只是产生了错误的长度，我不知道为什么.我已经在MDN网站上看了很多JS的内容，但找不到任何对我有帮助的东西.
let MyString = document.querySelector(".rotate_h1_content");
let output = document.querySelector(".output");
output.textContent = MyString.childNodes[0].length;body{
background-color: black;
}
h1{
margin: 0px;
padding: 0px;
}
.rotate_h1_content, .rotate_content{
margin: 0px;
padding: 0px;
}
.outer_content{
display: block;
width: 100%;
height: 200px;
margin-top: 200px;
margin-left: 0px;
margin-right: 0px;
padding: 1px;
text-align: center;
color: white;
}<!DOCTYPE html>
<html>
<head>
<meta name="Training">
<meta name="author" content="Vitor Mota">
<title>Training</title><!--Practice-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Estou colocando em ingles, mas vou traduzindo nos comentarios-->
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="cssFile2.css">
<script src="JsExc2.js" defer></script>
</head>
<body >
<div class="outer_content">
<div class="rotate_content">
<h1 class="rotate_h1_content">
Any string
</h1>
<h2 class="output">
</h2>
</div>
</div>
</body>
</html>我试着使用子 node 和长度来查看我的字符串是否有正确的长度，但只得到了那个向后47的数字，而且我的第一个字符在20索引上，有人能帮我吗？我认为可能是填充物和页边距给了这些额外的字符，但事实并非如此