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

• 資深大佬 : 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-*=””，然后在获取这个元素