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

【问题标题】：Need help referencing a DOM element on SquareSpace需要帮助在 SquareSpace 上引用 DOM 元素
【发布时间】：2021-03-07 17:39:45
【问题描述】：

我正在尝试破解 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。

【问题讨论】：

你忘了这个问题吗？所有这些都建立起来和背景故事......但毫无疑问。鉴于您这么说，到底是什么问题：“我可以使用 .page-section[data-section-id="5f7bc0326befc806d06d1e5b"] 选择器引用 CSS 中的数据项 ID。"
@RandyCasburn 对不起。上面的问题。
好的-好的开始-但是哪个元素？您可以像获得包装器一样获得<select>：select[data-variant-option-name=Size]。拥有该 DOM 节点后，选项数组位于 options 属性中。是这样吗？
对......但我对语法感到困惑。 var x = document.getElementsByClassName("select[data-variant-option-name=Size]").id; alert(x); 这就是我所拥有的——但它不起作用。再说一次，我是 JS 新手，根据我读过的文档，我有点难过
我希望发送一个 GET 字符串 ?size=Small%20%7C%20100%20Photos 并更改下拉菜单的选择。

标签： javascript squarespace

【解决方案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';

【讨论】：

感谢您的回答。要查看解决此问题的最终代码，请参见下文

【解决方案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>

【讨论】：