使用 'vanilla' javascript 处理动态添加的 HTML 元素答案

【问题标题】：Manipulate HTML elements added dynamically with 'vanilla' javascript使用 'vanilla' javascript 处理动态添加的 HTML 元素
【发布时间】：2016-09-16 15:23:56
【问题描述】：

我正在创建一个 JavaScript 插件，它需要在通过 JavaScript 操作之前在网页上呈现相当大/复杂的 HTML 结构。我根本不想使用 jQuery。

我希望能够将所有必需的代码捆绑在一个 JS 文件中，该文件可以加载到父网页中，然后它会“做它的事情”。我宁愿父页面不必包含任何额外的 HTML/CSS 才能工作 - 我希望所有内容都来自单个 JS 资源。

目前我在一个 JavaScript 变量中有一大块 HTML 作为字符串：

var templateBirthday = '\
    <section class="pwag-clearfix pwag-birthday-groups">\
        <div class="pwag-clearfix pwag-birthday-groups__inner">\
            <div class="pwag-birthday-group">\
                <p class="pwag-birthday-group__instruction">Enter the year of your birth</p>\
                <div class="pwag-date-box pwag-date-box--valid pwag-date-box--0">\
                    <span class="pwag-date-box__value">1</span>\
                    <span class="pwag-date-box__placeholder">Y</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
                <div class="pwag-date-box pwag-date-box--valid pwag-date-box--1">\
                    <span class="pwag-date-box__value">9</span>\
                    <span class="pwag-date-box__placeholder">Y</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
                <div class="pwag-date-box pwag-date-box--2">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">Y</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
                <div class="pwag-date-box pwag-date-box--3">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">Y</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
            </div>\
            <div class="pwag-birthday-group">\
                <p class="pwag-birthday-group__instruction">Enter the month of your birth</p>\
                <div class="pwag-date-box pwag-date-box--4">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">M</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
                <div class="pwag-date-box pwag-date-box--5">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">M</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
            </div>\
            <div class="pwag-birthday-group">\
                <p class="pwag-birthday-group__instruction">Enter the day of your birth</p>\
                <div class="pwag-date-box pwag-date-box--6">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">D</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
                <div class="pwag-date-box pwag-date-box--7">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">D</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
            </div>\
        </div>\
        <div class="pwag-clearfix pwag-feedback">\
            <span class="pwag-feedback__message pwag-feedback__message--year">The year you entered is invalid</span>\
            <span class="pwag-feedback__message pwag-feedback__message--month">The month you entered is invalid</span>\
            <span class="pwag-feedback__message pwag-feedback__message--day">The day you entered is invalid</span>\
            <span class="pwag-feedback__message pwag-feedback__message--notLegal">You are not old enough to enter this site</span>\
        </div>\
    </section>\
';

然后我将其渲染到父页面中，如下所示：

function appendHtml(el, str) {
    var div = document.createElement('div');
    div.innerHTML = str;
    while (div.children.length > 0) {
        el.appendChild(div.children[0]);
    }
}

appendHtml(document.body, templateBirthday);

它工作正常；我在页面上看到了 HTML。但是，现在我需要能够从同一个 JS 文件中操作各种 HTML 元素。例如，我想这样做：

document.querySelectorAll('.pwag-date-box')[0].style.border = '10px solid #f00';

但是，由于 HTML 是动态插入的，因此似乎无法通过使用 vanilla JS 中的标准 document.querySelectorAll 类型的方法访问它。

我担心我唯一的选择可能是将大量的 HTML 创建为“正确的”JavaScript 对象而不是字符串。我希望有一种方法可以欺骗并使用 HTML 字符串。

有谁知道是否可以在作为字符串插入 DOM 的 HTML 上使用标准 JS 选择器？

非常感谢，

丹

【问题讨论】：

