需要帮助在 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 = 'Small | 100 Photos';

最好的选择是通过这种方式获取您提到的父元素

document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]')

然后进一步到想要的元素。这样您就可以确定自己选对了。但它要求data-item-id 是唯一的和静态的。

结合起来它看起来像这样：

document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]').getElementsByTagName('select')[0].value = 'Small | 100 Photos';

Answer 2

对于那些有兴趣的人，这是我解决上述问题的最终代码，@ÿmit 的输入。这被放入 SquareSpace 商务页面页脚的代码块中。

<script type = "text/javascript">

    //https://www.denisbouquet.com/squarespace-code-injection-page-transition-run-script-page-reload/ - thanks to Denis Bouquet for this wrapper

    $(function() {

        function changeSizeMenu() {

                //put all get parameters into an object called $_GET

                //https://stackoverflow.com/a/12049737/2880312 - thanks to @gion_13 and @vrijdenker

                var $_GET = {};

                if (document.location.toString().indexOf('?') !== -1) {

                    var query = document.location

                        .toString()

                        // get the query string

                        .replace(/^.*?\?/, '')

                        // and remove any existing hash string (thanks, @vrijdenker)

                        .replace(/#.*$/, '')

                        .split('&');

                    for (var i = 0, l = query.length; i < l; i++) {

                        var aux = decodeURIComponent(query[i]).split('=');

                        $_GET[aux[0]] = aux[1];

                    }

                }

                //if the $_GET['select'] parameter is empty, return false

                if(!$_GET['Size'] || $_GET['Size'] == '') {

                //    return FALSE;

                    console.log("Get parameter 'Size' = " + $_GET['Size']); ////for debugging

                }

                //get array with all selects within data-item-id 5f6d19150f4fd9415d8a1586 - thanks @ÿmit

                var selectItems = document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]').getElementsByTagName('select');

                //if the selectItems array is empty, return false

                if(!selectItems || selectItems.length == 0) {

                    //return FALSE;

                    console.log("selectItems is empty"); ////for debugging

                }

                //loop through all selects within data-item-id 5f6d19150f4fd9415d8a1586

                for (si = 0; si < selectItems.length; si++) {

                    if(selectItems[si].getAttribute("data-variant-option-name") == 'Size') {

                        //if the data-variant-option-name is "Size" - that's the array key we want. 

                        break;

                    } 

                }

                //get label element for later

                var label = document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]').getElementsByClassName("variant-select-wrapper")[si];

                // get all the option items from the "Size" select menu; key identified as `si` above

                var optionItems = selectItems[si].getElementsByTagName('option')

                //if the optionItems array is empty, return false

                if(!optionItems || optionItems.length == 0) {

                    // return FALSE;

                    console.log("optionItems is empty"); ////for debugging

                }

                for (oi = 0; oi < optionItems.length; oi++) {

                    if(optionItems[oi].value == $_GET['Size']) {

                        console.log("MATCH" + optionItems[oi].value); //for debugging

                        //change the label on the drop-down menu

                        label.setAttribute("data-text", $_GET['Size']);

                        optionItems[oi].selected = 'selected';

                    } else {

                        optionItems[oi].selected = '';

                    }

                    console.log(oi + ":" + optionItems[oi].value); //for debugging

                } 

        }

        // run the function on first load of the website

        changeSizeMenu();

        // track every time we change of page

        $("body").on('click', ".Header-nav-item", function() {

            setTimeout(function() {

                changeSizeMenu();

            }, 500); // add a delay before to run the code again

        });

    })

</script>