in coda2 pull external site to inpect element and code

#In coda2 pull external site to inpect element and code code#

To solve that problem, the $$ shortcut has an interesting extra feature: instead of returning a pure NodeList like document.querySelectorAll(), the $$ shortcut gives you all of the Array methods, including map(). But the problem is that you only want the anchor links and the related text, not all the properties of the anchor links. The $$('a') shortcut helps with that: it selects the anchor links and all of the properties for each anchor link.

However, suppose you don't want to display all the information, but you want to grab it as data and then select only some of the data. $$('a') is short for document.querySelectorAll('a'). $() and $$() are shorter versions of for document.querySelector() and document.querySelectorAll().Įxample: Extracting all links from a page, as a sortable tableĮnter the following code, which retrieves all the links in the webpage, and displays the links as a sortable table to copy and paste (for example, into Excel): console.table($$('a'),) $x() allows you to select DOM elements using XPATH. So in the earlier example, you just select the element in the Inspect tool and type $0.textContent = 'My Playground' to get the same effect. $0 to $4 is a stack of the last inspected elements. So, if you type 2+2 and press Enter, and then type $_, the Console displays 4. $_ stores the result of the last command. The $ has special powers in Console, and you may remember that from jQuery. Some of the methods are incredibly powerful and are much more effective than using console.log() statements. Many convenience methods and shortcuts are available to you as Console Utilities. To make it more convenient, the Console comes with a few helper utility methods. Use any JavaScript DOM manipulations you want in the Console. textContent = 'My Playground' to the JavaScript path that you previously pasted: In the Console, paste the JavaScript path that you copied, but don't press Enter yet.Ĭhange the text of the link to My Playground. Right-click the element in the DOM tree and then select Copy > Copy JS Path.

menu next to the element in the DOM tree: In DevTools, click the Inspect tool, and then in the rendered webpage, hover over the element:Ĭlick the element on the page, and DevTools jumps to the Elements tool.Ĭlick the. To get a direct reference to the element that you want to manipulate: Suppose you want to manipulate the Documentation region within the header of the rendered page: But you can use the Inspect tool to help you.

#In coda2 pull external site to inpect element and code code#

Paste the following code into the Console: document.querySelector('header').style.border = '2em solid green'Ī green border appears around the header:ĭepending on the complexity of the webpage, it can be daunting to find the right element to manipulate. The Console opens in DevTools, next to the present webpage. Press Ctrl+Shift+J (Windows, Linux) or Command+Option+J (macOS). In this example, you set a value in the DOM by using the Console, to affect the webpage styling: you add a green border around the header. You can manipulate the webpage from the Console, as follows. In the rendered webpage, DevTools highlights the header: In the Console, hover over the resulting HTML element, or press Shift+Tab. Type or paste the following code into the Console, and then press Enter: document.querySelector('header') To do this from a webpage, you can press Ctrl+Shift+J (Windows, Linux) or Command+Option+J (macOS). The Console is like a script-environment version of the Inspect tool. The Console tool is a great way to interact with the webpage in the browser.