原生JS技术需求：通过子元素取元素ID及检测表单7级CAD选项并获表单ID

Hey there! Let's tackle your two vanilla JavaScript questions with clear, practical solutions:

1. 获取子元素对应的父/祖先元素ID（Vanilla JS实现） #

If you need to grab the ID of a parent or ancestor element starting from a child element, here are three reliable approaches:

Method 1: Use Element.closest() (Most Recommended) #

This modern method finds the nearest ancestor (including the element itself) that matches a CSS selector. It's clean and efficient:

// 假设你已经获取了子元素，比如通过ID选择器
const childElement = document.getElementById('CHECK');

// 查找最近的<form>祖先元素并获取其ID
const parentForm = childElement.closest('form');
if (parentForm) {
  const formId = parentForm.id;
  console.log('找到的表单ID:', formId);
} else {
  console.log('未找到匹配的祖先表单');
}

Note: closest() works in all modern browsers (Chrome, Firefox, Edge, Safari 10.1+).

Method 2: Traverse Upwards with parentElement #

If you need broader browser support (or want to manually control traversal), you can loop up through parent elements:

function getAncestorId(childEl, targetTagName) {
  let currentElement = childEl.parentElement;
  // 逐级向上遍历直到找到目标标签或到达文档根节点
  while (currentElement) {
    if (currentElement.tagName.toLowerCase() === targetTagName.toLowerCase()) {
      return currentElement.id;
    }
    currentElement = currentElement.parentElement;
  }
  return null; // 未找到时返回null
}

// 使用示例：从#CHECK元素找对应的<form>ID
const child = document.getElementById('CHECK');
const formId = getAncestorId(child, 'form');
if (formId) {
  console.log('表单ID:', formId);
}

Method 3: Target Specific ID Patterns #

If you're targeting an ancestor with a specific ID format (e.g., numeric IDs), adjust the selector in closest():

const child = document.getElementById('CHECK');
const targetAncestor = child.closest('[id^="1"]'); // 匹配ID以"1"开头的元素
if (targetAncestor) {
  console.log('目标元素ID:', targetAncestor.id);
}

2. 检查表单第7层级是否存在值为CAD的选项并获取表单ID #

First, let's clarify the hierarchy based on your provided HTML snippet:

1. <form> (Level 1)
2. <table> (Level 2, direct child of form)
3. <tbody> (Level 3)
4. <tr> (Level 4)
5. <td> (Level 5)
6. <select> (Assumed Level 6, child of <td>)
7. <option value="CAD"> (Level 7, child of <select>)

Here's how to check for the CAD option in the 7th level and grab the form's ID:

// 遍历页面上所有<form>元素
document.querySelectorAll('form').forEach(form => {
  // CSS选择器：6个`>`表示从form开始的第7层子元素（form是第1层，每一个`>`代表下一级）
  const seventhLevelElements = form.querySelectorAll('* > * > * > * > * > *');
  
  // 检查这些元素中是否存在value为"CAD"的<option>
  const hasCADOption = Array.from(seventhLevelElements).some(element => {
    return element.tagName === 'OPTION' && element.value === 'CAD';
  });

  if (hasCADOption) {
    console.log('符合条件的表单ID:', form.id);
    // 如果只需要第一个匹配的表单，可以在这里添加return/break逻辑
    // 例如：alert(`找到表单ID：${form.id}`); return;
  }
});

Key Notes: #

• If the 7th level structure differs (e.g., no <select>), adjust the CSS selector to match your actual HTML.
• Array.from() converts the NodeList from querySelectorAll() into an array so we can use the some() method.
• The code handles cases where a form doesn't have 7 levels (it will just skip over it).

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