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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

Meteor

JSLint - a Javascript code quality tool

jsFiddle

D3.js

WebStorm

推荐书目

Javascript 权威指南第 5 版

Closure: The Definitive Guide

这是一个创建于 1818 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

15 条回复 2021-01-04 17:50:52 +08:00

pooorguy

2021-01-04 10:46:32 +08:00

用 querySelector 试试，比较方便

Exin

2021-01-04 11:02:23 +08:00

根据 "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

2021-01-04 11:03:54 +08:00 via iPhone

正则

DL9412

2021-01-04 11:05:07 +08:00

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

然后再找内容

yaphets666

2021-01-04 11:05:12 +08:00

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

yaphets666

2021-01-04 11:06:19 +08:00

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

qazwsxkevin

2021-01-04 11:17:36 +08:00

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

lqzhgood

2021-01-04 11:32:18 +08:00

@yaphets666 querySelectorAll

faceRollingKB

2021-01-04 12:12:14 +08:00

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

61162833

2021-01-04 12:16:35 +08:00

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

ianva

2021-01-04 14:44:57 +08:00

如果可以修改模板的话，可以考虑把相应的参数写在 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

2021-01-04 16:49:51 +08:00

querySelector
querySelectorAll

dd112389

2021-01-04 17:03:41 +08:00

匹配到表格然后往下找.

dd112389

2021-01-04 17:20:13 +08:00

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

2021-01-04 17:50:52 +08:00

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