JS 如何快速定位 innerHTML 对应的元素？

[qazwsxkevin]

如：
<td rowspan="4" width="20%">历史记录</td>
其最终目的是把 width="20%" 修改成 width="50%"

渲染后的整个页面，td 元素上 4 千个，
但 rowspan == 4 ,width == 20% ,nnerHTML == “历史记录” 三条件匹配的，只有这么一句。

document.getElementsByTagName('td')，再进行历遍匹配 innerHTML == “历史记录”，应该不是一个好的办法吧？

JQuery 应该是有很好，很优雅的方式完成，如果我不进行外部引用，用原生 JS 如何完成这个事情比较高效率？

[pooorguy]

用 querySelector 试试，比较方便

[Exin]

根据 "rowspan == 4 ,width == 20% ,nnerHTML == “历史记录” 三条件匹配的，只有这么一句。"

我猜 "rowspan == 4 ,width == 20%" 两条件匹配的，也不会很多？

可以用 `querySelector('td[rowspan="4"][width="20%"]')` 缩小候选范围

如果想通过一个表达式就准确的找到符合要求的那个元素，可能需要 XPath，参考这个

https://developer.mozilla.org/en-US/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript

[iwh718]

正则

[DL9412]

document.querySelectorAll('td[width="20%"][rowspan="4"]')

然后再找内容

[yaphets666]

querySelector 可以 但是想修改多个需要多次执行 querySelector 每次只选择第一个

[yaphets666]

最好渲染的时候给想修改的 td 标签一个自定义属性 这样子便于使用 querySelector 精准定位

[qazwsxkevin]

谢谢，有时间试试各位提到的方法~~

[lqzhgood]

@yaphets666 querySelectorAll

[faceRollingKB]

3 楼正解，获取 table 的 innerHTML，然后正则匹配你说的这三个特征

[61162833]

querySelectorAll 的 Selector 参数可以匹配 innerHTML 的值吗？

[ianva]

如果可以修改模板的话，可以考虑把相应的参数写在 class 上提升性能，比如 class name 为 "row-4-width-20" ，document.querySelectorAll(".row-4-width-20")，或者 document.getElementsByClassName("row-4-width-20")

当然更有问题的是，这个 rowspan == 4 ,width == 20% 作为 selector 是非常不稳定的，设计稍微一变就成历史遗留问题了，如果这行是表达谋个业务的，最好根据业务定一个 class name，然后去筛选，否则未来代码是不可维护的。

[myCupOfTea]

querySelector
querySelectorAll

[dd112389]

匹配到表格然后往下找.

[dd112389]

let tab = document.querySelector('table');
let tds = tab.querySelectorAll('td[rowspan="4"][width="20%"]');
let fragment = document.createDocumentFragment();
for (let i = 0; i < tds.length; i++) {
let td = fragment.append(tds[i]);
td.style.width = '50%';
}
......

[limingzheng]

自定义个属性给赋值 id，data-*=""，然后在获取这个元素