javascript - 使用 JavaScript 从指定的根节点遍历 DOM？

Question

是否有一个例程或某些函数可以用来根据 ID、标签名称或其他属性返回我请求的元素，但无需使用 document 元素进行全局搜索？

这是我试图遍历的示例 DOM...

我已在要用作起点的元素(btnAction 输入控件)和要查找的元素(文本区域)上放置了一个标记。查找[*]。

    <table>
      <tr>
        <td align="center">
          <div id="ctl00_ContentPlaceHolder1_gvTETstudents_ctl06_upAction1">
            <table>
              <tbody>
                <tr>
                  <td style="vertical-align: middle; text-align: left"></td>
                </tr>
                <tr align="center">
                  <td colspan="1" style=
                  "vertical-align: middle; text-align: center">
[*]                 <input tabindex="0" name=
                    "ctl00$ContentPlaceHolder1$gvTETstudents$ctl06$btnADDaction"
                    value="ADD" id=
                    "ctl00_ContentPlaceHolder1_gvTETstudents_ctl06_btnADDaction"
                    type="submit">
                  </td>
                </tr>
                <tr>
                  <td colspan="1" style="text-align: center">
                    <div style=
                    "display: none; position: fixed; z-index: 100001; left: 951.5px; top: 478.5px;"
                    id=
                    "ctl00_ContentPlaceHolder1_gvTETstudents_ctl06_upAction2">
                      <div id=
                      "ctl00_ContentPlaceHolder1_gvTETstudents_ctl06_pnlACTION"
                      class="pnlACTION">
                        <div id="divHDR">
                          <span id=
                          "ctl00_ContentPlaceHolder1_gvTETstudents_ctl06_lblActionHdr">
                          Enter actions for Caine McClelland</span>
                        </div>
                        <div id="divBOD">
                          <table style="width: 98%; text-align:left">
                            <tbody>
                              <tr>
                                <td colspan="2">
                                  Please enter action item:<br>
[*]                               <textarea tabindex="0" name=
                                  "ctl00$ContentPlaceHolder1$gvTETstudents$ctl06$txtAction"
                                  rows="3" cols="20" id=
                                  "ctl00_ContentPlaceHolder1_gvTETstudents_ctl06_txtAction"
                                  style="width:98%;">
</textarea> <span id="ctl00_ContentPlaceHolder1_gvTETstudents_ctl06_rfvAction"
                                  style="color:Red;visibility:hidden;">*
                                  Required</span>
                                </td>
                              </tr>
                              <tr>
                                <td colspan="2">
                                  Select staff assigned to this task:<br>
                                  <select tabindex="0" name=
                                  "ctl00$ContentPlaceHolder1$gvTETstudents$ctl06$ddlActionStaff"
                                  id=
                                  "ctl00_ContentPlaceHolder1_gvTETstudents_ctl06_ddlActionStaff">
                                  <option value="0">
                                      Select...
                                    </option>
                                    <option value="TECNQ204">
                                      Rob Connolly
                                    </option>
                                    <option value="TECNQ143">
                                      Mary Elphick
                                    </option>
                                    <option value="TECNQ210">
                                      Rebecca Edwards
                                    </option>
                                    <option value="TECNQ136">
                                      Wayne Santo
                                    </option>
                                  </select> <span id=
                                  "ctl00_ContentPlaceHolder1_gvTETstudents_ctl06_rfvStaff"
                                  style=
                                  "display:inline-block;color:Red;width:98%;visibility:hidden;">
                                  * Required</span>
                                </td>
                              </tr>
                              <tr>
                                <td colspan="2" style="text-align: center">
                                  <input tabindex="0" name=
                                  "ctl00$ContentPlaceHolder1$gvTETstudents$ctl06$btnActionOK"
                                  value="OK" id=
                                  "ctl00_ContentPlaceHolder1_gvTETstudents_ctl06_btnActionOK"
                                  type="submit"> <input tabindex="0" name=
                                  "ctl00$ContentPlaceHolder1$gvTETstudents$ctl06$btnActionCANCEL"
                                  value="CANCEL" id=
                                  "ctl00_ContentPlaceHolder1_gvTETstudents_ctl06_btnActionCANCEL"
                                  type="submit">
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                    <div class="modalBackground" style=
                    "display: none; position: fixed; left: 0px; top: 0px; z-index: 10000; width: 1903px; height: 2986px;"
                    id=
                    "ctl00_ContentPlaceHolder1_gvTETstudents_ctl06_ajaxMPE_backgroundElement">
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
      </tr>
    </table>

本质上，我想做的是从 btnADDaction asp:Button 控件调用 JavaScript 函数(例如 onclick="findme(this,'txtAction')")，当然传递 this 作为按钮元素，但是相关的 ( DOM 树中的某个位置)元素通过 ID，在本例中是来自 asp:TextBox 控件的“txtAction”。

我当然尝试过 document.getElementByID("txtAction") ，但这从 DOM 树的顶部开始。如果我有另一个完全不相关的 txtAction 控件怎么办？

谢谢

Answer 1

您可能不需要 jquery。刚刚创建了一个基本的普通函数，通过测试元素本身并在 DOM 树中向上遍历其祖先来获取与选择器匹配的第一个元素。

/**
 * @param {HTMLElement} entry
 * @param {string} selector
 * @return {HTMLElement | null}
 */ 
function closest(entry, selector) {
  var parent = entry;
  var element = null;

  while (parent && !element) {
    element = parent.querySelector(selector);
    parent = parent.parentNode;
  }
  return element;
}

使用

var entry = document.querySelector('input'); // your starting point. 
var textarea = closest(entry, 'textarea'); // <textarea>...</textarea>