需要帮助在 SquareSpace 上引用 DOM 元素

Question

我正在尝试破解 SquareSpace 站点以从 GET 变量更改下拉菜单的选定值。

我正在努力引用 via 的 DOM 元素document.getElementsByClassName，所以document.getElementsByID我可以使用 JS 更改值。

SquareSpace 对元素的引用很奇怪，并且 HTML 无法更改，尤其是在这种情况下。我是一个 JavaScript 新手，可以从那里的专家那里得到一些帮助......

问题：如何在 JavaScript 中引用下拉菜单的 DOM 元素？也许使用document.getElementBy...？

    <div class="variant-option">

        <div class="variant-option-title">Size: </div>

        <div class="variant-select-wrapper">

            <select aria-label="Select Size" data-variant-option-name="Size">

                <option value="">Select Size</option>

                <option value="Small | 100 Photos">Small | 100 Photos</option>

                <option value="Medium | 250 Photos">Medium | 250 Photos</option>

                <option value="Large | 500 Photos">Large | 500 Photos</option>

            </select>

        </div>

        <div class="variant-radiobtn-wrapper" data-variant-option-name="Size">

            <input type="radio" class="variant-radiobtn" value="Small | 100 Photos" name="variant-option-Size" id="variant-option-Size-Small | 100 Photos"/>

            <label for="variant-option-Size-Small | 100 Photos">Small | 100 Photos</label>

            <input type="radio" class="variant-radiobtn" value="Medium | 250 Photos" name="variant-option-Size" id="variant-option-Size-Medium | 250 Photos"/>

            <label for="variant-option-Size-Medium | 250 Photos">Medium | 250 Photos</label>

            <input type="radio" class="variant-radiobtn" value="Large | 500 Photos" name="variant-option-Size" id="variant-option-Size-Large | 500 Photos"/>

            <label for="variant-option-Size-Large | 500 Photos">Large | 500 Photos</label>

        </div>

    </div>

</div>

注意- 我可以data-item-id使用选择器在 CSS 中引用.page-section[data-section-id="5f7bc0326befc806d06d1e5b"]。

Answer 1

首先获取“select”元素，然后获取您需要的选项并将 selected 属性设置为“selected”。但如果存在多个“选择”标签，请小心。由于您获得了一组元素，因此您应该知道所需元素的索引。document.getElementsByTagName('select')[0].getElementsByTagName('option')[2].selected='selected';因为你想按值设置，你可以使用document.getElementsByTagName('select')[0].value&nbsp;=&nbsp;'Small&nbsp;|&nbsp;100&nbsp;Photos';最好的选择是通过这种方式获取您提到的父元素document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]')然后进一步到想要的元素。这样您就可以确定自己选对了。但它要求data-item-id 是唯一的和静态的。结合起来它看起来像这样：document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]').getElementsByTagName('select')[0].value&nbsp;=&nbsp;'Small&nbsp;|&nbsp;100&nbsp;Photos';

Answer 2

对于那些有兴趣的人，这是我解决上述问题的最终代码，@ÿmit 的输入。这被放入 SquareSpace 商务页面页脚的代码块中。<script type = "text/javascript">&nbsp; &nbsp; //https://www.denisbouquet.com/squarespace-code-injection-page-transition-run-script-page-reload/ - thanks to Denis Bouquet for this wrapper&nbsp; &nbsp; $(function() {&nbsp; &nbsp; &nbsp; &nbsp; function changeSizeMenu() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //put all get parameters into an object called $_GET&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //https://stackoverflow.com/a/12049737/2880312 - thanks to @gion_13 and @vrijdenker&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $_GET = {};&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (document.location.toString().indexOf('?') !== -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var query = document.location&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .toString()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // get the query string&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .replace(/^.*?\?/, '')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // and remove any existing hash string (thanks, @vrijdenker)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .replace(/#.*$/, '')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .split('&');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0, l = query.length; i < l; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var aux = decodeURIComponent(query[i]).split('=');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $_GET[aux[0]] = aux[1];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //if the $_GET['select'] parameter is empty, return false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(!$_GET['Size'] || $_GET['Size'] == '') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; return FALSE;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("Get parameter 'Size' = " + $_GET['Size']); ////for debugging&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //get array with all selects within data-item-id 5f6d19150f4fd9415d8a1586 - thanks @ÿmit&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var selectItems = document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]').getElementsByTagName('select');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //if the selectItems array is empty, return false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(!selectItems || selectItems.length == 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //return FALSE;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("selectItems is empty"); ////for debugging&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //loop through all selects within data-item-id 5f6d19150f4fd9415d8a1586&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (si = 0; si < selectItems.length; si++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(selectItems[si].getAttribute("data-variant-option-name") == 'Size') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //if the data-variant-option-name is "Size" - that's the array key we want.&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //get label element for later&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var label = document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]').getElementsByClassName("variant-select-wrapper")[si];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // get all the option items from the "Size" select menu; key identified as `si` above&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var optionItems = selectItems[si].getElementsByTagName('option')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //if the optionItems array is empty, return false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(!optionItems || optionItems.length == 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // return FALSE;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("optionItems is empty"); ////for debugging&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (oi = 0; oi < optionItems.length; oi++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(optionItems[oi].value == $_GET['Size']) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("MATCH" + optionItems[oi].value); //for debugging&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //change the label on the drop-down menu&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label.setAttribute("data-text", $_GET['Size']);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; optionItems[oi].selected = 'selected';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; optionItems[oi].selected = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(oi + ":" + optionItems[oi].value); //for debugging&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // run the function on first load of the website&nbsp; &nbsp; &nbsp; &nbsp; changeSizeMenu();&nbsp; &nbsp; &nbsp; &nbsp; // track every time we change of page&nbsp; &nbsp; &nbsp; &nbsp; $("body").on('click', ".Header-nav-item", function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; changeSizeMenu();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 500); // add a delay before to run the code again&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; })</script>