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

是否有一个例程或某个函数可用于返回我根据ID、标记名或其他属性请求的元素，但不使用

文档

元素进行全局搜索

下面是我正在尝试遍历的DOM示例

我已经在我想要用作起点的元素（btnAction输入控件）和我想要查找的元素（textarea）上放置了一个标记。查找[*]

    <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>

[*]                 
输入Caine McClelland的操作
请输入操作项：

[*]                               
*
要求的
选择分配给此任务的员工：

选择。。。
罗布·康诺利
玛丽·艾尔菲克
丽贝卡·爱德华兹
韦恩·桑托
*必需的

本质上，我试图做的是从btnADDaction

asp:Button

控件调用一个JavaScript函数（比如onclick=“findme（this，'txtAction'）”），当然将

this

作为Button元素传递，但是通过ID传递一个相关的（DOM树中的某个地方）元素，在本例中为“txtAction”从

asp:TextBox

控件

当然，我试过了，

document.getElementByID（“txtAction”）

，但这是从DOM树的顶部开始的。如果我有另一个完全无关的txtAction控件呢

---

谢谢

如果使用jQuery，可以使用

$（'element'）。最近（'some_top_element'）。查找（'other_bottom_element'）

查找与选择器匹配的第一个父级（向上遍历）。并返回匹配的child（向下遍历）

---

如果您不使用jquery并且想要尝试使用香草javascript，请选中此项。

如果您使用jquery，可以使用

$（'element'）。最近（'some_top_element'）。查找（'other_bottom_element'）

查找与选择器匹配的第一个父级（向上遍历）。并返回匹配的child（向下遍历）

---

如果您不使用jquery，并且想要尝试使用香草javascript，请选中此项。

您正在寻找的javascript函数是和；两者都可以基于父元素而不是

文档
使用。然而，更困难的部分将是找到作为搜索基础的祖先元素，这是jQuery方法的一个很好的用途
 您正在寻找的JavaScript函数是和；两者都可以基于父元素而不是
文档
使用。然而，更困难的部分将是找到作为搜索基础的祖先元素，这是jQuery方法的一个很好的用途
 您可能不需要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>

var entry=document.querySelector（'input'）；//你的出发点。
var textarea=最近（条目“textarea”）；/。。。
您可能不需要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>

var entry=document.querySelector（'input'）；//你的出发点。
var textarea=最近（条目“textarea”）；/。。。
听说过jQuery吗？听起来你会想学的。但是DOM实际上是关于
document
@PHPglue到达那里的，但是稍微提升一下就好了。Thankserver听说过jQuery吗？听起来你会想学的。但是DOM实际上是关于
document
@PHPglue到达那里的，但是稍微提升一下就好了。谢谢最近的（）方法就是我想要的是最近的（）方法就是我想要的