JavaScript - 使用数组语法查找特定的 DOM 元素并更新它答案

【问题标题】：JavaScript - Find a specific DOM element with array syntax and update itJavaScript - 使用数组语法查找特定的 DOM 元素并更新它
【发布时间】：2016-07-20 03:08:33
【问题描述】：

我想知道是否可以在我的 DOM 中找到具有这些约束的特定元素：

元素没有id，你必须遵循特定的顺序（childs in childs）。
简单的语法（例如：数组的 css 选择器语法）
可选但首选：原生 JS（原版）

例子：

<body>
    <div></div>
    <div></div>
    <div>
        <div>
            <div>TEXT TO UPDATE</div>
        </div>
    <div>
    <div></div>
</body>

我想做这样的事情：

document.querySelector('body > div[2] > div[0] > div[0]').innerHTML = 'UPDATED';

如果我的约束太强，你有 jQuery 的替代解决方案吗？

编辑：感谢Rajaprabhu Aravindasamy，解决方案是：

document.querySelector("body > div:nth-child(3) > div:nth-child(1) > div:nth-child(1)").innerHTML = 'UPDATED';

【问题讨论】：

document.querySelector('body > div:nth-child(3) div').innerHTML = 'UPDATED';
您显示的内容只有 div 元素。在你的实际数据中是真的吗？（这是相关的。）
这可能对我有帮助：stackoverflow.com/questions/10415016/…
正如@RajaprabhuAravindasamy 所建议的，答案是nth-child selector。请注意，n 是基于 1 而不是基于 0。
document.querySelector("div > div").innerHTML = "UPDATED";将在您的示例中起作用。但是，我怀疑您的示例并不像您的问题所问的那么清楚。

标签： javascript jquery dom css-selectors

【解决方案1】：

您在问题中提供了部分答案，因为您似乎知道 document.querySelector()。您需要一个转换函数来将您的自定义选择器转换为 CSS 选择器。

function customSel2cssSel(sel) {
    // match a nodeType followed by index brackets, use a replace function
    // to replace both grouped tokens by the CSS selector pendant
    return sel.replace(/([a-z]+)\[([0-9]+)\]/g, function(repl, nodeName, nodeIndex){
        return nodeName + ":nth-child(" + (Number(nodeIndex) + 1) + ")";
    });
}

我会说您的示例包含错误 - DOM 和选择器不匹配。

<body>
<div>dont update</div>
    <div>dont update</div>
    <div>
        <div><div>dont update</div></div>
        <div><span>TEXT TO UPDATE</span></div>
        <div><div>dont update</div></div>
    </div>
<div>dont update</div>
</body>

上面的 DOM 可以完美地使用这个选择器：

document.querySelector(customSel2cssSel("body > div[2] > div[1] > span[0]"))
> <span>TEXT TO UPDATE</span>

如果您的问题的 DOM 和伪代码没有错误，请您澄清一下。

【讨论】：