Question

In: Computer Science

Rewrite the query methods used in the JS statements in lines 17, 18, 19, and 20...

Rewrite the query methods used in the JS statements in lines 17, 18, 19, and 20 by using querySelector() or querySelectorAll() methods. Note that your code has to return the same outputs on the console (in a browser's developer tab, Ctrl + Shift + J) before you make the changes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
   <title>Access HTML elements </title>
</head>  
<body>
   <section id="main">
       <h1>The 2011-2012 Speaker Lineup </h1>
       <p class="blue">October 19, 2011: Jeffrey Toobin </p>
       <p class="blue">November 16, 2011: Andrew Ross Sorkin </p>
   </section>
   <footer>
       <p class="right">Copyright 2012 </p>
   </footer>
   <script>
       var sec = document.getElementById('main');//return the <section> element which has id="main"
       var list1 = document.getElementsByTagName('p');//return the HTMLCollection object containing 3 <p> elements that belongs to class="blue"
       var list2 = sec.getElementsByTagName('p');//return the HTMLCollection object containing 2 <p> elements
       var list3 = sec.getElementsByClassName('blue'); ////return the HTMLCollection object containing 2 <p> elements in the <section> element
      
       console.log(sec);
       console.log(list1);
       console.log(list2);
       console.log(list3);  
   </script>
</body>

Solutions

Expert Solution

The Document method querySelector() returns the first element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned. The selector can be of any type. It can be a class (.myclass), id (#myid) etc.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Access HTML elements </title>
</head>
<body>
   <section id="main">
       <h1>The 2011-2012 Speaker Lineup </h1>
       <p class="blue">October 19, 2011: Jeffrey Toobin </p>
       <p class="blue">November 16, 2011: Andrew Ross Sorkin </p>
   </section>
   <footer>
       <p class="right">Copyright 2012 </p>
   </footer>
   <script>

   var sec = document.querySelector("#main"); // code added for returning the <section> element which has id="main"

   var list1 = document.querySelectorAll("p"); //code added to return the NodeList object containing 3 <p> elements

   var list_blue = document.querySelectorAll(".blue") //code added to return the NodeList object containing 2 <p> elements with class blue

    var list2 = sec.querySelectorAll("p"); //return the NodeList object containing 2 <p> elements

var list3 = sec.querySelectorAll(".blue"); //return the NodeList object containing 2 <p> elements in the <section> element

console.log(sec);
console.log(list1);
console.log(list2);
console.log(list3);

// console.log(list_blue); // for giving the output of 2 <p> elements which has class blue

   </script>
</body>
</html>

P.S:  var list1 = document.getElementsByTagName('p');//return the HTMLCollection object containing 3 <p> elements that belongs to class="blue" returns all the <p> elements and it doesn't select the class with the class="blue".

Output :

venereology answered 1 day ago
Next > < Previous

Related Solutions

17, 18, 18, 18, 19, 20, 20, 20, 20, 21, 21, 21, 21, 22, 22, 22,...
17, 18, 18, 18, 19, 20, 20, 20, 20, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, 23,23, 24,24,24,24,24,24,24,24,25,26,26,26,26,26,26,27,27,27,27,27,28,28,29,31,31,32,32,34,35,38 use the data to do the following: 1. sample mean 2. median 3. mode 4. standard deviation
A 20 year loan is repaid by a decreasing annuity of 20, 19, 18, 17, ....,...
A 20 year loan is repaid by a decreasing annuity of 20, 19, 18, 17, ...., 3, 2, 1, and payments are made at the end of each year. The annual effectuve interest rate is 7%. Determine the row of an amortization table associated with the 11th payment.
Given the following numbers:   25 16 61 18 15 20 15 20 24 17 19 28,...
Given the following numbers:   25 16 61 18 15 20 15 20 24 17 19 28, derive the mean, median, mode, variance, standard deviation, skewness, kurtosis, range, minimum, maximum, sum, and count. Interpret your results. What is the empirical rule for two standard deviations of the data?
Given the following numbers: 25 16 61 18 15 20 15 20 24 17 19 28,...
Given the following numbers: 25 16 61 18 15 20 15 20 24 17 19 28, derive the mean, median, mode, variance, standard deviation, skewness, kurtosis, range, minimum, maximum, sum, and count. Interpret your results. What is the empirical rule for two standard deviations of the data?
Table - 02 Hardwood Concentration 5% 10% 15% 20% 7 12 14 19 8 17 18...
Table - 02 Hardwood Concentration 5% 10% 15% 20% 7 12 14 19 8 17 18 25 15 13 19 22 11 18 17 23 9 19 16 18 10 15 18 20 A manufacturer of paper used for making grocery bags is interested in improving the tensile strength of the product. Product engineering thinks that tensile strength is a function of the hardwood concentration in the pulp and that the range of hardwood concentrations of practical interest is between...
Group 1: Control - 20, 14, 18, 16, 17, 17 Group 2: Psychodynamic - 20, 9,...
Group 1: Control - 20, 14, 18, 16, 17, 17 Group 2: Psychodynamic - 20, 9, 10, 15, 15, 15 Group 3: Rational-Emotive - 18, 7, 15, 9, 11, 12 Group 4: Behavior Modification - 15, 5, 6, 13, 12, 9 Use Tukey's HSD to compare the individual means. What is q critical (from Table L)? (1 point) What is MS within (a.k.a. MS error in some output)? (1 point) What is n? (1 point) Compute HSD. (1 point) Are...
Low Medium High 14 18 16 6 17 20 11 23 18 12 17 16 11...
Low Medium High 14 18 16 6 17 20 11 23 18 12 17 16 11 10 15 9 20 16 6 15 16 12 17 17 14 25 11 11 11 13 4 18 22 9 18 16 7 20 10 12 21 18 12 27 9 17 13 19 11 22 16 8 17 12 Our worksheets lists the number of 3+ syllable words in each magazine grouped by education level. Use your spreadsheet program to conduct a...
Read the statements. Identify the form of the conditional used in each statement. Then rewrite that...
Read the statements. Identify the form of the conditional used in each statement. Then rewrite that statement according to the conditional as listed.                                                                 [1+2x2=6] If we use applications like Zoom and WebEx, lecturers struggle with classroom engagement. 23. Identify the conditional ………….. [1] 24. Rewrite the statement in the third conditional. [2] If we adjust to online learning, we must buy different devices. 25. Identify the conditional 26. Rewrite the statement in the second conditional
For the stress data given below with the nearest error of 1: 27-17-11-24-36-13-29-22-18 23-30-12-46-17-32-48-11-18 18-32-26-24-38-24-15-13-13 18-21-27-20-16-15-37-19-19...
For the stress data given below with the nearest error of 1: 27-17-11-24-36-13-29-22-18 23-30-12-46-17-32-48-11-18 18-32-26-24-38-24-15-13-13 18-21-27-20-16-15-37-19-19 a) Construct a frequency distribution table. b) Construct the three types of statistical graphs. c) Determine the (1) Mean, (2) Median, (3) Mode, (4) Range, Variance, and (6) Standard Deviation.
1) Modify all methods that have used count, especially rewrite length method by traversing the list...
1) Modify all methods that have used count, especially rewrite length method by traversing the list and counting no. of elements. import java.util.*; import java.io.*; public class Qup3 implements xxxxxlist {// implements interface    // xxxxxlnk class variables    // head is a pointer to beginning of rlinked list    private node head;    // no. of elements in the list    // private int count; // xxxxxlnk class constructor    Qup3() {        head = null;       ...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT