如何使用 JavaScript 按标题选择元素并更新它答案

【问题标题】：How to select an element by title with JavaScript and update it如何使用 JavaScript 按标题选择元素并更新它
【发布时间】：2014-10-06 06:42:25
【问题描述】：

如何通过标题选择和修改元素？

javascript: (function () {
  document.body.innerHTML += `<style>* {
    background:% 20#000 % 20!important;
    color:% 20#0f0 % 20!important;
    outline:% 20solid % 20#f00 % 201px % 20!important;
  } </style > `;
})();

我需要更新 sn-p / 小书签，所以当我运行它时（我的书签栏上有它）它会改变文档中某个元素的位置。

我可以选择这个元素的唯一方法是通过它的title 属性。

【问题讨论】：

那么 - 你试过什么代码，按标题选择项目？
注意：按名称（而不是 id）选择某些东西可以像这样工作："div[name=abcd]"，所以标题也可能这样工作......

标签： javascript html css browser jquery-selectors

【解决方案1】：

CSS Selector

使用选择器符号通过属性查找节点

[title="element title attribute value"]

使用 JavaScript

与 CSS 中的选择器相同，但您可以使用 document.querySelector 获取 Node，或者如果需要多个 Nodes，则可以通过 NodeList document.querySelectorAll

var node = document.querySelector('[title="element title attribute value"]');

当您执行.innerHTML 时，您将重新解析您调用它的节点中的所有HTML，这实际上会破坏网页的各个部分。您应该改用 DOM 方法 来创建节点。例如

var style = document.createElement('style');
style.appendChild(document.createTextNode('div {border: 1px solid red}'));
document.body.appendChild(style);

将 JavaScript 转换为书签就像

bookmarklet = 'javascript:'
    + encodeURIComponent('(function () {' + code + '}())')
    + ';';

Here is a fiddle 你可以在其中粘贴代码

【讨论】：

它只获取具有该标题的第一个元素。我如何获得所有这些？
@KolobCanyon 使用“querySelectorAll”而不是“querySelector”