A simple jQuery plugin for getting DOM Path of HTML elements (http://asatour.github.io/jquery-domPath/).
Include script after the jQuery library :
<script src="/path/jquery.domPath.js"></script>
HTML:
Note: The HTML code below, will be used in all usage examples in this documentation.
<body>
<div class="module" id="products-block">
<div class="description">
<h1 class="section-title">
product general description
</h1>
<ul class="products">
<li>Cameras</li>
<li>TV</li>
<li>Computers</li>
</ul>
</div>
</div>
</body>
JavaScript:
var products_domPath = $(".products").domPath();
Output:
The value of products_domPath is:
["div#products-block.module > div.description > ul.products"]
JavaScript:
Don't get elements class.
var products_domPath = $(".products").domPath({class: false});
Output:
The value of products_domPath is:
["div#products-block > div > ul"]
var options = {
tag : true, // get dom tag
lowerCase : true, // get tag in lower or upper case
class : true, // get element class
id : true, // get element id
body : false, // show body in dom full path
idBeforeClass : true, // display id before class
oneResult : false, // get only the first result(as string)
scaleType : false // if the result contains only one element get it as string and not array
};
var products_domPath = $(".products").domPath(options);
Below all examples of the possible configuration.
If true display the tag name in the DOM Path
JavaScript:
var products_domPath = $(".products").domPath({tag: false});
Output:
["#products-block.module > .description > .products"]
Display the tag name in lowercase
JavaScript:
var products_domPath = $(".products").domPath({lowerCase: false});
Output:
["DIV#products-block.module > DIV.description > UL.products"]
Display the class attribute (if it exists) in the DOM Path
JavaScript:
var products_domPath = $(".products").domPath({lowerCase: false});
Output:
["div#products-block > div > ul"]
Display the ID attribute (if it exists) in the DOM Path
JavaScript:
var products_domPath = $(".products").domPath({id: false});
Output:
["div.module > div.description > ul.products"]
Show the body tag in the DOM Path (default is to not show it)
JavaScript:
var products_domPath = $(".products").domPath({body: true});
Output:
["body > div#products-block.module > div.description > ul.products"]
Display id before class (default) Note: If id or class doesn't exist, this setting will have no effect
JavaScript:
var products_domPath = $(".products").domPath({idBeforeClass: false});
Output:
["div.module#products-block > div.description > ul.products"]
Get only the first Result as String inspite of Array
JavaScript:
var products_domPath = $("li").domPath({oneResult: true});
Output:
"div#products-block.module > div.description > ul.products > li"
In case of one result, inspite of returning an Array with one element, get the result as String
JavaScript:
var products_domPath = $(".products").domPath({scaleType: true});
Output:
"div#products-block.module > div.description > ul.products"