HTML
<body>
<div class="lol">
<a class="rightArrow" href="javascriptVoid:(0);" title"Next image">
</div>
</body>
伪代码
$(".rightArrow").click(function() {
rightArrowParents = this.dom(); //.dom(); is the pseudo function ... it should show the whole
alert(rightArrowParents);
});
警告信息将是：
body div.lol a.rightArrow
我如何使用javascript/jquery获取它？
以下是一个返回jQuery路径的本地JS版本。如果元素具有ID，我还会为其添加ID。如果您在数组中看到ID，这将为您提供执行最短路径的机会。
var path = getDomPath(element);
console.log(path.join(' > '));
输出
body > section:eq(0) > div:eq(3) > section#content > section#firehose > div#firehoselist > article#firehose-46813651 > header > h2 > span#title-46813651
这里是函数。
function getDomPath(el) {
var stack = [];
while ( el.parentNode != null ) {
console.log(el.nodeName);
var sibCount = 0;
var sibIndex = 0;
for ( var i = 0; i < el.parentNode.childNodes.length; i++ ) {
var sib = el.parentNode.childNodes[i];
if ( sib.nodeName == el.nodeName ) {
if ( sib === el ) {
sibIndex = sibCount;
}
sibCount++;
}
}
if ( el.hasAttribute('id') && el.id != '' ) {
stack.unshift(el.nodeName.toLowerCase() + '#' + el.id);
} else if ( sibCount > 1 ) {
stack.unshift(el.nodeName.toLowerCase() + ':eq(' + sibIndex + ')');
} else {
stack.unshift(el.nodeName.toLowerCase());
}
el = el.parentNode;
}
return stack.slice(1); // removes the html element
}
typeof el.hasAttribute === 'function'，然后才能检查 el.hasAttribute('id'). - The gates of Zion使用jQuery，像这样（以下是一种不使用jQuery除事件外的解决方案；如果重复函数调用很重要，则调用更少的函数）：
使用jQuery，像这样（下面提供了一种不使用jQuery除事件外的解决方案；如果函数调用次数很重要，则可以调用较少的函数）：
$(".rightArrow").click(function () {
const rightArrowParents = [];
$(this)
.parents()
.addBack()
.not("html")
.each(function () {
let entry = this.tagName.toLowerCase();
const className = this.className.trim();
if (className) {
entry += "." + className.replace(/ +/g, ".");
}
rightArrowParents.push(entry);
});
console.log(rightArrowParents.join(" "));
return false;
});
实时示例：
$(".rightArrow").click(function () {
const rightArrowParents = [];
$(this)
.parents()
.addBack()
.not("html")
.each(function () {
let entry = this.tagName.toLowerCase();
const className = this.className.trim();
if (className) {
entry += "." + className.replace(/ +/g, ".");
}
rightArrowParents.push(entry);
});
console.log(rightArrowParents.join(" "));
return false;
});<div class=" lol multi ">
<a href="#" class="rightArrow" title="Next image">Click here</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>(在实时例子中，我已经更新了 div 上的 class 属性为 lol multi, 以演示处理多个类的方法。)
代码使用 parents 获取被点击元素的祖先元素，通过 not 移除其中的 html 元素（因为你从 body 开始），然后循环创建每个父级元素的条目，并将其推入数组。接着使用 addBack 将 a 添加回集合中，这也改变了集合的顺序到你所需的顺序（parents 得到的是你想要的父级元素的反向顺序，但是 addBack 可以让它按 DOM 的正常顺序排列）。最后使用 Array#join 创建以空格分隔的字符串。
在创建条目时，我们会修剪 className（因为在 class 属性中前导和尾随空格保留，但没有意义），然后如果还有剩余内容，就使用点号（.）将一个或多个空格的系列替换为点号，以支持具有多个类的元素（例如 <p class='foo bar'> 的 className 为 "foo bar"，所以该条目最终是 p.foo.bar）。
只是为了完整性起见，这是 jQuery 可能过于繁琐的情况之一，你可以直接遍历 DOM 树来实现这个效果：
$(".rightArrow").click(function () {
const rightArrowParents = [];
for (let elm = this; elm; elm = elm.parentNode) {
let entry = elm.tagName.toLowerCase();
if (entry === "html") {
break;
}
const className = elm.className.trim();
if (className) {
entry += "." + className.replace(/ +/g, ".");
}
rightArrowParents.push(entry);
}
rightArrowParents.reverse();
console.log(rightArrowParents.join(" "));
return false;
});
实时示例：
$(".rightArrow").click(function () {
const rightArrowParents = [];
for (let elm = this; elm; elm = elm.parentNode) {
let entry = elm.tagName.toLowerCase();
if (entry === "html") {
break;
}
const className = elm.className.trim();
if (className) {
entry += "." + className.replace(/ +/g, ".");
}
rightArrowParents.push(entry);
}
rightArrowParents.reverse();
console.log(rightArrowParents.join(" "));
return false;
});<div class=" lol multi ">
<a href="#" class="rightArrow" title="Next image">Click here</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>在那里，我们只需使用标准的parentNode属性（或者我们可以使用parentElement）来反复向上遍历树，直到我们没有父级或者看到html元素。然后，我们将数组反转（因为它与您想要的输出是相反的），并加入它，就可以了。
rightArrowParents.unshift()而不是push()和reverse()可能会更高效？ - p0lar_bearthis.className.trim().replace(/ {2,}/g, ' ')，可以替换类名之间多余的空格。 - QuantumBlackclassName上使用 entry += className.replace(/ +/g, "."); (因为我在测试它是否为空之前修剪过它)。 - T.J. Crowder我需要一个返回CSS标准路径（非jQuery）并处理ShadowDOM的原生JS版本。这段代码是对Michael Connor答案的小更新，以防有人需要：
function getDomPath(el) {
if (!el) {
return;
}
var stack = [];
var isShadow = false;
while (el.parentNode != null) {
// console.log(el.nodeName);
var sibCount = 0;
var sibIndex = 0;
// get sibling indexes
for ( var i = 0; i < el.parentNode.childNodes.length; i++ ) {
var sib = el.parentNode.childNodes[i];
if ( sib.nodeName == el.nodeName ) {
if ( sib === el ) {
sibIndex = sibCount;
}
sibCount++;
}
}
// if ( el.hasAttribute('id') && el.id != '' ) { no id shortcuts, ids are not unique in shadowDom
// stack.unshift(el.nodeName.toLowerCase() + '#' + el.id);
// } else
var nodeName = el.nodeName.toLowerCase();
if (isShadow) {
nodeName += "::shadow";
isShadow = false;
}
if ( sibCount > 1 ) {
stack.unshift(nodeName + ':nth-of-type(' + (sibIndex + 1) + ')');
} else {
stack.unshift(nodeName);
}
el = el.parentNode;
if (el.nodeType === 11) { // for shadow dom, we
isShadow = true;
el = el.host;
}
}
stack.splice(0,1); // removes the html element
return stack.join(' > ');
}
下面是一个精确匹配元素的解决方案。
重要的是要理解，在DOM中，浏览器工具显示的选择器（它不是一个真实的选择器）不能唯一地标识一个元素。（例如，它不能区分连续的span元素列表。没有位置/索引信息）
这是一个类似（关于xpath）回答的改编。
$.fn.fullSelector = function () {
var path = this.parents().addBack();
var quickCss = path.get().map(function (item) {
var self = $(item),
id = item.id ? '#' + item.id : '',
clss = item.classList.length ? item.classList.toString().split(' ').map(function (c) {
return '.' + c;
}).join('') : '',
name = item.nodeName.toLowerCase(),
index = self.siblings(name).length ? ':nth-child(' + (self.index() + 1) + ')' : '';
if (name === 'html' || name === 'body') {
return name;
}
return name + index + id + clss;
}).join(' > ');
return quickCss;
};
您可以像这样使用它
console.log( $('some-selector').fullSelector() );
请看此链接获取示例。
我最终使用的是简短的原生ES6版本:
返回与我在Chrome检查器中所看到的输出相同的结果，例如body div.container input#name
function getDomPath(el) {
let nodeName = el.nodeName.toLowerCase();
if (el === document.body) return 'body';
if (el.id) nodeName += '#' + el.id;
else if (el.classList.length)
nodeName += '.' + [...el.classList].join('.');
return getDomPath(el.parentNode) + ' ' + nodeName;
};
我一直在使用Michael Connor的答案，并对其进行了一些改进。
nth-of-type代替nth-child，因为nth-of-type只查找相同类型的子元素，而不是任何子元素html节点id的元素的nodeNameid，如果有的话。这应该使代码更加健壮，但我在哪一行留下了注释，如果您不想要这种行为，请删除该行CSS.escape处理ID和节点名称中的特殊字符~
export default function getDomPath(el) {
const stack = []
while (el.parentNode !== null) {
let sibCount = 0
let sibIndex = 0
for (let i = 0; i < el.parentNode.childNodes.length; i += 1) {
const sib = el.parentNode.childNodes[i]
if (sib.nodeName === el.nodeName) {
if (sib === el) {
sibIndex = sibCount
break
}
sibCount += 1
}
}
const nodeName = CSS.escape(el.nodeName.toLowerCase())
// Ignore `html` as a parent node
if (nodeName === 'html') break
if (el.hasAttribute('id') && el.id !== '') {
stack.unshift(`#${CSS.escape(el.id)}`)
// Remove this `break` if you want the entire path
break
} else if (sibIndex > 0) {
// :nth-of-type is 1-indexed
stack.unshift(`${nodeName}:nth-of-type(${sibIndex + 1})`)
} else {
stack.unshift(nodeName)
}
el = el.parentNode
}
return stack
}
其他答案中的所有示例对我来说都不太正确，所以我自己制作了一个版本，也许我的版本会更适合其他人。
const getDomPath = element => {
let templateElement = element
, stack = []
for (;;) {
if (!!templateElement) {
let attrs = ''
for (let i = 0; i < templateElement.attributes.length; i++) {
const name = templateElement.attributes[i].name
if (name === 'class' || name === 'id') {
attrs += `[${name}="${templateElement.getAttribute(name)}"]`
}
}
stack.push(templateElement.tagName.toLowerCase() + attrs)
templateElement = templateElement.parentElement
} else {
break
}
}
return stack.reverse().slice(1).join(' > ')
}
const currentElement = document.querySelectorAll('[class="serp-item__thumb justifier__thumb"]')[7]
const path = getDomPath(currentElement)
console.log(path)
console.log(document.querySelector(path))
console.log(currentElement)
我将T.J. Crowder的代码片段转移到了一个小型的jQuery插件中。虽然他说这完全是不必要的开销，但我还是使用了他的jQuery版本，因为我只是用它来进行调试，所以我不在乎。
用法：
Html
<html>
<body>
<!-- Two spans, the first will be chosen -->
<div>
<span>Nested span</span>
</div>
<span>Simple span</span>
<!-- Pre element -->
<pre>Pre</pre>
</body>
</html>
Javascript
// result (array): ["body", "div.sampleClass"]
$('span').getDomPath(false)
// result (string): body > div.sampleClass
$('span').getDomPath()
// result (array): ["body", "div#test"]
$('pre').getDomPath(false)
// result (string): body > div#test
$('pre').getDomPath()
Repository
var obj = $('#show-editor-button'),
path = '';
while (typeof obj.prop('tagName') != "undefined"){
if (obj.attr('class')){
path = '.'+obj.attr('class').replace(/\s/g , ".") + path;
}
if (obj.attr('id')){
path = '#'+obj.attr('id') + path;
}
path = ' ' +obj.prop('tagName').toLowerCase() + path;
obj = obj.parent();
}
console.log(path);
你好，这个函数解决了当前元素未显示在路径中的错误。
现在请检查一下。
$j(".wrapper").click(function(event) {
selectedElement=$j(event.target);
var rightArrowParents = [];
$j(event.target).parents().not('html,body').each(function() {
var entry = this.tagName.toLowerCase();
if (this.className) {
entry += "." + this.className.replace(/ /g, '.');
}else if(this.id){
entry += "#" + this.id;
}
entry=replaceAll(entry,'..','.');
rightArrowParents.push(entry);
});
rightArrowParents.reverse();
//if(event.target.nodeName.toLowerCase()=="a" || event.target.nodeName.toLowerCase()=="h1"){
var entry = event.target.nodeName.toLowerCase();
if (event.target.className) {
entry += "." + event.target.className.replace(/ /g, '.');
}else if(event.target.id){
entry += "#" + event.target.id;
}
rightArrowParents.push(entry);
// }
其中$j = jQuery变量
同时解决类名中的..问题
以下是替换函数：
function escapeRegExp(str) {
return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
function replaceAll(str, find, replace) {
return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}
谢谢