V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
qazwsxkevin
V2EX  ›  JavaScript

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

  •  
  •   qazwsxkevin · 2021-01-04 10:37:49 +08:00 · 2434 次点击
    这是一个创建于 1419 天前的主题,其中的信息可能已经有所发展或是发生改变。
    如:
    <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
        1
    pooorguy  
       2021-01-04 10:46:32 +08:00
    用 querySelector 试试,比较方便
    Exin
        2
    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
        3
    iwh718  
       2021-01-04 11:03:54 +08:00 via iPhone
    正则
    DL9412
        4
    DL9412  
       2021-01-04 11:05:07 +08:00
    document.querySelectorAll('td[width="20%"][rowspan="4"]')

    然后再找内容
    yaphets666
        5
    yaphets666  
       2021-01-04 11:05:12 +08:00
    querySelector 可以 但是想修改多个需要多次执行 querySelector 每次只选择第一个
    yaphets666
        6
    yaphets666  
       2021-01-04 11:06:19 +08:00
    最好渲染的时候给想修改的 td 标签一个自定义属性 这样子便于使用 querySelector 精准定位
    qazwsxkevin
        7
    qazwsxkevin  
    OP
       2021-01-04 11:17:36 +08:00
    谢谢,有时间试试各位提到的方法~~
    lqzhgood
        8
    lqzhgood  
       2021-01-04 11:32:18 +08:00
    @yaphets666 querySelectorAll
    faceRollingKB
        9
    faceRollingKB  
       2021-01-04 12:12:14 +08:00
    3 楼正解,获取 table 的 innerHTML,然后正则匹配你说的这三个特征
    61162833
        10
    61162833  
       2021-01-04 12:16:35 +08:00
    querySelectorAll 的 Selector 参数可以匹配 innerHTML 的值吗?
    ianva
        11
    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
        12
    myCupOfTea  
       2021-01-04 16:49:51 +08:00
    querySelector
    querySelectorAll
    dd112389
        13
    dd112389  
       2021-01-04 17:03:41 +08:00
    匹配到表格然后往下找.
    dd112389
        14
    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
        15
    limingzheng  
       2021-01-04 17:50:52 +08:00
    自定义个属性给赋值 id,data-*="",然后在获取这个元素
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1726 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 16:44 · PVG 00:44 · LAX 08:44 · JFK 11:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.