# Beware d3.select on Observable ## Which is to say, beware document.querySelector On September 18, 1995, Netscape 2 launched with support for the [Level 0 DOM](https://www.quirksmode.org/js/dom0.html), which let you get arrays of certain document elements in JavaScript: document.images, document.forms, document.links, and document.anchors. That was it! Around 1998, the [Level 1 DOM](https://www.quirksmode.org/dom/intro.html) added support for document.getElementById, document.getElementsByName, and document.getElementsByTagName. At the same time, CSS was up to level 2 with its own syntax to “get” one or more elements, called [selectors](https://en.wikipedia.org/wiki/CSS#Selector). In 2003, Simon Willison published a [short script](https://simonwillison.net/2003/Mar/25/getElementsBySelector/) that let you call document.getElementsBySelector with a CSS selector string and get back an array of elements. That [inspired](https://johnresig.com/blog/annotated-version-of-the-original-jquery-release/) John Resig to include a selector engine in jQuery, launched in 2006, which acclimated a generation to writing `$("div.sidebar li")` to refer to list items in a DIV element with the class name “sidebar”. The W3C moved to standardize that functionality, and Firefox 3.5 [added support](https://web.archive.org/web/20110604150348/https://developer.mozilla.org/devnews/index.php/2009/06/30/firefox-3-5-is-now-available-for-download/) for the W3C Selectors API in June 2009. When D3 launched in 2011, the standard was [becoming ubiquitous](https://caniuse.com/queryselector) in modern browsers, but D3 still checked to see if jQuery’s Sizzle engine was already on the page until version 4, at which point it relied solely on the standard document.querySelector and document.querySelectorAll. The first example on d3js.org selects all paragraph elements and turns them blue: ```js d3.selectAll("p").style("color", "blue"); ``` For years a statement like that was a natural way to start a D3 project. But today, it is an anti-pattern: it tends to select things it shouldn’t, and not select things it should. The web has moved away from global selectors and toward isolated components, with new abstractions for managing the DOM. This notebook focuses on Observable, but similar points apply to React and other frameworks. **You should start by calling d3.select with a DOM element, not a selector string, and all subsequent selections should be chained off of that parent selection.**

❌	d3.select(_selector_)	`d3.select("#chart")`
❌	d3.selectAll(_selector_)	`d3.selectAll("li")`
✅	d3.select(_element_)	d3.select(cellName) d3.select(htl.html\`<svg>\`)
✅	d3.selectAll(_elements_)	`d3.selectAll(cellName.children)`
✅	selection.select(_selector_)	`d3.select(cellName).select("h2")`
✅	selection.selectAll(_selector_)	`d3.select(cellName).select("li")`
✅	d3.create(_name_)	`d3.create("table").selectAll("tr")`

Or, equivalently, in vanilla JavaScript terms: **you should call querySelector on a DOM element, not the whole document.**

❌	document.querySelector(_selection_)	`document.querySelector("#chart")`
❌	document.querySelectorAll(_selection_)	`document.querySelectorAll("li")`
✅	element.querySelector(_selector_)	`cellName.querySelector("h2")`
✅	element.querySelectorAll(_selector_)	`cellName.querySelectorAll("li")`

Let’s explore why not to use those first two, and what to do instead.