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

Question

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

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

SquareSpace 对元素有奇怪的引用，HTML 无法更改，尤其是在这种情况下。我是一个 JavaScript 新手，需要专家的帮助...

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

<div class="product-variants" data-item-id="5f6d19150f4fd9415d8a1586" data-variants="[{&quot;attributes&quot;:{&quot;Size&quot;:&quot;Small | 100 Photos&quot;},&quot;optionValues&quot;:[{&quot;optionName&quot;:&quot;Size&quot;,&quot;value&quot;:&quot;Small | 100 Photos&quot;}],&quot;id&quot;:&quot;68115c8d-399e-475b-8ea9-9543ad86cb02&quot;,&quot;sku&quot;:&quot;SQ5845728&quot;,&quot;price&quot;:11900,&quot;salePrice&quot;:0,&quot;priceMoney&quot;:{&quot;currency&quot;:&quot;USD&quot;,&quot;value&quot;:&quot;119.00&quot;},&quot;salePriceMoney&quot;:{&quot;currency&quot;:&quot;USD&quot;,&quot;value&quot;:&quot;0.00&quot;},&quot;onSale&quot;:false,&quot;unlimited&quot;:true,&quot;qtyInStock&quot;:0,&quot;width&quot;:0.0,&quot;height&quot;:0.0,&quot;weight&quot;:0.0,&quot;imageIds&quot;:[],&quot;images&quot;:[],&quot;len&quot;:0.0},{&quot;attributes&quot;:{&quot;Size&quot;:&quot;Medium | 250 Photos&quot;},&quot;optionValues&quot;:[{&quot;optionName&quot;:&quot;Size&quot;,&quot;value&quot;:&quot;Medium | 250 Photos&quot;}],&quot;id&quot;:&quot;dcfe8568-7199-4e68-91e2-d0f202fecdf7&quot;,&quot;sku&quot;:&quot;SQ2105082&quot;,&quot;price&quot;:26900,&quot;salePrice&quot;:0,&quot;priceMoney&quot;:{&quot;currency&quot;:&quot;USD&quot;,&quot;value&quot;:&quot;269.00&quot;},&quot;salePriceMoney&quot;:{&quot;currency&quot;:&quot;USD&quot;,&quot;value&quot;:&quot;0.00&quot;},&quot;onSale&quot;:false,&quot;unlimited&quot;:true,&quot;qtyInStock&quot;:0,&quot;width&quot;:0.0,&quot;height&quot;:0.0,&quot;weight&quot;:0.0,&quot;imageIds&quot;:[],&quot;images&quot;:[],&quot;len&quot;:0.0},{&quot;attributes&quot;:{&quot;Size&quot;:&quot;Large | 500 Photos&quot;},&quot;optionValues&quot;:[{&quot;optionName&quot;:&quot;Size&quot;,&quot;value&quot;:&quot;Large | 500 Photos&quot;}],&quot;id&quot;:&quot;494878cf-2af2-422c-91ec-e6d1850423aa&quot;,&quot;sku&quot;:&quot;SQ9044986&quot;,&quot;price&quot;:49900,&quot;salePrice&quot;:0,&quot;priceMoney&quot;:{&quot;currency&quot;:&quot;USD&quot;,&quot;value&quot;:&quot;499.00&quot;},&quot;salePriceMoney&quot;:{&quot;currency&quot;:&quot;USD&quot;,&quot;value&quot;:&quot;0.00&quot;},&quot;onSale&quot;:false,&quot;unlimited&quot;:true,&quot;qtyInStock&quot;:0,&quot;width&quot;:0.0,&quot;height&quot;:0.0,&quot;weight&quot;:0.0,&quot;imageIds&quot;:[],&quot;images&quot;:[],&quot;len&quot;:0.0}]" data-animation-role="content">
    <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>

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

Answer 1

首先获取'select'元素，然后选择你需要的选项，将选中的属性设置为'selected'。但如果存在多个 'select' 标签，请小心。由于您得到的是一组元素，因此您应该知道所需元素的索引。

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
                // - 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>

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

Need help referencing a DOM element on SquareSpace

javascript

squarespace