MENU
Selecting Elements
Elements can be obtained by id, name, class, tag or CSS selector.
RESETRUNFULL
RESETRUNFULL
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head></head><body>
<p id="remark1">"We see a lot of feature-driven product design in which the cost of features is not properly accounted. Features can have a negative value to customers because they make the products more difficult to understand and use. We are finding that people like products that just work. It turns out that designs that just work are much harder to produce than designs that assemble long lists of features."
<br/><strong class="writerA">- Douglas Crockford, JavaScript: The Good Parts</strong>
<button name="button">OK</button></p>
<p id="remark2">You're building your own maze, in a way, and you might just get lost in it."
<br/><strong class="writerB goodWriter">- Marijn Haverbeke, Eloquent JavaScript: A Modern Introduction to Programming</strong>
<button name="button">OK</button></p>
<p id="remark3">"You should imagine variables as tentacles, rather than boxes. They do not contain values; they grasp them -- two variables can refer to the same value."
<br/><strong class="writerB goodWriter">- Marijn Haverbeke, Eloquent JavaScript: A Modern Introduction to Programming</strong>
<button name="button">OK</button></p>
<script> // i. returns Element
var p3 = document.getElementById("remark3"); // over entire document by id
var a3 = p3.querySelector("strong.writerB"); // over element by CSS --> first match
console.log(a3.parentElement.id); // remark3
console.log(a3.closest("p").id); // remark3 --> closest ancestor by CSS // ii. returns NodeList
document.getElementsByName("button").
forEach((val,ind,arr)=>{
console.log(val instanceof HTMLElement,
arr.length); // true 3 ... *3
});
console.log(document.querySelectorAll(
"body *")[2].tagName); // strong // iii. returns HTMLCollection
document.body.getElementsByClassName(
"writerB goodWriter")[1].style.color = "red";
document.getElementsByTagNameNS(
"http://www.w3.org/1999/xhtml","strong")[1].
innerHTML = "- Marijn Haverbeke";
</script></body></html>