使用JavaScript选择棘手的HTML元素

Selecting tricky HTML Element using JavaScript

本文关键字：HTML 元素 JavaScript 选择 使用      更新时间：2023-09-26

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

应该这样做。确保在文档加载之前不要运行此代码：

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. 将span（及其子级<img>）附加到<label>的父级，实际上与在"关闭</label>标记后"添加它相同

此外，它已被编辑，以便在找到与所有标准匹配的第一个<label>之后停止。jsfiddle链接已更新以反映此更改

您需要执行以下操作：

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);
相关文章：