// HTML
<img id="logo" src="https://wings.msn.to/images/wings.jpg"
  height="67" width="215" title="WINGSロゴ" alt="WINGSのALT" />

// JS
let pic = document.querySelector("#logo")

// 一つの属性を取得
console.log(pic.getAttribute("title"))

// すべての属性を取得
let /* NamedNodeMap */ attrs = pic.attributes
for (let attr of attrs) {
  console.log(`${attr.name}=${attr.value}`)
}

var timer_id;
document.getElementById('start_stop').addEventListener('click', function() {

  if (this.innerHTML == 'START') {
    start = new Date();
    
    // タイマー開始
    timer_id = setInterval(goTimer, 10);
    
    // STOPボタンにする
    this.innerHTML = 'STOP'; // html要素を書き換える
    this.classList.remove('btn-primary'); // class属性を消す
    this.classList.add('btn-danger'); // class属性を追加
  } else {
    // STARTボタンにする
    this.innerHTML = 'START';
    this.classList.remove('btn-danger');
    this.classList.add('btn-primary');

    // タイマーを止める
    clearInterval(timer_id);
 }
}

<script>
  document.getElementById('timer').innerHTML = '00:01:00';
</script>

const elements = document.getElementsByTagName('div')
Array.prototype.forEach.call(elements, element => {
  console.log(element)
})

var img;
img = document.createElement('img');
img.setAttribute('src', images[0].path); // 属性をつける
document.getElementById('img_unit').appendChild(img); // 子要素として追加

// JS (属性)
let imgs = document.querySelectorAll('img')
for (let img of imgs) {
  if (!img.hasAttribute(attr)) {
    img.setAttribute(/*attr-name*/, /*attr-value*/)
  }
}

// JS (プロパティ)
let url = link.href
link.href = 'https://wings.msn.to/'

// HTML
<form>
  <div>
    <label for="name">氏名:</label>
    <input id="name" type="text" name="name" value="匿名" />
  </div>
  <input id="btn" type="button" value="送信" />
</form>

// JS
let member = document.querySelector("#name")
document.querySelector("#btn").addEventListener('click', () => {
  console.log(member.value) // 氏名の入力値
  console.log(member.getAttribute('value') // 初期値: 匿名
}, false)

// 状況次第で記述が変化する
disabled = "disabled" // 属性:OFF -> elem.disabled -> false, elem.getAttribute('disabled') -> false
disabled = "" // 属性: NONE -> elem.getAttribute('disabled')は, 属性値が存在する場合のみ`disable`が返る.
disabled // プロパティ: OFF -> elem.disabled -> false

// HTML
// インラインスタイルに対するアクセス
<div style="color: Red">赤</div>

// JS
let divElem = document.querySelector("div")
divElem.addEventListener('mouseenter', () => {
  divElem.style.color='Yello'
  divElem.style.backgroundColor='Black'
}, false)

// HTML
<p class="hoge foo bar piyo hoge">テスト</p>

# DOMTokenList: 配列ライクオブジェクト
| 0    | 1   | 2   | 3    | 4    | 
| hoge | foo | bar | piyo | hoge |

// JS
let pElem = docuemnt.querySelector('p')
let /* DOMTokenList */ clazzList = pElem.classList
pElem.addEventListener('click', () => {
  for (let clazz of clazzList) {
    console.log(`${clazz}`)
  }
}, false)

// CSS (css/class_list.css)
.highlight {
  background-color: 'Yellow'
}

// HTML
<link rel="stylesheet" href="css/class_list.css" />
<div id="my-div">マウスポインタ</div>

// JS
let divElem = document.getElementById("my-div")
divElem.addEventListener('mouseenter', () => {
  divElem.classList.add('highlight')
}, false)

// DocumentFragmentでコンテンツ(DOMElementの塊)を構築してから
// まとめてDOMツリーに追加する

let frag = document.createDocumentFragment()
...
frag.append(elem1)
...
frag.append(elem2)
...

...

targetElem.append(frag) // DOMの塊を一気に追加