除querySelector、querySelectorAll外的DOM选择方法及该API用法咨询

原生JS除了querySelector和querySelectorAll外，还有以下常用DOM选择方法：

• getElementById：通过元素id属性匹配，返回唯一的DOM元素，要求页面内id唯一，调用方式为document.getElementById('目标id')
• getElementsByClassName：通过元素class属性匹配，返回动态的HTMLCollection集合（DOM结构更新时集合内容会自动同步），也可在指定父元素下调用缩小选择范围，调用方式为document.getElementsByClassName('目标类名')
• getElementsByTagName：通过元素标签名匹配，返回动态的HTMLCollection集合，调用方式为document.getElementsByTagName('目标标签名')，比如获取所有p标签可以写document.getElementsByTagName('p')
• getElementsByName：通过元素的name属性匹配，多用于表单元素，返回NodeList集合，调用方式为document.getElementsByName('目标name属性值')

你需要遍历querySelectorAll返回的所有元素逐一绑定事件，同时通过事件对象获取当前点击的元素即可实现需求，完整代码如下：

<p>Player 1: Test 1</p> 
<p>Player 2: Test 2</p>

<script>
// 选中页面内所有p标签，返回静态NodeList集合
const allParas = document.querySelectorAll('p');
// 遍历每个p标签绑定点击事件
allParas.forEach(paraItem => {
  paraItem.addEventListener('click', updateName);
});

function updateName(event) {
  // event.target为当前被点击的p元素
  const clickedPara = event.target;
  const inputName = prompt('Enter your name');
  // 提取原有前缀，保证Player 1/2的标识不变
  const prefix = clickedPara.textContent.split(':')[0];
  clickedPara.textContent = `${prefix}: ${inputName}`;
}
</script>

如果不需要保留原来的Player 1/2前缀，直接修改赋值逻辑即可。

内容的提问来源于stack exchange，提问作者Idris Zaki