{"action":"created","comment":{"url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/pulls/comments/38228437","id":38228437,"diff_hunk":"@@ -0,0 +1,171 @@\n+---\n+layout: post\n+title: \"Using querySelector and querySelectorAll on Elements\"\n+date: 2015-08-31 23:59\n+comments: true\n+author: lvh\n+published: true\n+categories:\n+    - Web Development\n+    - HTML\n+    - JavaScript\n+\n+---\n+\n+Modern browsers have APIs called `querySelector` and `querySelectorAll`. They\n+find one or more elements matching a CSS selector. I'm assuming basic\n+familiarity with CSS selectors: how you select elements, classes and ids. If\n+you haven't used them, the Mozilla Developer Network has an excellent\n+[introduction][csssel].\n+\n+Imagine the following HTML page:\n+\n+```html\n+<!DOCTYPE html>\n+<html>\n+<body>\n+    <img id=\"outside\">\n+    <div id=\"my-id\">\n+        <img id=\"inside\">\n+        <div class=\"lonely\"></div>\n+        <div class=\"outer\">\n+            <div class=\"inner\"></div>\n+        </div>\n+    </div>\n+</body>\n+</html>\n+```\n+\n+`document.querySelectorAll(\"div\")` returns a `NodeList` of all of the `<div>`\n+elements on the page. `document.querySelector(\"div.lonely\")` returns that\n+single lonely div.\n+\n+`document` supports both [`querySelector`][dqs] and\n+[`querySelectorAll`][dqsa], letting you find elements in the entire\n+document. Elements themselves also support both [`querySelector`][eqs] and\n+[`querySelectorAll`][eqsa], letting you query for elements that are\n+descendants of that element. For example, the following expression will find\n+images that are descendants of `#my-id`:\n+\n+```javascript\n+document.querySelector(\"#my-id\").querySelectorAll(\"img\")\n+```\n+\n+In the sample HTML page above, it will find `<img id=\"inside\">` but not `<img\n+id=\"outside\">`.\n+\n+With that in mind, what do these two expressions do?\n+\n+```javascript\n+document.querySelectorAll(\"#my-id div div\");\n+document.querySelector(\"#my-id\").querySelectorAll(\"div div\");\n+```\n+\n+You might reasonably expect them to be equivalent. After all, one asks\n+`div` elements inside `div` elements inside `#my-id`, and the other\n+asks for `div` elements inside `div` elements that are *descendants*\n+of `#my-id`. However, when you look at [this JSbin][jsbin] you'll see\n+that they produce very different results:\n+\n+```javascript\n+document.querySelectorAll(\"#my-id div div\").length === 1;\n+document.querySelector(\"#my-id\").querySelectorAll(\"div div\").length === 3;\n+```\n+\n+What is going on here?\n+\n+It turns out that [`element.querySelectorAll`][eqsa] doesn't match elements\n+starting from `element`. Instead, it matches elements matching the query that\n+are also descendants of `element`. Therefore, we're seeing three `div`\n+elements: `div.lonely`, `div.outer`, `div.inner`. We're seeing them because\n+they both match the `div div` selector and are all descendants of `#my-id`.\n+\n+The trick to remembering this is that CSS selectors are absolute; not relative\n+to any particular element, not even the element you're calling\n+`querySelectorAll` on.\n+\n+This even works with elements *outside* the element you're calling\n+`querySelectorAll` on. For example, this selector:\n+\n+```javascript\n+document.querySelector(\"#my-id\").querySelector(\"div div div\")\n+```\n+\n+... matches `div.inner` in this snippet ([JSbin][jsbin2]):\n+\n+```html\n+<!DOCTYPE html>\n+<html>\n+  <body>\n+    <div>\n+      <div id=\"my-id\">\n+        <div class=\"inner\"></div>\n+      </div>\n+    </div>\n+  </body>\n+</html>\n+```\n+\n+I think this API is surprising, and the front-end engineers I've asked\n+seem to agree with me. This is, however, not a bug; it's definitely","path":"_posts/2015-08-31-using-querySelector-on-elements.md","position":112,"original_position":110,"commit_id":"7d9ccd669330fc9409e2c2a091e8e75be5f1842f","original_commit_id":"970fdc7d667ca3f484977d4552c8d487d00e055b","user":{"login":"lvh","id":97816,"avatar_url":"https://avatars.githubusercontent.com/u/97816?v=3","gravatar_id":"","url":"https://api.github.com/users/lvh","html_url":"https://github.com/lvh","followers_url":"https://api.github.com/users/lvh/followers","following_url":"https://api.github.com/users/lvh/following{/other_user}","gists_url":"https://api.github.com/users/lvh/gists{/gist_id}","starred_url":"https://api.github.com/users/lvh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lvh/subscriptions","organizations_url":"https://api.github.com/users/lvh/orgs","repos_url":"https://api.github.com/users/lvh/repos","events_url":"https://api.github.com/users/lvh/events{/privacy}","received_events_url":"https://api.github.com/users/lvh/received_events","type":"User","site_admin":false},"body":"Fixed in f2c4ca5. Thanks!","created_at":"2015-08-28T18:18:56Z","updated_at":"2015-08-28T18:18:56Z","html_url":"https://github.com/rackerlabs/docs-developer-blog/pull/80#discussion_r38228437","pull_request_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/pulls/80","_links":{"self":{"href":"https://api.github.com/repos/rackerlabs/docs-developer-blog/pulls/comments/38228437"},"html":{"href":"https://github.com/rackerlabs/docs-developer-blog/pull/80#discussion_r38228437"},"pull_request":{"href":"https://api.github.com/repos/rackerlabs/docs-developer-blog/pulls/80"}}},"pull_request":{"url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/pulls/80","id":43655013,"html_url":"https://github.com/rackerlabs/docs-developer-blog/pull/80","diff_url":"https://github.com/rackerlabs/docs-developer-blog/pull/80.diff","patch_url":"https://github.com/rackerlabs/docs-developer-blog/pull/80.patch","issue_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/issues/80","number":80,"state":"open","locked":false,"title":"Using querySelector/querySelectorAll on elements","user":{"login":"lvh","id":97816,"avatar_url":"https://avatars.githubusercontent.com/u/97816?v=3","gravatar_id":"","url":"https://api.github.com/users/lvh","html_url":"https://github.com/lvh","followers_url":"https://api.github.com/users/lvh/followers","following_url":"https://api.github.com/users/lvh/following{/other_user}","gists_url":"https://api.github.com/users/lvh/gists{/gist_id}","starred_url":"https://api.github.com/users/lvh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lvh/subscriptions","organizations_url":"https://api.github.com/users/lvh/orgs","repos_url":"https://api.github.com/users/lvh/repos","events_url":"https://api.github.com/users/lvh/events{/privacy}","received_events_url":"https://api.github.com/users/lvh/received_events","type":"User","site_admin":false},"body":"Thanks in advance for your comments :)","created_at":"2015-08-28T18:03:50Z","updated_at":"2015-08-28T18:18:56Z","closed_at":null,"merged_at":null,"merge_commit_sha":"d8cee621f58017bf4d641bb3718d515c980c5586","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/pulls/80/commits","review_comments_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/pulls/80/comments","review_comment_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/pulls/comments{/number}","comments_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/issues/80/comments","statuses_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/statuses/7d9ccd669330fc9409e2c2a091e8e75be5f1842f","head":{"label":"lvh:qsa-on-elems","ref":"qsa-on-elems","sha":"7d9ccd669330fc9409e2c2a091e8e75be5f1842f","user":{"login":"lvh","id":97816,"avatar_url":"https://avatars.githubusercontent.com/u/97816?v=3","gravatar_id":"","url":"https://api.github.com/users/lvh","html_url":"https://github.com/lvh","followers_url":"https://api.github.com/users/lvh/followers","following_url":"https://api.github.com/users/lvh/following{/other_user}","gists_url":"https://api.github.com/users/lvh/gists{/gist_id}","starred_url":"https://api.github.com/users/lvh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lvh/subscriptions","organizations_url":"https://api.github.com/users/lvh/orgs","repos_url":"https://api.github.com/users/lvh/repos","events_url":"https://api.github.com/users/lvh/events{/privacy}","received_events_url":"https://api.github.com/users/lvh/received_events","type":"User","site_admin":false},"repo":{"id":41560864,"name":"docs-developer-blog","full_name":"lvh/docs-developer-blog","owner":{"login":"lvh","id":97816,"avatar_url":"https://avatars.githubusercontent.com/u/97816?v=3","gravatar_id":"","url":"https://api.github.com/users/lvh","html_url":"https://github.com/lvh","followers_url":"https://api.github.com/users/lvh/followers","following_url":"https://api.github.com/users/lvh/following{/other_user}","gists_url":"https://api.github.com/users/lvh/gists{/gist_id}","starred_url":"https://api.github.com/users/lvh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lvh/subscriptions","organizations_url":"https://api.github.com/users/lvh/orgs","repos_url":"https://api.github.com/users/lvh/repos","events_url":"https://api.github.com/users/lvh/events{/privacy}","received_events_url":"https://api.github.com/users/lvh/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/lvh/docs-developer-blog","description":"The developer.rackspace.com blog.","fork":true,"url":"https://api.github.com/repos/lvh/docs-developer-blog","forks_url":"https://api.github.com/repos/lvh/docs-developer-blog/forks","keys_url":"https://api.github.com/repos/lvh/docs-developer-blog/keys{/key_id}","collaborators_url":"https://api.github.com/repos/lvh/docs-developer-blog/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/lvh/docs-developer-blog/teams","hooks_url":"https://api.github.com/repos/lvh/docs-developer-blog/hooks","issue_events_url":"https://api.github.com/repos/lvh/docs-developer-blog/issues/events{/number}","events_url":"https://api.github.com/repos/lvh/docs-developer-blog/events","assignees_url":"https://api.github.com/repos/lvh/docs-developer-blog/assignees{/user}","branches_url":"https://api.github.com/repos/lvh/docs-developer-blog/branches{/branch}","tags_url":"https://api.github.com/repos/lvh/docs-developer-blog/tags","blobs_url":"https://api.github.com/repos/lvh/docs-developer-blog/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/lvh/docs-developer-blog/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/lvh/docs-developer-blog/git/refs{/sha}","trees_url":"https://api.github.com/repos/lvh/docs-developer-blog/git/trees{/sha}","statuses_url":"https://api.github.com/repos/lvh/docs-developer-blog/statuses/{sha}","languages_url":"https://api.github.com/repos/lvh/docs-developer-blog/languages","stargazers_url":"https://api.github.com/repos/lvh/docs-developer-blog/stargazers","contributors_url":"https://api.github.com/repos/lvh/docs-developer-blog/contributors","subscribers_url":"https://api.github.com/repos/lvh/docs-developer-blog/subscribers","subscription_url":"https://api.github.com/repos/lvh/docs-developer-blog/subscription","commits_url":"https://api.github.com/repos/lvh/docs-developer-blog/commits{/sha}","git_commits_url":"https://api.github.com/repos/lvh/docs-developer-blog/git/commits{/sha}","comments_url":"https://api.github.com/repos/lvh/docs-developer-blog/comments{/number}","issue_comment_url":"https://api.github.com/repos/lvh/docs-developer-blog/issues/comments{/number}","contents_url":"https://api.github.com/repos/lvh/docs-developer-blog/contents/{+path}","compare_url":"https://api.github.com/repos/lvh/docs-developer-blog/compare/{base}...{head}","merges_url":"https://api.github.com/repos/lvh/docs-developer-blog/merges","archive_url":"https://api.github.com/repos/lvh/docs-developer-blog/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/lvh/docs-developer-blog/downloads","issues_url":"https://api.github.com/repos/lvh/docs-developer-blog/issues{/number}","pulls_url":"https://api.github.com/repos/lvh/docs-developer-blog/pulls{/number}","milestones_url":"https://api.github.com/repos/lvh/docs-developer-blog/milestones{/number}","notifications_url":"https://api.github.com/repos/lvh/docs-developer-blog/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/lvh/docs-developer-blog/labels{/name}","releases_url":"https://api.github.com/repos/lvh/docs-developer-blog/releases{/id}","created_at":"2015-08-28T17:42:27Z","updated_at":"2015-08-28T17:42:29Z","pushed_at":"2015-08-28T18:07:50Z","git_url":"git://github.com/lvh/docs-developer-blog.git","ssh_url":"git@github.com:lvh/docs-developer-blog.git","clone_url":"https://github.com/lvh/docs-developer-blog.git","svn_url":"https://github.com/lvh/docs-developer-blog","homepage":null,"size":59715,"stargazers_count":0,"watchers_count":0,"language":"HTML","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"rackerlabs:master","ref":"master","sha":"3f270cd204fe3c9d515faca6c4131f97cb1bddff","user":{"login":"rackerlabs","id":84293,"avatar_url":"https://avatars.githubusercontent.com/u/84293?v=3","gravatar_id":"","url":"https://api.github.com/users/rackerlabs","html_url":"https://github.com/rackerlabs","followers_url":"https://api.github.com/users/rackerlabs/followers","following_url":"https://api.github.com/users/rackerlabs/following{/other_user}","gists_url":"https://api.github.com/users/rackerlabs/gists{/gist_id}","starred_url":"https://api.github.com/users/rackerlabs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rackerlabs/subscriptions","organizations_url":"https://api.github.com/users/rackerlabs/orgs","repos_url":"https://api.github.com/users/rackerlabs/repos","events_url":"https://api.github.com/users/rackerlabs/events{/privacy}","received_events_url":"https://api.github.com/users/rackerlabs/received_events","type":"Organization","site_admin":false},"repo":{"id":36315867,"name":"docs-developer-blog","full_name":"rackerlabs/docs-developer-blog","owner":{"login":"rackerlabs","id":84293,"avatar_url":"https://avatars.githubusercontent.com/u/84293?v=3","gravatar_id":"","url":"https://api.github.com/users/rackerlabs","html_url":"https://github.com/rackerlabs","followers_url":"https://api.github.com/users/rackerlabs/followers","following_url":"https://api.github.com/users/rackerlabs/following{/other_user}","gists_url":"https://api.github.com/users/rackerlabs/gists{/gist_id}","starred_url":"https://api.github.com/users/rackerlabs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rackerlabs/subscriptions","organizations_url":"https://api.github.com/users/rackerlabs/orgs","repos_url":"https://api.github.com/users/rackerlabs/repos","events_url":"https://api.github.com/users/rackerlabs/events{/privacy}","received_events_url":"https://api.github.com/users/rackerlabs/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/rackerlabs/docs-developer-blog","description":"The developer.rackspace.com blog.","fork":false,"url":"https://api.github.com/repos/rackerlabs/docs-developer-blog","forks_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/forks","keys_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/keys{/key_id}","collaborators_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/teams","hooks_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/hooks","issue_events_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/issues/events{/number}","events_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/events","assignees_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/assignees{/user}","branches_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/branches{/branch}","tags_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/tags","blobs_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/git/refs{/sha}","trees_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/git/trees{/sha}","statuses_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/statuses/{sha}","languages_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/languages","stargazers_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/stargazers","contributors_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/contributors","subscribers_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/subscribers","subscription_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/subscription","commits_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/commits{/sha}","git_commits_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/git/commits{/sha}","comments_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/comments{/number}","issue_comment_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/issues/comments{/number}","contents_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/contents/{+path}","compare_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/compare/{base}...{head}","merges_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/merges","archive_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/downloads","issues_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/issues{/number}","pulls_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/pulls{/number}","milestones_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/milestones{/number}","notifications_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/labels{/name}","releases_url":"https://api.github.com/repos/rackerlabs/docs-developer-blog/releases{/id}","created_at":"2015-05-26T18:34:01Z","updated_at":"2015-07-14T20:57:56Z","pushed_at":"2015-08-28T18:07:51Z","git_url":"git://github.com/rackerlabs/docs-developer-blog.git","ssh_url":"git@github.com:rackerlabs/docs-developer-blog.git","clone_url":"https://github.com/rackerlabs/docs-developer-blog.git","svn_url":"https://github.com/rackerlabs/docs-developer-blog","homepage":null,"size":59715,"stargazers_count":6,"watchers_count":6,"language":"HTML","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":20,"mirror_url":null,"open_issues_count":7,"forks":20,"open_issues":7,"watchers":6,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/rackerlabs/docs-developer-blog/pulls/80"},"html":{"href":"https://github.com/rackerlabs/docs-developer-blog/pull/80"},"issue":{"href":"https://api.github.com/repos/rackerlabs/docs-developer-blog/issues/80"},"comments":{"href":"https://api.github.com/repos/rackerlabs/docs-developer-blog/issues/80/comments"},"review_comments":{"href":"https://api.github.com/repos/rackerlabs/docs-developer-blog/pulls/80/comments"},"review_comment":{"href":"https://api.github.com/repos/rackerlabs/docs-developer-blog/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/rackerlabs/docs-developer-blog/pulls/80/commits"},"statuses":{"href":"https://api.github.com/repos/rackerlabs/docs-developer-blog/statuses/7d9ccd669330fc9409e2c2a091e8e75be5f1842f"}}}}