JS API Selector

by ytyaru

HTML

<h1>h1-1</h1>
<h1>h1-2</h1>

<p id="A">xxxxx</p>
<p name="B">xxxxx</p>

<ul>
  <li class="item">1</li>
  <li class="item">2</li>
</ul>

<p><span>span1</span> <span>span2</span></p>
<span>span1<span>one</span></span> <span>span2<span>two</span></span>

CSS

body {
  background-color: #000000;
  color: #888888;
}

JavaScript

// JavaScript 標準API セレクタ
// jQuery版 https://jsfiddle.net/ytyaru/vddthq5e/
document.getElementById("A").textContent = "AAAAA";

var h1 = document.getElementsByTagName("h1");
for (var i=0; i<h1.length; i++) {
	h1[i].textContent = "HHHHH";
}

var B = document.getElementsByName("B");
for (var i=0; i<B.length; i++) {
	B[i].textContent = "BBBBB";
}

var item = document.getElementsByClassName("item");
for (var i=0; i<item.length; i++) {
	item[i].textContent = "ITEM";
}

document.querySelector("span").textContent = "SPAN";

var inspan = document.querySelectorAll("span span");
for (var i=0; i<inspan.length; i++) {
	inspan[i].textContent = "INSPAN";
}