• oElement.id
• oElement.getAttribute(“ID”)
• oElement.getAttributeNode(“ID”).value
• oElement.getAttributeNode(“ID”).nodeValue
• oElement.attributes.getNamedItem(“ID”).value
• oElement.attributes.getNamedItem(“ID”).nodeValue

oElement.id

oElement.idは、HTML要素のid属性に直接アクセスする簡潔な方法です。このプロパティは、HTML要素のid値を文字列として返します。もし対象の要素がid属性を持っていない場合は、空文字列を返します。

例

<div id="example-id">Sample</div>

const element = document.getElementById("example-id");
console.log(element.id); // "example-id"
    

oElement.getAttribute(“ID”)

oElement.getAttribute("ID")は、要素の属性値を取得する一般的な方法です。このメソッドは属性名を文字列で指定し、その値を取得します。大文字と小文字が区別されません（HTML文書の場合）。属性が存在しない場合はnullを返します。

例

<div ID="example-id">Sample</div>

const element = document.querySelector("div");
console.log(element.getAttribute("ID")); // "example-id"
    

oElement.getAttributeNode(“ID”).value

oElement.getAttributeNode("ID")は、指定した属性のAttrオブジェクトを返します。そのvalueプロパティを使って、属性値を取得できます。もし属性が存在しない場合はnullを返します。

例

<div ID="example-id">Sample</div>

const element = document.querySelector("div");
const attrNode = element.getAttributeNode("ID");
if (attrNode) {
    console.log(attrNode.value); // "example-id"
}
    

oElement.getAttributeNode(“ID”).nodeValue

oElement.getAttributeNode("ID").nodeValueもgetAttributeNodeで取得したAttrオブジェクトの値を参照します。ただし、nodeValueは一般的にvalueと同じ値を返します。

例

<div ID="example-id">Sample</div>

const element = document.querySelector("div");
const attrNode = element.getAttributeNode("ID");
if (attrNode) {
    console.log(attrNode.nodeValue); // "example-id"
}
    

oElement.attributes.getNamedItem(“ID”).value

oElement.attributes.getNamedItem("ID").valueは、指定された名前の属性をNamedNodeMapオブジェクトから取得し、そのvalueプロパティを参照する方法です。

例

<div ID="example-id">Sample</div>

const element = document.querySelector("div");
const namedItem = element.attributes.getNamedItem("ID");
if (namedItem) {
    console.log(namedItem.value); // "example-id"
}
    

oElement.attributes.getNamedItem(“ID”).nodeValue

oElement.attributes.getNamedItem("ID").nodeValueは、getNamedItemで取得した属性のnodeValueプロパティを参照します。この方法もvalueと同じ結果を得ることができます。

例

<div ID="example-id">Sample</div>

const element = document.querySelector("div");
const namedItem = element.attributes.getNamedItem("ID");
if (namedItem) {
    console.log(namedItem.nodeValue); // "example-id"
}