JavaScript 获取元素的首字母

Question

我想制作一个程序，获取所有具有相同 class 的元素的第一个字母。

var email = document.querySelector(".email");
var letter = document.querySelector(".letter");

const nameletter = email.textContent;
letter.innerHTML = nameletter.charAt(0);

.letter {
border: 1px solid red;
display: inline-block;
padding: 5px;
background-color: yellow;
}

<h1 class="letter"></h1>
<span class="email">email@email.com</span>
<br>
<h1 class="letter"></h1>
<span class="email">anotheremail@email.com</span>

如您所见，我只能从具有 'email' class 的第一个元素中获取第一个字母。有什么办法可以得到第二个元素的第一个字母吗？

Answer 1

您应该改用 querySelectorAll 并迭代它们：

var email = document.querySelectorAll(".email");
var letter = document.querySelectorAll(".letter");

for(var i = 0; i < email.length; i++) {
  const nameletter = email[i].textContent;
  letter[i].innerHTML = nameletter.charAt(0);
}

.letter {
border: 1px solid red;
display: inline-block;
padding: 5px;
background-color: yellow;
}

<h1 class="letter"></h1>
<span class="email">email@email.com</span>
<br>
<h1 class="letter"></h1>
<span class="email">anotheremail@email.com</span>

JavaScript 获取元素的首字母

JavaScript get the first letter of the elements

html

javascript

dom

element