如何将DOM选择器作为数据属性传递

Question

I'm writing some shared modal functionality (the user clicks a button and my modal method grabs some associated DOM element and clones it to the modal) and unfortunately there is some inconsistency in the HTML in the relationship between the trigger and content, for instance:

// Sibling

<button class="modal__button">Trigger</button>
<div class="modal__content">Content</div>


// Separated by other elements

<button class="modal__button">Trigger</button>
<div>Other Elements</div>
<div>Other Elements</div>
<div class="modal__content">Content</div>


// Trigger's parent is content's sibling

<div>
    <button class="modal__button">Trigger</button>
</div>
<div class="modal__content">Content</div>


// Argh!

<div>
    <div>
        <button class="modal__button">Trigger</button>
    </div>
</div>
<div>Other Elements</div>
<div>Other Elements</div>
<div>
    <div>
        <div class="modal__content">Content</div>
    </div>
</div>

Unfortunately the obvious answer, using IDs to create a relationship, is not possible for my use case (as they are required to be unique and these components can appear multiple times within a single page, and each component has no awareness from a server side perspective of whether it has already been added to the page so there is no way to ensure this uniqueness).

The only way around this I can see is if I can pass my modal method a DOM selector (relative to the trigger) as a data-attribute and then have my modal method execute this selector. I would also need to scope this so that it's relative to the button trigger. However, I'm not sure if any of this is possible in JavaScript? Basically I want to be able to write my buttons something like this:

<button data-modal-content="this.nextElementSibling">Trigger</button>
<button data-modal-content="this.parentNode.querySelectorAll('modal__content')">Trigger</button>
<button data-modal-content="this.parentNode.nextElementSibling">Trigger</button>

And then have my modal method find the selector. I know I can potentially use eval() like so:

 document.querySelectorAll('[data-modal-content]').forEach(el => { el.addEventListener('click', button => { const selector = button.target.getAttribute('data-modal-content').replace('this','button.target'); console.log(eval(selector)); }); }); 

 <button data-modal-content="this.nextElementSibling">Trigger</button> <div>Content</div> 

...but I'm also aware of the associated security issues with that, meaning I'd likely have to sanitise the string (I guess by checking each part of it was only doing selector y stuff before it goes anywhere near eval() ).

Is this the best approach, is there potentially a better way to tackle this that I've not considered? A way to do the selector stuff that doesn't rely on the risky eval() would be ideal.

Answer 1

I would rather go for a simpler solution, and just select all the modals, then find the first one that comes after the clicked button.

 document.querySelectorAll("button.modal__button").forEach(function(b) { b.addEventListener("click", clickHandler); }); function clickHandler() { const contents = document.querySelectorAll("div.modal__content"); const c = Array.from(contents).find(c => this.compareDocumentPosition(c) == Node.DOCUMENT_POSITION_FOLLOWING ); if (c) c.classList.add("found"); else console.log("Unable to find content from:", this); } 

 .found { background: red; color: white; } .modal__content { margin: 10px; padding: 10px; border: 2px solid orange; } 

 // Sibling <button class="modal__button">Trigger</button> <div class="modal__content">Content</div> // Separated by other elements <button class="modal__button">Trigger</button> <div>Other Elements</div> <div>Other Elements</div> <div class="modal__content">Content</div> // Trigger's parent is content's sibling <div> <button class="modal__button">Trigger</button> </div> <div class="modal__content">Content</div> // Argh! <div> <div> <button class="modal__button">Trigger</button> </div> </div> <div>Other Elements</div> <div>Other Elements</div> <div> <div> <div class="modal__content">Content</div> </div> </div> 

---

Another solution is to give the button a temporary ID when clicked, then include it in the DOM selection of the content elements. That way, you only need to find the button in the collection, and you'll know that the content is the next (or previous) one, because the results are always returned in "document order".

 document.querySelectorAll("button.modal__button").forEach(function(b) { b.addEventListener("click", clickHandler); }); function clickHandler() { const temp = this.id; this.id = generateUniqueId(); const els = document.querySelectorAll(`#${this.id}, div.modal__content`); const idx = Array.from(els).findIndex(el => this.id == el.id); this.id = temp; if (idx !== -1) { const el = this.dataset.position === "before" ? els[idx - 1] : els[idx + 1]; el.classList.add("found"); } else console.log("Unable to find content from:", this); } function generateUniqueId() { do { const id = "__temp_id__" + (Math.floor(Math.random()) * Number.MAX_SAFE_INTEGER); if (!document.querySelector(id)) return id; } while (true); } 

 .found { background: red; color: white; } .modal__content { margin: 10px; padding: 10px; border: 2px solid orange; } 

 // Sibling <button class="modal__button">Trigger</button> <div class="modal__content">Content</div> // Separated by other elements <button class="modal__button">Trigger</button> <div>Other Elements</div> <div>Other Elements</div> <div class="modal__content">Content</div> // Content comes before trigger's parent <div class="modal__content">Content</div> <div> <button class="modal__button" data-position="before">Trigger</button> </div> // Trigger's parent is content's sibling <div> <button class="modal__button">Trigger</button> </div> <div class="modal__content">Content</div> // Argh! <div> <div> <button class="modal__button">Trigger</button> </div> </div> <div>Other Elements</div> <div>Other Elements</div> <div> <div> <div class="modal__content">Content</div> </div> </div>