Question

我是否可以使用例程或某些函数向我返回基于ID，标记名称或其他属性请求的元素但没有使用{{进行全局搜索1}}元素？

以下是我试图遍历的示例DOM ...

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

document

基本上我要做的是从btnADDaction <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>控件调用一个JavaScript函数（比如onclick =＆＃34; findme（this，＆＃39; txtAction＆＃39;）＆＃34; ），当然，将asp:Button作为按钮元素传递，但是通过ID传递一个相关的（在DOM树中的某个地方）元素，在这种情况下是＆＃34; txtAction＆＃34;来自this控件。

我当然试过asp:TextBox，但这是从DOM树的顶部开始的。如果我有另一个完全不相关的txtAction控件怎么办？

谢谢

Answer 1

如果您使用的是jQuery，则可以使用var title = document.body.getElementsByTagName('strong')[0] title.style.color = 'blue' title.style.display = 'block' var iframe = document.body.getElementsByTagName('iframe')[0] iframe.style.width = '100%' iframe.height = document.body.offsetHeight - title.offsetHeight;

.closest()找到匹配选择器的第一个父项（遍历）。并且.find()返回匹配的子项（遍历）。

如果您不使用jquery并想尝试使用vanilla javascript，请检查此tutorial。

Answer 2

您正在寻找的JavaScript函数是getElementsByTagName和getElementsByClassName;两者都可以基于父元素而不是library(data.table) library(ggplot2) library(dplyr) #setting colour for the range of values cpp$cutoff <- NA cpp$cutoff["A" <- cpp$mybs <= -0.1] <- "forestgreen" cpp$cutoff["B" <- cpp$mybs > -0.1 & cpp$mybs<= 0.1] <- "yellow1" cpp$cutoff["C" <- cpp$mybs > 0.1 & cpp$mybs<= 0.22] <- "slateblue2" cpp$cutoff["D" <- cpp$mybs > 0.22 & cpp$mybs<= 0.27] <- "navy" cpp$cutoff["E" <- cpp$mybs > 0.27 & cpp$mybs<= 0.46] <- "black" cpp$cutoff["F" <- cpp$mybs > 0.46 & cpp$mybs<= 0.56] <- "navy" cpp$cutoff["G" <- cpp$mybs > 0.56 & cpp$mybs<= 0.9] <- "red2" cpp$cutoff["H" <- cpp$mybs > 0.9 & cpp$mybs<= 1.25] <- "navy" cpp$cutoff["I" <- cpp$mybs > 1.25] <- "red2" ##plotting here p<- ggplot(cpp, aes(x = my_good, y = mybs, group = key, color = cutoff)) + geom_line() + geom_point() #to show the dots p1 <- p+labs(title="Threshold", x="Number wanted", y="mybs") + theme_bw() + theme(axis.text.x=element_text(size=14), axis.title.x=element_text(size=16), axis.text.y=element_text(size=14), axis.title.x=element_text(size=16), plot.title=element_text(size=20, face="bold", color="darkgreen")) p2 <-p1+ scale_x_continuous(expand = c(0, 0), breaks = c(0, 1500, seq(5000, max(as.data.frame(cpp[,"my_good"])), 10000)), labels = c(0, 1500, seq(5000, max(as.data.frame(cpp[,"my_good"])),10000))) #expand forces the origin to start at zero p #original plot使用。但是，更难的部分是找到基于此搜索的祖先元素，这对jQuery的closest(…)方法很有用。

Answer 3

您可能不需要jquery 。刚刚创建了一个基本的vanilla函数来获取与选择器匹配的第一个元素，方法是测试元素本身并遍历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;
}

<强> USAGE

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

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

3 个答案: