{"id":1421,"date":"2021-02-13T12:27:25","date_gmt":"2021-02-13T11:27:25","guid":{"rendered":"https:\/\/ekiwi.de\/?p=1421"},"modified":"2021-02-13T12:27:25","modified_gmt":"2021-02-13T11:27:25","slug":"java-script-zugriff-auf-elemente-ohne-id","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/1421\/java-script-zugriff-auf-elemente-ohne-id\/","title":{"rendered":"Java-Script &#8211; Zugriff auf Elemente ohne ID"},"content":{"rendered":"<p>Wie greife ich mit Java-Script auf Elemente ohne eigene ID zu?<\/p>\n<p><!--more--><\/p>\n<p>Oft muss man mit Java-Scrcipt auf Elemente zugreifen, um die Eigenschaften zu ver\u00e4ndern, nicht immer haben die Elemente aber eine ID um mit &#8222;getElementById&#8220; darauf zugreifen zu k\u00f6nnen. Nehmen wir folgendes Beispiel:<\/p>\n<pre>&lt;div id='header'&gt;\r\n    &lt;div&gt;\r\n        &lt;h1&gt;\r\n            Diesen Text wollen wir \u00e4ndern!\r\n        &lt;\/h1&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>Wir sehen hier ein Div-Element mit einer ID, welches eine \u00dcberschrift enth\u00e4lt. Diesen Text wollen wir \u00e4ndern. Dummerweise hat das Element aber keine ID, \u00fcber welche wir darauf zugreifen k\u00f6nnen. Hier hilft uns nun folgende Funktion weiter:<\/p>\n<pre>function findFirstDescendant(parent, tagname) {\r\n    parent = document.getElementById(parent);\r\n    var des = parent.getElementsByTagName(tagname);\r\n    if ( des.length )\r\n    return des[0];\r\n    return null;\r\n}<\/pre>\n<p>Diese Funktion kann uns anhand eines \u00fcbergeordneten Elements (mit ID) und einem Tagnamen das Element zur\u00fcckgeben.<\/p>\n<p>Somit k\u00f6nnen wir nun den Text \u00e4ndern.<\/p>\n<pre>var header = findFirstDescendant(&quot;header&quot;, &quot;h1&quot;);\r\nheader.innerHTML = text;<\/pre>\n<p><a href=\"https:\/\/ekiwi.de\/tryit\/?id=145\" target=\"_blank\" rel=\"noopener\">Online-Demo<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Wie greife ich mit Java-Script auf Elemente ohne eigene ID zu?<\/p>\n","protected":false},"author":1,"featured_media":583,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15],"tags":[4,44,172],"class_list":["post-1421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-html","tag-javascript","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/1421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=1421"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/1421\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/583"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=1421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=1421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=1421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}