Traversing the DOM with JavaScript from a specified root Node?

Question

Is there a routine or some function I can use to return to me the element that I request based on the ID, tag name or some other property, but without doing global searching using the document element?

Here is a sample DOM I am trying to traverse...

I have placed a marker on the element I want to use as the starting point (the btnAction input control) and the element I want to find (the textarea). Look for [*] .

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

Essentially what I am trying to do is call a JavaScript function from the btnADDaction asp:Button control (like an onclick="findme(this,'txtAction')"), passing this as the button element of course, but a related (somewhere in the DOM tree) element via the ID, being in this case "txtAction" from the asp:TextBox control.

I've tried of course, document.getElementByID("txtAction") , but this starts from the top of the DOM tree. What if I have another txtAction control that is totally unrelated?

Thank you

Answer 1

If you're using jQuery, you can use $('element').closest('some_top_element').find('another_bottom_element') ;

.closest() finds the first parent matching the selector (traversing up). And .find() returns the matched childs (traversing down).

If you are not using jquery and want to try using vanilla javascript, check this tutorial .

Answer 2

The JavaScript functions you are looking for are getElementsByTagName and getElementsByClassName ; both can be used based on a parent element instead of document . However, the harder part will be finding the ancestor element to base this search on, which is a good use for jQuery's closest(…) method.

Answer 3

You might not need jquery . Just created a basic vanilla function to get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

/**
 * @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;
}

USAGE

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