Question

We are going to use the developer tools and the DOM function document.QuerySelectorAll(css_selector_string) to test some selectors and look at document structure.

a.What is the CSS selector that you would use to select all the <code> elements? How many are there?

b.What is the CSS selector that you would use to select all the <code> elements contained in <pre>elements? How many are there? Are there more or less than above. Why?

c.What is the CSS selector that you would use to select all the <figure> elements? How many are there?

d.What is the CSS selector that you would use to select all the <img> elements? How many are there? Is this different from the above? Why?

Answer 1

//a.
var code = document.QuerySelectorAll("code");
console.log("Total <code> elements: "+code.length);
//b.
var preCode = document.QuerySelectorAll("pre>code");
console.log("Total <code> elements in <pre> tag: "+preCode.length);
console.log("Is code.length is > preCode.length");
console.log(code>preCode);
//c.
var figures = document.QuerySelectorAll("figure");
console.log("Total <figure> elements: "+figures.length);
//d.
var img = document.QuerySelectorAll("img");
console.log("Total <img> elements: "+img.length);
console.log(img.length+">"+figures.length+"="+(img.length>figures.length));