javascript - 如何通过属性获取元素中的元素并用纯js更新它的节点？

Question

我有一个像这样的html标签:

<div data-ctrl="master">
    <div data-text="txtName"></div>
</div>
<div data-ctrl="master">
    <div ><span data-text="txtName"></span> Wiratama</div>
</div>

在 js 代码中我有:

var txtName = 'Yoza';

我想使用纯js将html插入到文档中具有属性data-text="txtName"的元素中，并在具有data-ctrl="master"的元素中插入html。

function updateData(txtName){
var html = '<b>' + txtName + '</b>';
//update data for every element with attribute data-text txtName here
var allElements = document.getElementsByTagName('*');
        for (var i = 0, n = allElements.length; i < n; i++) {
            if (allElements[i].getAttribute("data-text") !== null) {
                if (allElements[i].getAttribute("data-text") === 'txtName') {
                    console.log(nodeTemplate);
                    //                    allElements[i].innerHTML = html;
                }

            }
        }
}

这是我尝试过的 js 代码。

Answer 1

使用querySelectorAll返回与您的选择匹配的节点列表。然后迭代它们中的每一个，并根据需要设置 innerHTML:

function updateData(txtName){
    var nodes = document.querySelectorAll('[data-ctrl="master"] [data-text="txtName"]');
    for (i = 0; i < nodes.length; ++i) {
        nodes[i].innerHTML = "<b>" + txtName + "</b>";
    }
};

updateData("Yoza");

<div data-ctrl="master">
    <div data-text="txtName"></div>
</div>
<div data-ctrl="master">
    <div ><span data-text="txtName"></span> Wiratama</div>
</div>