如何使用 JavaScript 按標題選擇元素並更新它

Question

你如何通過它的標題來選擇和修改一個元素？

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

我需要更新代碼片段/書簽，所以當我運行它時（我的書簽欄上有它），它會改變文檔中某個元素的位置。

我可以選擇這個元素的唯一方法是通過它的title屬性。

Answer 1

CSS 選擇器

使用選擇器符號通過屬性查找節點

[title="element title attribute value"]

---

使用JavaScript

與 CSS 中的選擇器相同，但您可以使用document.querySelector獲取Node ，或者如果需要多個Nodes ，則可以通過document.querySelectorAll NodeList

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 + '}())')
    + ';';

這是一個小提琴，您可以在其中粘貼代碼