HTML tag attribute selector API All In One

HTML tag attribute selector API All In One

API

CSS attribute selector

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"]
{
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
  padding: 2px;
}

a {
  color: blue;
}

/* Internal links, beginning with "#" */
a[href^="#"] {
  background-color: gold;
}

/* Links with "example" anywhere in the URL */
a[href*="example"] {
  background-color: silver;
}

/* Links with "insensitive" anywhere in the URL,
   regardless of capitalization */
a[href*="insensitive" i] {
  color: cyan;
}

/* Links with "cAsE" anywhere in the URL,
with matching capitalization */
a[href*="cAsE" s] {
  color: pink;
}

/* Links that end in ".org" */
a[href$=".org"] {
  color: red;
}

/* Links that start with "https" and end in ".org" */
a[href^="https"][href$=".org"] {
  color: green;
}

/* All divs with a `lang` attribute are bold. */
div[lang] {
  font-weight: bold;
}

/* All divs without a `lang` attribute are italicized. */
div:not([lang]) {
  font-style: italic;
}

/* All divs in US English are blue. */
div[lang~="en-us"] {
  color: blue;
}

/* All divs in Portuguese are green. */
div[lang="pt"] {
  color: green;
}

/* All divs in Chinese are red, whether
   simplified (zh-CN) or traditional (zh-TW). */
div[lang|="zh"] {
  color: red;
}

/* All divs with a Traditional Chinese
   `data-lang` are purple. */
/* Note: You could also use hyphenated attributes
   without double quotes */
div[data-lang="zh-TW"] {
  color: purple;
}

/* Case-sensitivity depends on document language */
ol[type="a"] {
  list-style-type: lower-alpha;
  background: red;
}

ol[type="b" s] {
  list-style-type: lower-alpha;
  background: lime;
}

ol[type="B" s] {
  list-style-type: upper-alpha;
  background: grey;
}

ol[type="c" i] {
  list-style-type: upper-alpha;
  background: green;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors

Selectors Level 4

Editor’s Draft, 22 November 2022

https://w3c.github.io/csswg-drafts/selectors/#attribute-selectors

querySelectorAll

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll

https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors

demos

$$

// Chrome DevTools API,  $$
const imgs = $$(`img[src$=".gif"]`);

for(const img of imgs) {
  console.log(`img =`, img.src);
}

document.querySelectorAll

// DOM API, document.querySelectorAll
const imgs = document.querySelectorAll(`img[src$=".gif"]`);

for(const img of imgs) {
  console.log(`img =`, img.src);
}

图片批量下载器
图片批量下载爬虫

const imgs = $$(`img[src$=".gif"]`);

for(const img of imgs) {
  console.log(`iimg =`, img.src);
  const a = document.createElement(`a`);
  a.href = img.src;
  // download ✅
  a.download = img.src;
  a.target = '_blank';
  a.click();
}

canvas & toDataURL ✅

function autoDownloadImageWithCanvas(src = "https://cdn.xgqfrms.xyz/logo/icon.png") {
  const canvas = document.createElement("canvas");
  canvas.width = 300;
  canvas.height = 300;
  const ctx = canvas.getContext("2d");
  const img = document.createElement(`img`);
  // fix: Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
  // img.crossorigin = "anonymous"; // ❌
  img.setAttribute('crossorigin', 'anonymous'); // ✅
  img.src = src;
  // loaded callback
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
    // delay 
    setTimeout(() => {
      const dataURL = canvas.toDataURL();
      console.log(`dataURL =`,  dataURL);
      const a =  document.createElement(`a`);
      a.href = dataURL;
      a.download = src.slice(src.lastIndexOf(`/`) + 1);
      a.click();
    }, 0);
  }
}

autoDownloadImageWithCanvas();

URL.createObjectUR & blob

async function downloadImage(imageSrc) {
  const image = await fetch(imageSrc)
  const blob = await image.blob()
  const url = URL.createObjectURL(blob)

  const link = document.createElement('a');
  link.href = url
  link.download = imageSrc
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

const imgs = $$(`img[src$=".gif"]`);

for(const img of imgs) {
  console.log(`img =`, img.src);
  downloadImage(img.src);]
}

https://news.cjn.cn/bsy/st_20090/202208/t4216393.htm

refs

https://www.digitalocean.com/community/tutorials/how-to-select-html-elements-using-id-class-and-attribute-selectors-in-css

https://www.cnblogs.com/xgqfrms/p/16260677.html

https://www.cnblogs.com/xgqfrms/p/10517347.html

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---