Fatal编程技术网
  • javascript/
  • JavaScript—查找具有数组语法的特定DOM元素并更新它

JavaScript—查找具有数组语法的特定DOM元素并更新它

javascript jquery dom

JavaScript—查找具有数组语法的特定DOM元素并更新它,javascript,jquery,dom,css-selectors,Javascript,Jquery,Dom,Css Selectors,我想知道是否有可能在我的DOM中找到具有以下约束的特定元素： 元素没有id，您必须遵循特定的顺序（childs中的childs） 简单语法（例如：数组的css选择器语法） 可选但首选：原生JS（香草） 例如： <body> <div></div> <div></div> <div> <div> <div>TEXT TO UPDATE&

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

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

<body>
    <div></div>
    <div></div>
    <div>
        <div>
            <div>TEXT TO UPDATE</div>
        </div>
    <div>
    <div></div>
</body>
如果我的约束太强，您有jQuery的替代解决方案吗

编辑：由于，解决方案是：

document.querySelector("body > div:nth-child(3) > div:nth-child(1) > div:nth-child(1)").innerHTML = 'UPDATED';
您在问题中提供了部分答案，因为您似乎了解
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>

document.querySelector（customSel2cssSel（“body>div[2]>div[1]>span[0]”）
>要更新的文本
如果您的问题的DOM和伪代码没有错误，我希望您能澄清它们。

document.querySelector（'body>div:nth child（3）div'）。innerHTML='UPDATED'
您显示的内容只有
div
元素。在你的实际数据中是真的吗？（这是相关的）这可能有助于我的思考：正如@RajaprabhuAravindasamy所建议的，答案是正确的。请注意，
n
是基于1的，而不是基于0的。
document.querySelector（“div>div”）.innerHTML=“UPDATED”
；将在您的示例中起作用。但是，我怀疑你的例子并不像你的问题所问的那么清楚。 
document.querySelector(customSel2cssSel("body > div[2] > div[1] > span[0]"))
> <span>TEXT TO UPDATE</span>