Fernando68 Fernando68 - 5 months ago 10
HTML Question

Traversing the DOM with JavaScript from a specified root Node?

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

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