javascript - 使用 JavaScript 选择棘手的 HTML 元素

Question

我在 Magento 主题中有一些 HTML，我不允许编辑它们，但是我需要使用一些 JavaScript 来定位一个非常难以定位的元素并更改其内容。

下面是我必须使用的区域的基本结构，我删除了所有 sibling ，现在只显示相关代码。

这一行<label for="options_2074">None</label>将始终有一个 ID 号，因此我无法使用它来定位我的元素。

但我需要更改该行上的文本 None至Black并添加

<span id="backingBlackTooltip"><img src="https://www.neonandmore.com/tooltips/question_mark.png"></span>收盘后</label>该行上也有标记。

我需要一些帮助来构建 JavaScript 选择器代码来实现此目的。

还要注意，我不能在这个元素上使用 jQuery =(

这是我可以使用的主要内容... #product-options-wrapper .input-box:first .options-list + .label label

任何帮助表示感谢。这里设置了一个JSFiddle... http://jsfiddle.net/jasondavis/0b61L398/

<div class="product-options" id="product-options-wrapper">

    <dl class="last">

        <dt><label>Backing</label></dt>
        <dd>
            <div class="input-box">
                <ul id="options-2074-list" class="options-list">
                    <li>
                        <input type="radio" id="options_2074" class="radio product-custom-option" name="options[2074]">
                        <span class="label">
                            <label for="options_2074">None</label>
                        </span>
                    </li>
                </ul>
            </div>
        </dd>

    </dl>


</div>

Answer 1

这应该可以做到。确保在文档加载之前不要运行此代码:

var alreadyFound=false;
[].forEach.call(document.getElementsByTagName('label'),function(curElt){
    if(!alreadyFound&&curElt.getAttribute('for') && curElt.getAttribute('for').indexOf('options_') === 0 && curElt.textContent === 'None'){
        alreadyFound=true;
        curElt.textContent='Black';
        var newSpan=document.createElement('span');
        newSpan.setAttribute('id','backingBlackTooltip');
        var newImg=new Image();
        newImg.setAttribute('src','https://www.neonandmore.com/tooltips/question_mark.png');
        newSpan.appendChild(newImg);
        curElt.parentNode.appendChild(newSpan);
    }
});

工作示例:http://jsfiddle.net/0b61L398/12/

我在做什么:

1. 获取全部 <label>元素并开始迭代它们
2. 对于每一个，检查以下内容是否有效:它有 for属性，for属性以 options_ 开头，以及 <label> 的内容是 None
3. 如果这些条件都满足，则设置 <label> 的内容至Black
4. 创建一个新的<span> ，并将其设置为 id属性为backingBlackTooltip
5. 创建一个新的<img> ，设置为src添加到您提供的 url，然后将其添加为 <span> 的子级我们刚刚创建了
6. 将跨度(及其子 <img> )附加到 <label> 的父级，实际上与“在结束 </label> 标记之后”添加它相同

此外，它已被编辑，以便在找到第一个 <label> 后停止。符合所有标准。 jsfiddle 链接已更新以反射(reflect)此更改