使用 JavaScript 选择棘手的 HTML 元素答案

【问题标题】：Selecting tricky HTML Element using JavaScript使用 JavaScript 选择棘手的 HTML 元素
【发布时间】：2014-12-16 02:31:48
【问题描述】：

我在 Magento 主题中有一些 HTML，我不允许编辑，但是我需要想出一些 JavaScript 来定位一个非常难以定位的项目并更改它的内容。

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

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

【问题讨论】：

我使用jQuery 实现了这一点，但我认为这不会有帮助：jsfiddle.net/0b61L398/6。顺便说一句，您可以使用label[for] 使用for 属性定位label。
可以用this的方法吗？
不确定这是否通用，但如果我假设您的 html 不会改变（尽管它很丑），它会起作用。 var myEls=document.querySelectorAll('label'); myEls[1].innerHTML = '黑色'。更清洁的解决方案可能是使用 Fahad 对 label[for] 的建议并使用伪选择器。
类似这样的东西：jsfiddle.net/0b61L398/11

标签： javascript css

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

我在做什么：

获取所有 <label> 元素并开始遍历它们
对于每一个，检查以下是否有效：它有一个for属性，for属性以options_开头，<label>的内容是None
如果这些条件都满足，则将<label>的内容设置为Black
新建一个<span>，并将其id属性设置为backingBlackTooltip
创建一个新的<img>，将src 设置为您提供的网址，然后将其添加为我们刚刚创建的<span> 的子项
将跨度（它是子级<img>）附加到<label> 的父级，实际上与在“关闭</label> 标记之后”添加它相同

此外，它已经过编辑，以便在找到第一个匹配所有条件的<label> 后停止。 jsfiddle 链接已更新以反映此更改

【讨论】：

这行得通，谢谢这似乎是一个棘手的问题，我通常有更好的 HTML 可以使用，但在这种情况下我无法对 HTML 进行任何更改，我很高兴你想出了一个非-jQuery解决方案！
这是您几周前与我分享的令人惊叹的代码，但我现在发现它导致运行它的某些页面出现问题。问题出在某个页面上，这最终会匹配 2 次不同的时间，并在应该更改它们时都更改它们，或者更好地说，它只需要更改在页面上找到的第一个匹配元素，然后中止或忽略其他元素。您是否碰巧知道解决此问题的简单方法？

【解决方案2】：

您需要执行以下操作：

var labelElement = document.getElementById("product-options-wrapper").  //#product-options-wrapper
                    getElementsByClassName("input-box")[0].     //.input-box:first
                    getElementsByClassName("options-list")[0].  //.options-list
                    getElementsByClassName("label")[0].         //.label
                    getElementsByTagName("label")[0];           //label

// Change the label content
labelElement.textContent = 'Black';

// Create the image and set its src
var img = new Image();
img.src = 'https://www.neonandmore.com/tooltips/question_mark.png'; 

// Create the span to wrapper the image
var span = document.createElement("span")
span.id = "backingBlackTooltip";
span.appendChild(img);

// Append it to the label parent element
labelElement.parentNode.appendChild(span);

【讨论】：