如何选择无唯一标识符的子元素？求合适选择器方法

针对这种场景，有几种实用的选择器方法，结合你的HTML结构，推荐以下方案：

1. 使用querySelector（最简洁推荐） #

通过父容器的querySelector方法直接按标签名选择子元素，语法简洁且直接返回单个匹配元素，无需处理集合：

const wrapper = document.getElementById('wrapper');
const inputElem = wrapper.querySelector('input');
const buttonElem = wrapper.querySelector('button');

buttonElem.addEventListener('click', () => {
  inputElem.value = inputElem.value === "ON" ? "OFF" : "ON";
});

2. 结合父容器与getElementsByTagName #

如果习惯用标签选择，注意getElementsByTagName返回的是HTMLCollection集合，需要通过索引获取对应元素，同时你的原代码中.element是多余的错误写法，修正后如下：

const wrapper = document.getElementById('wrapper');
const inputElem = wrapper.getElementsByTagName('input')[0];
const buttonElem = wrapper.getElementsByTagName('button')[0];

buttonElem.addEventListener('click', () => {
  inputElem.value = inputElem.value === "ON" ? "OFF" : "ON";
});

3. 依赖子元素索引（不推荐） #

通过父容器的children属性按索引取元素，这种方法完全依赖DOM结构顺序，一旦HTML中子元素位置调换，代码就会出错，仅适用于结构绝对固定的场景：

const wrapper = document.getElementById('wrapper');
const inputElem = wrapper.children[0];
const buttonElem = wrapper.children[1];

buttonElem.addEventListener('click', () => {
  inputElem.value = inputElem.value === "ON" ? "OFF" : "ON";
});

对应HTML结构 #

<div id="wrapper">
  <input type="text" value="OFF" readonly/>
  <button type="button">Click Me</button>
</div>

内容的提问来源于stack exchange，提问作者Keizo Kita