所以如果有人点击了一个链接,比如(原谅翡翠):
div
ul
li
a(href="/foo") Bar
li
a(href="/baz") Foo
假设我点击了"Bar"
的链接,我如何在DOM
中以编程方式找到点击的节点?我可以使用类似tagName + innerHtml
之类的启发式方法,但DOM
本身是否必须有某种方法来识别元素,以便我稍后使用普通的javascript/jquery进行查询?
编辑:请假设我们事先不知道点击了什么,但点击后我们确实有一个事件对象。是否存在唯一的event.target.something
?然后我能说(在jquery中)$(event.target.something)
并正确选择正确的元素吗?
我不太清楚你所说的"稍后查询"是什么意思,也就是说,你想什么时候查询,你打算用这个元素做什么?如果你想在同一个HTML页面中访问点击的元素(假设点击不会导致另一个页面),你可以在点击处理程序中使用this
关键字来检索点击的元素,然后将其存储在稍后可以访问的某个变量中。
然而,如果您想保留被点击元素的某种记录以供将来使用(例如,在Selenium测试用例中确定要点击的元素),那么您可以通过Xpath唯一地识别HTML页面中的元素,假设DOM在这一过程中不会改变。例如,你可以做这样的
$("a").click(function() {
var theClickedElement = $(this);
getXpath(theClickedElement); //Display the return value of this somewhere
}
你可以使用类似于这个答案的东西来实现getXpath()(链接中的代码计算相对Xpath-你也可以获得只包含标签名称的绝对Xpath。有关Xpath的更多信息,请查看本教程
如果您处理了click事件,您将获得该变量中的元素。你可以把它存储在一个局部甚至全局变量中,以保持对它的引用
在事件处理程序之外,可能在页面加载时:
var lastClickedElement;
然后在您的点击事件处理程序中:
function() {
lastClickedElement = this;
}
然后您总是引用最后单击的元素。
我不确定我是否理解你到底想做什么,但你可以通过事件监听器轻松找到点击的元素,并用它做任何你想做的事情:
$('a').click(function (e) {
e.preventDefault();
// ... Now 'this' refers to the element clicked
});
传递的e
变量是一个jQuery事件,它包含您需要的有关单击的元素的所有信息。e.target
是DOM节点,如果您绝对需要,可以使用它自己创建一个唯一的标识符
只需按住已单击的元素并将其存储即可。这将有助于您以后在不显式定义id属性的情况下检索它。
HTML:
<a href="#a">Bar</a>
<a href="#b">Foo</a>
javaScript:
var clickedNode = [];
var counter = 0;
$("a").click(function(){
clickedNode[counter] = $(this);
alert(clickedNode[counter].text());
counter++;
});
$("#lastValueButton").click(function(){
alert(clickedNode[counter-1].text());
});
演示
作为标题问题的答案:
根据手册,你可以通过它找到链接href如下:
$('a[href="/baz"]')
您还可以找到包含一些文本(手动)的元素
$("a:contains('Bar')")