JavaScript:获取字段集下的所有表单元素

<fieldset id="myFieldset">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <select name="country">
    <option value="usa">USA</option>
    <option value="canada">Canada</option>
  </select>
  <button type="submit">Submit</button>
</fieldset>

const fieldset = document.getElementById('myFieldset');
const elements = fieldset.querySelectorAll('input, textarea, select, button');
elements.forEach(el => {
  console.log(el);
});

const fieldset = document.getElementById('myFieldset');
const elements = [];
for (let child of fieldset.children) {
  if (child.tagName === 'INPUT' || child.tagName === 'TEXTAREA' || 
      child.tagName === 'SELECT' || child.tagName === 'BUTTON') {
    elements.push(child);
  }
}
elements.forEach(el => {
  console.log(el);
});

document.addEventListener('DOMContentLoaded', function() {
  const fieldset = document.getElementById('myFieldset');
  const elements = fieldset.querySelectorAll('input, textarea, select, button');
  elements.forEach(el => {
    console.log(el);
  });
});

const fieldset = document.getElementById('myFieldset');
const elements = Array.from(fieldset.querySelectorAll('input, textarea, select, button'));

const observer = new MutationObserver((mutationsList) => {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      const newElements = Array.from(fieldset.querySelectorAll('input, textarea, select, button'));
      console.log('New elements detected:', newElements);
    }
  }
});

observer.observe(fieldset, { childList: true });