对不起，那是我的伪代码 :) 我已经修改了问题，所以它应该只返回一个要修改的节点。
这取决于您何时要在事件上操作 html- 或在插入事件之后。无论如何它应该可以工作，只要确保在插入后对其进行操作
如果您要搜索类名，我建议您使用 getElementsByClassName。否则，只要在添加 html 元素后编辑文档就可以了。这样做的原因是 getElementsByClassName 返回变量列表而不是静态列表。更多信息在这里：stackoverflow.com/a/18735248/6270761
@sTx - 我相信这是一个执行顺序问题。谢谢你的推动。正在调查...
只要您注意操作顺序，脚本就可以工作（fiddle）

标签： javascript dom

【解决方案1】：

您可以在将节点插入文档树之前对其进行操作。

let frag = new Range().createContextualFragment(str);
let newNodes = frag.querySelectorAll(".pwag-date-box")

// do modifications on newNodes here

el.appendChild(frag)

【讨论】：

【解决方案2】：

简单的解决方案是使用document.getElementsByClassName()。希望对你有帮助...

var templateBirthday = '\
    <section class="pwag-clearfix pwag-birthday-groups">\
        <div class="pwag-clearfix pwag-birthday-groups__inner">\
            <div class="pwag-birthday-group">\
                <p class="pwag-birthday-group__instruction">Enter the year of your birth</p>\
                <div class="pwag-date-box pwag-date-box--valid pwag-date-box--0">\
                    <span class="pwag-date-box__value">1</span>\
                    <span class="pwag-date-box__placeholder">Y</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
                <div class="pwag-date-box pwag-date-box--valid pwag-date-box--1">\
                    <span class="pwag-date-box__value">9</span>\
                    <span class="pwag-date-box__placeholder">Y</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
                <div class="pwag-date-box pwag-date-box--2">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">Y</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
                <div class="pwag-date-box pwag-date-box--3">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">Y</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
            </div>\
            <div class="pwag-birthday-group">\
                <p class="pwag-birthday-group__instruction">Enter the month of your birth</p>\
                <div class="pwag-date-box pwag-date-box--4">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">M</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
                <div class="pwag-date-box pwag-date-box--5">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">M</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
            </div>\
            <div class="pwag-birthday-group">\
                <p class="pwag-birthday-group__instruction">Enter the day of your birth</p>\
                <div class="pwag-date-box pwag-date-box--6">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">D</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
                <div class="pwag-date-box pwag-date-box--7">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">D</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
            </div>\
        </div>\
        <div class="pwag-clearfix pwag-feedback">\
            <span class="pwag-feedback__message pwag-feedback__message--year">The year you entered is invalid</span>\
            <span class="pwag-feedback__message pwag-feedback__message--month">The month you entered is invalid</span>\
            <span class="pwag-feedback__message pwag-feedback__message--day">The day you entered is invalid</span>\
            <span class="pwag-feedback__message pwag-feedback__message--notLegal">You are not old enough to enter this site</span>\
        </div>\
    </section>\
';

function appendHtml(el, str) {
    var div = document.createElement('div');
    div.innerHTML = str;
    while (div.children.length > 0) {
        el.appendChild(div.children[0]);
    }
}

appendHtml(document.body, templateBirthday);

//using document.getElementsByClassName() instead of document.querySelectorAll()
document.getElementsByClassName('pwag-date-box')[0].style.border = '10px solid #f00'

&lt;body&gt; &lt;/body&gt;

【讨论】：

和document.querySelectorAll没有任何关系：jsfiddle.net/ddLdbrko
是的。但是，querySelectorAll() 用于复杂查询。在这种情况下，我们可以通过getElementsByClassName() 来实现
确实 - 这是一个执行顺序问题。谢谢。
有一个简单而一致的接口用于查询 DOM，我不允许将它用于“简单”的事情吗？ O.o 对不起，那是垃圾:) 这仍然与 TO 的问题无关
@Dan 这不应该是公认的答案——至少在给出的解释下是这样。