Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Find unique selector in the scope of a root element #26

Open
vwochnik opened this issue Feb 21, 2017 · 4 comments
Open

Find unique selector in the scope of a root element #26

vwochnik opened this issue Feb 21, 2017 · 4 comments

Comments

@vwochnik
Copy link
Contributor

Normally, this script will find a unique selector for an element in the scope of the whole document but I will probably also need the option to apply this algorithm within a root element.

If you are willing to merge such a feature, I would create a PR.

@AvraamMavridis
Copy link
Collaborator

Sounds interesting, yep. Definetely a nice suggestion. It can be a param in options config.

@tathastu871
Copy link

tathastu871 commented Oct 27, 2024

@AvraamMavridis @vwochnik @ericclemmons

Proposing Changes

let owner;
 function isUnique(el, selector, owner) {
  if (!Boolean(selector)) return false;
  const elems = (owner !== undefined && owner !== null) 
                ? owner.querySelectorAll(selector) 
                : el.ownerDocument.querySelectorAll(selector);

  return elems.length === 1 && elems[0] === el;
}
function unique(el, options = {}, owner) {
  const {
    selectorTypes = ['ID', 'Class', 'Tag', 'NthChild'],
    attributesToIgnore = ['id', 'class', 'length'],
    excludeRegex = null,
  } = options;

  const allSelectors = [];
  const parents = getParents(el);

  for (let elem of parents) {
    const selector = getUniqueSelector(elem, selectorTypes, attributesToIgnore, excludeRegex);
    if (Boolean(selector)) {
      allSelectors.push(selector);
    }
  }

  const selectors = [];
  for (let it of allSelectors) {
    selectors.unshift(it); // Build the selector path
    const selector = selectors.join(' > '); // Create full selector path
    // Check uniqueness with respect to the owner context
    if (isUnique(el, selector, owner)) {
      return selector; // Return the first unique path found
    }
  }

  return null; // If no unique selector found
}

Test Results:

Passing body > nth-child(33) as owner
and one of its child as DomElement

options = {
    
    
    selectorTypes : [ 'ID', 'Class', 'Tag', 'NthChild' , 'Attributes' ]
}

unique( DomElememy, options );  --> Context of document
## ':nth-child(33) > :nth-child(1) > div'

unique(DomElement, options , document.querySelector('body > nth-child(33)'));  --> Context of defined parent root

##':nth-child(1) > div'

@tathastu871
Copy link

Proof
document.querySelectorAll(unique(DomElemmt, options , document.querySelector('body > :nth-child(33)')))

Return: div_acb4

document.querySelector('body > :nth-child(33)').querySelectorAll(unique( DomElement, options , document.querySelector('body > :nth-child(33)')))

Return: div_acb4

@tathastu871
Copy link

Scoping to particlar root parent
then user would have ti use

Nth child or attributes as selectorTypes

as class id tags are independient of parent

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants