【JavaScript / DOM】要素ノードの属性情報 - getAttribute / setAttribute / getAttributeNames / removeAttribute
JavaScript/DOMの属性操作を解説します。
値の取得（属性名 / getAttribute）
属性値の取得はプロパティとメソッドの２つの方法があります。
プロパティ（属性名）
<input id="item" type="text" name="content" required>
<script type="text/javascript">
let element = document.getElementById('item');
console.log(element.name);
</script>contentメソッド（getAttribute）
<input id="item" type="text" name="content" required>
<script type="text/javascript">
let element = document.getElementById('item');
console.log(element.getAttribute('name'));
</script>content値の設定（属性名=値 / setAttribute）
属性値の設定はプロパティとメソッドの２つの方法があります。
プロパティ（属性名=値）
<input id="item" type="text" name="content" required>
<script type="text/javascript">
let element = document.getElementById('item');
console.log(element.name);
element.name = 'word';
console.log(element.name);
</script>content
wordメソッド（setAttribute）
<input id="item" type="text" name="content" required>
<script type="text/javascript">
let element = document.getElementById('item');
console.log(element.getAttribute('name'));
element.setAttribute('name', 'word');
console.log(element.getAttribute('name'));
</script>content
word属性ノード追加（setAttributeNode）
属性ノードの追加はsetAttributeNodeメソッドを使います。
<input id="item" type="text" name="content" required>
<script type="text/javascript">
let element = document.getElementById('item');
let node = document.createAttribute('value');
node.value = "Hello World!";
console.log(element.getAttribute('value'));
element.setAttributeNode(node);
console.log(element.getAttribute('value'));
</script>null
Hello World!属性一覧（attributes / getAttributeNames）
属性一覧の取得はプロパティとメソッドの２つの方法があります。
プロパティ（attributes）
<input id="item" type="text" name="content" required>
<script type="text/javascript">
let element = document.getElementById('item');
let attrs = element.attributes;
console.log(attrs);
for( let attr of attrs ) {
console.log(attr);
}
</script>NamedNodeMap {0: id, 1: type, 2: name, 3: required, id: id, type: type, name: name, required: required, length: 4}
id="item"
type="text"
name="content"
required=""メソッド（getAttributeNames）
<input id="item" type="text" name="content" required>
<script type="text/javascript">
let element = document.getElementById('item');
let attrs = element.getAttributeNames();;
console.log(attrs);
for( let attr of attrs ) {
console.log(attr);
}
</script>(4) ['id', 'type', 'name', 'required']
id
type
name
required削除（removeAttribute）
属性の削除はremoveAttributeメソッドを使います。
<input id="item" type="text" name="content" required>
<script type="text/javascript">
let element = document.getElementById('item');
console.log(element.getAttributeNames());
element.removeAttribute('required');
console.log(element.getAttributeNames());
</script>['id', 'type', 'name', 'required']
['id', 'type', 'name']
