{"id":725,"date":"2014-08-15T18:26:48","date_gmt":"2014-08-15T16:26:48","guid":{"rendered":"https:\/\/vielhuber.de\/?p=725"},"modified":"2017-03-25T23:07:19","modified_gmt":"2017-03-25T22:07:19","slug":"developer-tools-fokussierte-html-elemente-direkt-ansprechen","status":"publish","type":"post","link":"https:\/\/vielhuber.de\/blog\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\/","title":{"rendered":"Chrome DevTools: DOM-Elemente ansprechen"},"content":{"rendered":"<p>Ob Chrome, Firefox, Opera, Safari oder sogar der Internet Explorer: Nachdem ausgereifte Developer Tools bis vor einigen Jahren noch ein Alleinstellungsmerkmal von Firefox und dem popul\u00e4ren Plugin <a href=\"http:\/\/getfirebug.com\/\" target=\"_blank\">Firebug<\/a> waren, geh\u00f6ren heutzutage m\u00e4chtige Entwicklerwerkzeuge zum Standardumfang eines jeden Browsers, in denen es viel zu entdecken gibt.<\/p>\n<p><!--more--><\/p>\n<p>Gerade eben bin ich auf einen Trick gesto\u00dfen, um aktuell markierte Objekte im Dokumentenbaum ohne Umwege in JavaScript anzusprechen.<\/p>\n<p>Die etwas unscheinbare Referenz lautet:<\/p>\n<pre>$0<\/pre>\n<p>Damit sind jedwede Manipulationen m\u00f6glich, beispielsweise erm\u00f6glicht<\/p>\n<pre>$0.innerHTML<\/pre>\n<p>direkt eine Ausgabe des Inhalts auf der Konsole.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ob Chrome, Firefox, Opera, Safari oder sogar der Internet Explorer: Nachdem ausgereifte Developer Tools bis vor einigen Jahren noch ein Alleinstellungsmerkmal von Firefox und dem popul\u00e4ren Plugin Firebug waren, geh\u00f6ren heutzutage m\u00e4chtige Entwicklerwerkzeuge zum Standardumfang eines jeden Browsers, in denen es viel zu entdecken gibt.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"gtbabel_prevent_lngs":"","gtbabel_alt_lng":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-725","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-blog"},"acf":[],"yoast_head":"<title>Chrome DevTools: DOM-Elemente ansprechen<\/title>\n<meta name=\"description\" content=\"Ob Chrome, Firefox, Opera, Safari oder sogar der Internet Explorer: Nachdem ausgereifte Developer Tools bis vor einigen Jahren noch ein\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vielhuber.de\/blog\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Chrome DevTools: DOM-Elemente ansprechen\" \/>\n<meta property=\"og:description\" content=\"Ob Chrome, Firefox, Opera, Safari oder sogar der Internet Explorer: Nachdem ausgereifte Developer Tools bis vor einigen Jahren noch ein\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vielhuber.de\/blog\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\/\" \/>\n<meta property=\"og:site_name\" content=\"Vielhuber David\" \/>\n<meta property=\"article:published_time\" content=\"2014-08-15T16:26:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-03-25T22:07:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"552\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"David\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:site\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"David\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\\\/\"},\"author\":{\"name\":\"David\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"headline\":\"Chrome DevTools: DOM-Elemente ansprechen\",\"datePublished\":\"2014-08-15T16:26:48+00:00\",\"dateModified\":\"2017-03-25T22:07:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\\\/\"},\"wordCount\":94,\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\\\/\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\\\/\",\"name\":\"Chrome DevTools: DOM-Elemente ansprechen\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\"},\"datePublished\":\"2014-08-15T16:26:48+00:00\",\"dateModified\":\"2017-03-25T22:07:19+00:00\",\"description\":\"Ob Chrome, Firefox, Opera, Safari oder sogar der Internet Explorer: Nachdem ausgereifte Developer Tools bis vor einigen Jahren noch ein\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vielhuber.de\\\/blog\\\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vielhuber.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Chrome DevTools: DOM-Elemente ansprechen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/\",\"name\":\"Vielhuber David\",\"description\":\"Full-Stack Developer\",\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vielhuber.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\",\"name\":\"David\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"width\":700,\"height\":552,\"caption\":\"David\"},\"logo\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/vielhuber\"]}]}<\/script>","yoast_head_json":{"title":"Chrome DevTools: DOM-Elemente ansprechen","description":"Ob Chrome, Firefox, Opera, Safari oder sogar der Internet Explorer: Nachdem ausgereifte Developer Tools bis vor einigen Jahren noch ein","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vielhuber.de\/blog\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\/","og_locale":"de_DE","og_type":"article","og_title":"Chrome DevTools: DOM-Elemente ansprechen","og_description":"Ob Chrome, Firefox, Opera, Safari oder sogar der Internet Explorer: Nachdem ausgereifte Developer Tools bis vor einigen Jahren noch ein","og_url":"https:\/\/vielhuber.de\/blog\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\/","og_site_name":"Vielhuber David","article_published_time":"2014-08-15T16:26:48+00:00","article_modified_time":"2017-03-25T22:07:19+00:00","og_image":[{"width":700,"height":552,"url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","type":"image\/jpeg"}],"author":"David","twitter_card":"summary_large_image","twitter_creator":"@vielhuber","twitter_site":"@vielhuber","twitter_misc":{"Verfasst von":"David"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vielhuber.de\/blog\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\/#article","isPartOf":{"@id":"https:\/\/vielhuber.de\/blog\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\/"},"author":{"name":"David","@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"headline":"Chrome DevTools: DOM-Elemente ansprechen","datePublished":"2014-08-15T16:26:48+00:00","dateModified":"2017-03-25T22:07:19+00:00","mainEntityOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\/"},"wordCount":94,"publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"articleSection":["Blog"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/vielhuber.de\/blog\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\/","url":"https:\/\/vielhuber.de\/blog\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\/","name":"Chrome DevTools: DOM-Elemente ansprechen","isPartOf":{"@id":"https:\/\/vielhuber.de\/#website"},"datePublished":"2014-08-15T16:26:48+00:00","dateModified":"2017-03-25T22:07:19+00:00","description":"Ob Chrome, Firefox, Opera, Safari oder sogar der Internet Explorer: Nachdem ausgereifte Developer Tools bis vor einigen Jahren noch ein","breadcrumb":{"@id":"https:\/\/vielhuber.de\/blog\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vielhuber.de\/blog\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vielhuber.de\/blog\/developer-tools-fokussierte-html-elemente-direkt-ansprechen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vielhuber.de\/"},{"@type":"ListItem","position":2,"name":"Chrome DevTools: DOM-Elemente ansprechen"}]},{"@type":"WebSite","@id":"https:\/\/vielhuber.de\/#website","url":"https:\/\/vielhuber.de\/","name":"Vielhuber David","description":"Full-Stack Developer","publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vielhuber.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef","name":"David","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","width":700,"height":552,"caption":"David"},"logo":{"@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg"},"sameAs":["https:\/\/x.com\/vielhuber"]}]}},"_links":{"self":[{"href":"https:\/\/vielhuber.de\/ms\/wp-json\/wp\/v2\/posts\/725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vielhuber.de\/ms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vielhuber.de\/ms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/ms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/ms\/wp-json\/wp\/v2\/comments?post=725"}],"version-history":[{"count":1,"href":"https:\/\/vielhuber.de\/ms\/wp-json\/wp\/v2\/posts\/725\/revisions"}],"predecessor-version":[{"id":1310,"href":"https:\/\/vielhuber.de\/ms\/wp-json\/wp\/v2\/posts\/725\/revisions\/1310"}],"wp:attachment":[{"href":"https:\/\/vielhuber.de\/ms\/wp-json\/wp\/v2\/media?parent=725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vielhuber.de\/ms\/wp-json\/wp\/v2\/categories?post=725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vielhuber.de\/ms\/wp-json\/wp\/v2\/tags?post=725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}