【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>
// 指定要素について特定の名前の属性値を取得 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); }