【JavaScript】jQueryを使わずに属性操作系の処理を書く

HTML

<div id="main" class="foo">
  <a href="#piyo" class="piyo">PIYO</a>
  <input type="text" name="name" size="40" class="hoge">
</div>

JavaScript

// 指定要素について特定の名前の属性値を取得
document.querySelector('#main').getAttribute('class'); // foo
document.querySelector('.piyo').getAttribute('href'); // #piyo

// 属性追加
document.getElementById('main').setAttribute('style', 'width: 30px; height: 30px; background-color: green;');
// setAttributeは上書き。さっき指定していた高さと背景色は削除される
document.getElementById('main').setAttribute('style', 'width: 300px;');

// 属性削除
document.getElementById('main').removeAttribute('style');

// 属性存在チェック
document.querySelector('.piyo').hasAttribute('href'); // true
document.querySelector('.piyo').hasAttribute('target'); // false

// 指定要素のすべての属性を取得
var attributes = document.querySelector('.hoge').attributes;
for (var i = 0; i < attributes.length; i++) {
  console.log(attributes[i].name + ':' + attributes[i].value);
}