In the browser DOM, read or update an element attribute with getAttribute() and setAttribute(), or use a corresponding element property. For id, the two stay linked in the demonstrated tests, but linked values are not always identical, and not every attribute has a corresponding property. section 12.2
A separate JavaScript technique attaches an id property to a function to recognize callbacks already stored and avoid adding duplicates. This is property-based tracking, not DOM attribute access. section 3.2.1
Listing 12.5. Accessing attribute values via DOM methods and properties
<div></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const div = document.querySelector("div"); #A
div.setAttribute("id","ninja-1"); #B
assert(div.getAttribute('id') === "ninja-1", #B
"Attribute successfully changed"); #B
div.id = "ninja-2"; #C
assert(div.id === "ninja-2", #C
"Property successfully changed"); #C
assert(div.getAttribute('id') === "ninja-2", #D
"Attribute successfully changed via property"); #D
div.setAttribute("id","ninja-3"); #E
assert(div.id === "ninja-3",
"Property successfully changed via attribute");
assert(div.getAttribute('id') === "ninja-3",
"Attribute successfully changed");
});
</script>
See how setting a div’s id through either the DOM method or the element property affects the other. section 12.2
