1. header
   evaluate : document.head.innerHTML
   return : head html string.
   
   
   
2. body
   evaluate : document.body.innerHTML
   return : body html string.
   
   
   
3. querySelector 1
   source : <div class = "yahoo">.com</div>
   evaluate : document.querySelector(‘div.yahoo’).textContent
   return : div inner text content string.
   
   
   
4. querySelector 2
   QuerySelector can select thru hierarchy style.
   source : <div class = "yahoo">.com</div>
   evaluate : document.querySelector(‘.yahoo span’).textContent
   return : span inner text content string.
   
   
   
5. querySelectorAll 1
   evaluate : Array.from(document.querySelectorAll(‘div.list’), e => {return e.textContent})
   return : div list inner text content array
   
   
   
6. querySelectorAll 2
   querySelectorAll can set multiple parameter not only one.
   evaluate : Array.from(document.querySelectorAll(‘.food .person’), e => {return e.textContent})
   return : food and person inner text content array
   
   
   
7. Change value
   evaluate : “document.querySelector(‘div.textfield’).value = ‘union square’“
   result : div textfield inner text content changed to ‘union square’
   
   
   
8. Perform click event
   evaluate : document.querySelector(‘button.search’).click()
   result : button search performed click event.