Level 102
Level 104
20 words 0 ignored
Ready to learn
Ready to review
Ignore words
Check the boxes below to ignore/unignore words, then click save at the bottom. Ignored words will never appear in any learning session.
Ignore?
When do you want to find HTML elements?
Often, with JavaScript, you want to manipulate HTML elements.
What is the first thing to do to be able to manipulate an element?
To do so, you have to find the elements first. There are a couple of ways to do this:
What is the easiest way to find an element?
The easiest way to find an HTML element in the DOM, is by using the element id.
This example finds the element with id="intro":
What is the syntax of finding an element by id?
var x = document.getElementById("intro");
What if an element is not found?
var x = document.getElementsByTagName("p");
How to find all <p> elements?
var x = document.getElementById("main");
How to find an element with id="main", and then find all <p> elements inside "main":
document.getElementById("main").getElementsByTagName("p");
var y = x.getElementsByTagName("p");
Why is it possible?
if x can have method then getElementByTagName can have the same method too.
document.getElementById("alma")?
we say that find in the document the element with a alma ID
x.getElementById("alma")?
we say that find in x element the element with a alma ID
How to find all HTML elements with the same class name?
If you want to find all HTML elements with the same class name, use getElementsByClassName().
var x = document.getElementsByClassName("intro");
What is the syntax of it?
Why do we save returned value in a variable?
so that we can continue with that handler later on that page.
When does finding elements by class name not work
Finding elements by class name does not work in Internet Explorer 8 and earlier versions.
What do I use if i want to find all HTML elements that matches a specified CSS selector?
If you want to find all HTML elements that matches a specified CSS selector (id, class names, types, attributes, values of attributes, etc), use the querySelectorAll() method.
var x = document.querySelectorAll("p.intro");
This example returns a list of all <p> elements with class="intro".
When does the querySelectorAll() does not work?
The querySelectorAll() method does not work in Internet Explorer 8 and earlier versions.
var x = document.getElementById("frm1");
This example finds the form element with id="frm1", in the forms collection, and displays all element values:
document.anchors
Returns all <a> elements that have a name attribute
