代码之家 › 专栏 › 技术社区 › AnnaCICI

按子项获取项目ID(vanilla JS)

puppeteer web html javascript

AnnaCICI · 技术社区 · 6 年前

我想检查一下 form 有 选项CAD (在第7级),如果有,则获取表单id。

// first level   
<form id="15" method="post" action="/open a new page" target="_blank">

        //second level- 1                               
        <div>   
            <input type="hidden" id="CHECK" name="CHECK">
        </div>

        //secode leve - 2
        <table cellpadding="0" cellspacing="0" border="0" width="100%">

            // 3rd level
            <tbody>

                //4th level
                <tr>    

                  // 5th level                                                      
                  <td>
                    <input type="hidden" name="name" value="Frank">                                                             
                    <input type="hidden" name="identifier" value="12345">
                    <input type="hidden" name="code" value="299 ">
                    <input type="hidden" name="type" value="060201">
                    <input type="hidden" name="claim" value="4567">
                    <input type="hidden" name="departement" value="IT">
                    <input type="hidden" name="city" value="S25">
                    <input type="hidden" name="num" value="28936">
                    <input type="hidden" name="typeClient" value="2">
                    <input type="hidden" name="numTel" value="4444">
                    <input type="hidden" name="prod" value="MMM">
                    <input type="hidden" name="label" value="doc">

                    //6th level
                    <select name="docToSeize" style="width:150px" class="form1">

                           // 7th levle
                           <option value="11">RAP </option>
                           <option value="12">CAD </option>
                           <option value="18">GGO</option>
                           <option value="1A">HYU</option>
                     </select>

                   </td>

                   <td valign="top">
                       <input type="submit" class="boutonbleuok" style="cursor: hand" value="ok" onclick="label">
                   </td>
               </tr>
            </tbody>
        </table>
    </form>

2 回复 | 直到 6 年前

Ele 6 年前

您可以使用该功能 querySelectorAll 获取选项和函数 closest 查找父窗体。

Array.prototype.forEach.call(document.querySelectorAll('[name="docToSeize"] option'), function(opt) {
  if (opt.textContent.trim() === 'CAD') {
    console.log(opt.closest('form').getAttribute('id'));
    return;
  }
});

form {
  display: none
}

<form id="15" method="post" action="/open a new page" target="_blank">

  //second level- 1
  <div>
    <input type="hidden" id="CHECK" name="CHECK">
  </div>

  //secode leve - 2
  <table cellpadding="0" cellspacing="0" border="0" width="100%">

    // 3rd level
    <tbody>

      //4th level
      <tr>

        // 5th level
        <td>
          <input type="hidden" name="name" value="Frank">
          <input type="hidden" name="identifier" value="12345">
          <input type="hidden" name="code" value="299 ">
          <input type="hidden" name="type" value="060201">
          <input type="hidden" name="claim" value="4567">
          <input type="hidden" name="departement" value="IT">
          <input type="hidden" name="city" value="S25">
          <input type="hidden" name="num" value="28936">
          <input type="hidden" name="typeClient" value="2">
          <input type="hidden" name="numTel" value="4444">
          <input type="hidden" name="prod" value="MMM">
          <input type="hidden" name="label" value="doc"> //6th level
          <select name="docToSeize" style="width:150px" class="form1">

                           // 7th levle
                           <option value="11">RAP </option>
                           <option value="12">CAD </option>
                           <option value="18">GGO</option>
                           <option value="1A">HYU</option>
                     </select>

        </td>

        <td valign="top">
          <input type="submit" class="boutonbleuok" style="cursor: hand" value="ok" onclick="label">
        </td>
      </tr>
    </tbody>
  </table>
</form>

CertainPerformance 6 年前

选择表单,然后选择表单中的选项并对其进行迭代。

const form = document.querySelector('form');
const options = [...form.querySelector('select[name=docToSeize]').children];
if (options.some(option => option.textContent.trim() === 'CAD')) console.log(form.id);

<form id="15" method="post" action="/open a new page" target="_blank">
<select name="docToSeize" style="width:150px" class="form1">
  <option value="11">RAP </option>
  <option value="12">CAD </option>
  <option value="18">GGO</option>
  <option value="1A">HYU</option>
</select>
</form>