{"id":219505,"date":"2017-08-09T00:00:00","date_gmt":"2017-08-08T22:00:00","guid":{"rendered":"https:\/\/blog.lewagon.com\/nao-categorizado\/from-jquery-to-dom-and-es6\/"},"modified":"2017-08-09T00:00:00","modified_gmt":"2017-08-08T22:00:00","slug":"from-jquery-to-dom-and-es6","status":"publish","type":"post","link":"https:\/\/blog.lewagon.com\/pt-br\/skills\/from-jquery-to-dom-and-es6\/","title":{"rendered":"From jQuery to DOM and ES6"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"<p>Olhando para tr\u00e1s, jQuery foi criado para dar conta das diferen\u00e7as de implementa\u00e7\u00e3o do JavaScript nos diferentes navegadores. Mas os tempos mudaram&#8230; para melhor!<\/p>\n","protected":false},"author":1,"featured_media":219506,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[146],"type_de_post":[],"post-format":[179],"class_list":["post-219505","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-skills","tag-tech-pt-br","post-format-post-pt-br"],"acf":[],"acfml_non_translatable_locations":null,"_wp_attached_file":null,"_wp_attachment_metadata":null,"wpml_media_processed":null,"_elementor_inline_svg":null,"_elementor_source_image_hash":null,"_wp_attachment_image_alt":null,"_msc":null,"_elementor_is_screenshot":null,"_wp_attachment_context":null,"_oembed_4f1dc266c1e5b199d2e3668569863d35":null,"_wp_attachment_backup_sizes":null,"description_courte_du_cours":null,"_description_courte_du_cours":null,"sujets":null,"_sujets":null,"niveau":null,"_niveau":null,"duree":null,"_duree":null,"lien_externe_du_cours":null,"_lien_externe_du_cours":null,"_g_feedback_shortcode_8e54bebc0966bf7f9290fee5ef5e57c8a8c597c6":null,"_g_feedback_shortcode_atts_8e54bebc0966bf7f9290fee5ef5e57c8a8c597c6":null,"elementor_font_files":null,"elementor_font_face":null,"_elementor_location":null,"_elementor_priority":null,"_elementor_code":null,"_elementor_extra_options":null,"date_de_levent":null,"_date_de_levent":null,"heure_de_debut_de_levent":null,"_heure_de_debut_de_levent":null,"heure_de_fin_de_levent":null,"_heure_de_fin_de_levent":null,"time_zone":null,"_time_zone":null,"description_de_levent":null,"_description_de_levent":null,"format_du_cours":null,"_format_du_cours":null,"pre-requis":null,"_pre-requis":null,"langue_de_levent":null,"_langue_de_levent":null,"lien_externe_de_levent":null,"_lien_externe_de_levent":null,"_yoast_wpseo_primary_tag_events":null,"lieu_de_levent":null,"_lieu_de_levent":null,"_menu_item_type":null,"_menu_item_menu_item_parent":null,"_menu_item_object_id":null,"_menu_item_object":null,"_menu_item_target":null,"_menu_item_classes":null,"_menu_item_xfn":null,"_menu_item_url":null,"_omapi_type":null,"_omapi_ids":null,"_omapi_enabled":null,"_yoast_wpseo_content_score":null,"_pll_strings_translations":null,"_yoast_wpseo_primary_post_tag":null,"_yoast_wpseo_primary_type_de_post":null,"_yoast_wpseo_primary_post-format":null,"_oembed_e607e81f61090d85eabdabc743a27470":null,"_oembed_196c62ccee9fda191cd6fa5f568ddc05":null,"_oembed_6b5f28c0de48cbf3a2ad766be5eb3b30":null,"_oembed_082c4292f4cd0dedc40ae746a899501c":null,"om_disable_all_campaigns":null,"wpil_sync_report3":"1","_yoast_wpseo_focuskw":null,"_yoast_wpseo_linkdex":null,"_yoast_wpseo_opengraph-title":"From jQuery to DOM and ES6 | Le Wagon","_yoast_wpseo_opengraph-description":"Olhando para tr\u00e1s, jQuery foi criado para dar conta das diferen\u00e7as de implementa\u00e7\u00e3o do JavaScript nos diferentes navegadores. Mas os tempos mudaram... para melhor!","_yoast_wpseo_twitter-title":"From jQuery to DOM and ES6 | Le Wagon","_yoast_wpseo_twitter-description":"Olhando para tr\u00e1s, jQuery foi criado para dar conta das diferen\u00e7as de implementa\u00e7\u00e3o do JavaScript nos diferentes navegadores. Mas os tempos mudaram... para melhor!","wpil_links_inbound_internal_count":"0","wpil_links_inbound_internal_count_data":[],"wpil_links_outbound_internal_count":"0","wpil_links_outbound_internal_count_data":[],"wpil_links_outbound_external_count":"0","wpil_links_outbound_external_count_data":[],"wpil_sync_report2_time":"2023-08-11T09:32:12+00:00","gnpub_modified_count":null,"_encloseme":null,"_jetpack_memberships_contains_paid_content":null,"_oembed_df252bc3f21e94e550790f0a26013d33":null,"_oembed_7c25793225e5877909b9566a95c01f07":null,"_oembed_time_7c25793225e5877909b9566a95c01f07":null,"_oembed_c035311b2d37111892bc6336ad75c1a7":null,"_oembed_time_c035311b2d37111892bc6336ad75c1a7":null,"_yoast_wpseo_focuskw_text_input":"","_yoast_wpseo_opengraph-image":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/rx0q8zcbkgc6573u1q0jyylsp8f0.jpeg","_yoast_wpseo_twitter-image":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/rx0q8zcbkgc6573u1q0jyylsp8f0.jpeg","_bnitk_mfd_meta-robots-noindex":null,"_yoast_wpseo_meta-robots-noindex":null,"_bnitk_mfd_meta-robots-nofollow":null,"_yoast_wpseo_meta-robots-nofollow":null,"_oembed_9b38dff8e9475b390d223d1a13735d6e":null,"_oembed_09b03dce1da57707d8b400d6ead6cfea":null,"_oembed_time_09b03dce1da57707d8b400d6ead6cfea":null,"_oembed_761875ecd5d7c814e779a8a1669e3078":null,"_oembed_time_761875ecd5d7c814e779a8a1669e3078":null,"_oembed_60128998417fdcbaac97a635f5785efd":null,"_oembed_time_60128998417fdcbaac97a635f5785efd":null,"_oembed_bbc2c908fc7e611d82dce88119dc4350":null,"_oembed_time_bbc2c908fc7e611d82dce88119dc4350":null,"_oembed_5ada75a4373349f7b136423290505b3a":null,"_oembed_time_5ada75a4373349f7b136423290505b3a":null,"_oembed_086373a651e90a4eb1279fa1f945472c":null,"_oembed_time_086373a651e90a4eb1279fa1f945472c":null,"_wpml_post_translation_editor_native":null,"_oembed_5e24c29ce369f6b80c9eeec04f14665b":null,"_oembed_time_5e24c29ce369f6b80c9eeec04f14665b":null,"_oembed_8c3e7085f10b7c0fc5520e72277d797b":null,"_oembed_time_8c3e7085f10b7c0fc5520e72277d797b":null,"_oembed_1489782c3c8ef26605b6876b88f7bdda":null,"_oembed_time_1489782c3c8ef26605b6876b88f7bdda":null,"_oembed_0a3d659fc8de333aa903ab0b56018d23":null,"_oembed_time_0a3d659fc8de333aa903ab0b56018d23":null,"_oembed_d1585e059963c7dbe1909a198f64637b":null,"_oembed_da273c5e4d4993b38963204fa3018b68":null,"_oembed_time_da273c5e4d4993b38963204fa3018b68":null,"_oembed_a5e2c70342e4f17e48253b0a60b76258":null,"_oembed_time_a5e2c70342e4f17e48253b0a60b76258":null,"_oembed_83c8f84c43191797360817ecdc633650":null,"_oembed_time_83c8f84c43191797360817ecdc633650":null,"_oembed_e105b3463a1e23321ff3d1a9daf4ce77":null,"_oembed_1692f2329443bc1b18fc320e0d77cb4e":null,"_yoast_wpseo_schema_article_type":null,"_oembed_02bf1d274545a46fdad44828db802e9b":null,"_oembed_483efee027379bb1099137e135e60619":null,"_oembed_time_483efee027379bb1099137e135e60619":null,"_oembed_d9e3a2e55472c308a6d4f95f9859d57c":null,"_oembed_time_d9e3a2e55472c308a6d4f95f9859d57c":null,"_oembed_14a773041d4083fdc540105ccc635e1f":null,"_oembed_time_14a773041d4083fdc540105ccc635e1f":null,"_oembed_fd2c0295b311b878f43def139f693291":null,"_oembed_time_fd2c0295b311b878f43def139f693291":null,"_oembed_9e88339a75e081aa4aa002ac43b5917e":null,"_oembed_time_9e88339a75e081aa4aa002ac43b5917e":null,"_oembed_e58b2264fd34411178c5aead6e76fc0e":null,"_oembed_time_e58b2264fd34411178c5aead6e76fc0e":null,"_oembed_bddf29494cd341c273d2f25802785f3a":null,"_oembed_time_bddf29494cd341c273d2f25802785f3a":null,"_oembed_9fdc7ffbd7d1c456cb57323136bcf86d":null,"_oembed_time_9fdc7ffbd7d1c456cb57323136bcf86d":null,"_oembed_6882adf1f7ba34c40d8abda49c078862":null,"_oembed_time_6882adf1f7ba34c40d8abda49c078862":null,"_oembed_42ae0b6a999f98ed81c86edf9b80d360":null,"_oembed_time_42ae0b6a999f98ed81c86edf9b80d360":null,"_oembed_f4dcff6ba8f84f09cade790420ba4d80":null,"_oembed_time_f4dcff6ba8f84f09cade790420ba4d80":null,"_oembed_25071af9d5ecd73a9356fe5704bba4d8":null,"_oembed_time_25071af9d5ecd73a9356fe5704bba4d8":null,"_oembed_a86728f5efc0ca0642006bbb96f843cc":null,"_oembed_time_a86728f5efc0ca0642006bbb96f843cc":null,"_oembed_d7b5055b785ef8a0cf22c87d024bf2a4":null,"_oembed_time_d7b5055b785ef8a0cf22c87d024bf2a4":null,"_oembed_6a73e101cae7c3452b00a72cf0fc9b22":null,"_oembed_time_6a73e101cae7c3452b00a72cf0fc9b22":null,"_oembed_0aef478f0830cc2e857b9a150a7f763a":null,"_oembed_time_0aef478f0830cc2e857b9a150a7f763a":null,"_oembed_d1a3bdcdf10e4859560b01d910ad1120":null,"_oembed_time_d1a3bdcdf10e4859560b01d910ad1120":null,"_oembed_05ef2af36a31586761b7311d393d1df4":null,"_oembed_time_05ef2af36a31586761b7311d393d1df4":null,"_oembed_ed00fe1690bb2e86f1eb06acfe8a13e7":null,"_oembed_time_ed00fe1690bb2e86f1eb06acfe8a13e7":null,"_oembed_59ffcbf71f633752ca4f26b3b4a544c9":null,"_oembed_time_59ffcbf71f633752ca4f26b3b4a544c9":null,"_oembed_a7b688611478922544f14672fda18461":null,"_oembed_time_a7b688611478922544f14672fda18461":null,"_oembed_266f9a151e3a09eeee918af2d28fd24f":null,"_oembed_time_266f9a151e3a09eeee918af2d28fd24f":null,"_oembed_9f52726dd229470e47d40ff0c8aeb5f8":null,"_oembed_time_9f52726dd229470e47d40ff0c8aeb5f8":null,"_oembed_5547f713058fed19783e0533ce393a31":null,"_oembed_time_5547f713058fed19783e0533ce393a31":null,"_oembed_68ff8dd20e77e109ad084c2252ca040d":null,"_oembed_time_68ff8dd20e77e109ad084c2252ca040d":null,"_oembed_819f09a569080db91bf5dadda0a30d9f":null,"_oembed_time_819f09a569080db91bf5dadda0a30d9f":null,"_oembed_4fc081fbdf0afd05a624ba852a63e133":null,"_oembed_time_4fc081fbdf0afd05a624ba852a63e133":null,"_oembed_d66baf1301b99db8b19a0924319cf03e":null,"_oembed_time_d66baf1301b99db8b19a0924319cf03e":null,"_oembed_14a5f80e3eef4903e482b0ef3799659e":null,"_oembed_time_14a5f80e3eef4903e482b0ef3799659e":null,"_oembed_c24c715adb3853482526a794a5f3c3bb":null,"_oembed_time_c24c715adb3853482526a794a5f3c3bb":null,"_oembed_9c493e098be2852715cc990b6e6243f3":null,"_oembed_time_9c493e098be2852715cc990b6e6243f3":null,"_oembed_b60b7e3028d326711916099f54e986fa":null,"_oembed_time_b60b7e3028d326711916099f54e986fa":null,"_oembed_5283e19fcec44e632de8d436d46ec2f7":null,"_oembed_time_5283e19fcec44e632de8d436d46ec2f7":null,"_oembed_057692cb4479cf5c77363896a28db44f":null,"_oembed_time_057692cb4479cf5c77363896a28db44f":null,"_oembed_e8cb0f41d141fe5eb9d69fc32a98cd72":null,"_oembed_time_e8cb0f41d141fe5eb9d69fc32a98cd72":null,"_oembed_75dcbca80ec1829a77578390fae8fa56":null,"_oembed_time_75dcbca80ec1829a77578390fae8fa56":null,"_oembed_e49318dfeabd5f16d7967e2fcc746fbd":null,"_oembed_time_e49318dfeabd5f16d7967e2fcc746fbd":null,"_oembed_76116b03fe5a013341210d278021184b":null,"_oembed_time_76116b03fe5a013341210d278021184b":null,"_oembed_6c81e1c9b634b5066fb37aaccfd71053":null,"_oembed_time_6c81e1c9b634b5066fb37aaccfd71053":null,"_oembed_abbc1aa97e554f334c2ce25f0d883702":null,"_oembed_time_abbc1aa97e554f334c2ce25f0d883702":null,"_oembed_ba421363b36dd97c087665d5025396cf":null,"_oembed_time_ba421363b36dd97c087665d5025396cf":null,"_oembed_a98f236eb48eb9cd4ede7f319e9cfbc7":null,"_oembed_time_a98f236eb48eb9cd4ede7f319e9cfbc7":null,"_oembed_d61fec7d73397687995fec8d7bd9852f":null,"_oembed_time_d61fec7d73397687995fec8d7bd9852f":null,"_oembed_2e9e46a0176fe90e49cc5fff32ac6912":null,"_oembed_time_2e9e46a0176fe90e49cc5fff32ac6912":null,"_oembed_8a304f49b3aa1c3eec8d0b0577e05e3d":null,"_oembed_time_8a304f49b3aa1c3eec8d0b0577e05e3d":null,"_oembed_ad30824ca1e37cffdad2dbce46c4998a":null,"_oembed_time_ad30824ca1e37cffdad2dbce46c4998a":null,"_oembed_6c3dacc8273d4877c65378c1f324c9cc":null,"_oembed_time_6c3dacc8273d4877c65378c1f324c9cc":null,"_oembed_1d0e7d3c6d826ca1e56a24218abba6f2":null,"_oembed_time_1d0e7d3c6d826ca1e56a24218abba6f2":null,"_oembed_50929cd1300f7cdee57e6e5451afb186":null,"_oembed_time_50929cd1300f7cdee57e6e5451afb186":null,"_oembed_72dc139d079681a2c3d759a86af48ccc":null,"_oembed_time_72dc139d079681a2c3d759a86af48ccc":null,"_oembed_d359fdb1fa5da9e62dd3505937f46fb6":null,"_oembed_time_d359fdb1fa5da9e62dd3505937f46fb6":null,"_oembed_589d6065ccac39334963be5bd8656631":null,"_oembed_time_589d6065ccac39334963be5bd8656631":null,"_oembed_715be02b6ebadc1be6dd638a57d01eb7":null,"_oembed_time_715be02b6ebadc1be6dd638a57d01eb7":null,"_oembed_f5139a9df267d3aa532f5b56409c90b0":null,"_oembed_time_f5139a9df267d3aa532f5b56409c90b0":null,"_oembed_3d9a26be229b27005ca74596fb62cc08":null,"_oembed_time_3d9a26be229b27005ca74596fb62cc08":null,"_oembed_a7d6f0ce79de685fc6f7f4d447e15468":null,"_oembed_time_a7d6f0ce79de685fc6f7f4d447e15468":null,"_oembed_20849479e832b5312335e3086c5f972b":null,"_oembed_time_20849479e832b5312335e3086c5f972b":null,"_oembed_2be4d392f66846deb7624c1bf3bc293e":null,"_oembed_time_2be4d392f66846deb7624c1bf3bc293e":null,"_oembed_9bcf546ec292041d23df28a719840688":null,"_oembed_time_9bcf546ec292041d23df28a719840688":null,"_oembed_0858ffd7404bcd7d82896f942481fe63":null,"_oembed_time_0858ffd7404bcd7d82896f942481fe63":null,"_oembed_4a2dd0ecf082a7c7d82731c06a644799":null,"_oembed_time_4a2dd0ecf082a7c7d82731c06a644799":null,"_oembed_8a1e46bc730cb21c1085d157ae6fa8b6":null,"_oembed_time_8a1e46bc730cb21c1085d157ae6fa8b6":null,"_oembed_cae7deb931d75f809e459e912e71429a":null,"_oembed_time_cae7deb931d75f809e459e912e71429a":null,"_oembed_6fcb4f8ab72abccda75674f71a946f97":null,"_oembed_time_6fcb4f8ab72abccda75674f71a946f97":null,"_oembed_7f0bfd584f844117a64fe73d83b43245":null,"_oembed_time_7f0bfd584f844117a64fe73d83b43245":null,"_oembed_d0aea105cffdf6e004979cf1e4f51e96":null,"_oembed_time_d0aea105cffdf6e004979cf1e4f51e96":null,"_oembed_e53b85b8766b3dc91338f6c1b95a2541":null,"_oembed_time_e53b85b8766b3dc91338f6c1b95a2541":null,"_oembed_48832be87b763046d232c1f2b5ac5fb3":null,"_oembed_time_48832be87b763046d232c1f2b5ac5fb3":null,"_oembed_32a9a34fcf91c466be9a08e1dba3c84e":null,"_oembed_time_32a9a34fcf91c466be9a08e1dba3c84e":null,"_oembed_fb50b2dc07acfa2418f00cdc2ad4c4c2":null,"_oembed_time_fb50b2dc07acfa2418f00cdc2ad4c4c2":null,"_oembed_3089e1d62f944a73b38c996e49abd2fc":null,"_oembed_time_3089e1d62f944a73b38c996e49abd2fc":null,"_oembed_1ecc99e75cf5d001c8da4f4d600703a8":null,"_oembed_time_1ecc99e75cf5d001c8da4f4d600703a8":null,"_oembed_b9c03ca24b382c17966861d251dc3b8d":null,"_oembed_time_b9c03ca24b382c17966861d251dc3b8d":null,"_wp_trash_meta_status":null,"_wp_trash_meta_time":null,"_wp_desired_post_slug":null,"_oembed_031755ba22f2b639d88c78254a99ff39":null,"_oembed_time_031755ba22f2b639d88c78254a99ff39":null,"description_de_la_ressource":null,"_description_de_la_ressource":null,"titre_du_fichier":null,"_titre_du_fichier":null,"_edit_last":null,"_edit_lock":null,"_wp_old_slug":null,"_top_nav_excluded":null,"_cms_nav_minihome":null,"inline_featured_image":null,"_yoast_wpseo_estimated-reading-time-minutes":null,"_yoast_wpseo_wordproof_timestamp":null,"_wpml_media_duplicate":"1","_thumbnail_id":"219506","_wpml_media_featured":"1","_wpml_word_count":null,"_last_translation_edit_mode":null,"_last_editor_used_jetpack":null,"_elementor_edit_mode":null,"_elementor_template_type":null,"_wp_page_template":"default","_elementor_page_settings":null,"_elementor_data":null,"_elementor_page_assets":[],"_elementor_version":null,"_elementor_pro_version":null,"_elementor_elements_default_values":null,"_elementor_css":null,"_elementor_source":null,"_elementor_conditions":null,"_wpml_location_migration_done":null,"_elementor_controls_usage":null,"_elementor_screenshot_failed":null,"_elementor_screenshot":null,"_elementor_popup_display_settings":null,"_yoast_wpseo_primary_category":null,"_wp_old_date":null,"_elementor_template_widget_type":null,"_icl_lang_duplicate_of":null,"_yoast_wpseo_metadesc":"Olhando para tr\u00e1s, jQuery foi criado para dar conta das diferen\u00e7as de implementa\u00e7\u00e3o do JavaScript nos diferentes navegadores. Mas os tempos mudaram... para melhor!","_yoast_wpseo_title":"From jQuery to DOM and ES6 | Le Wagon","contenu_de_larticle":"<div>\n Olhando para tr\u00e1s, jQuery foi criado para dar conta das diferen\u00e7as de implementa\u00e7\u00e3o do JavaScript nos diferentes navegadores. O grande culpado atende pelo nome de Internet Explorer, que ficava sempre atrasado em rela\u00e7\u00e3o ao Mozilla Firefox e mais tarde ao Google Chrome. Uma solu\u00e7\u00e3o f\u00e1cil de usar, jQuery foi amplamente adotada por desenvolvedores tamb\u00e9m por iniciantes que muitas vezes tiveram seu primeiro contato com JavaScript atrav\u00e9s dessa biblioteca.&nbsp;\n <br>\n <br>\n<\/div>\n<div>\n Em 2017, o uso do IE8 ao IE11 caiu a ponto de o navegador poder ser \n <a href=\"https:\/\/www.microsoft.com\/en-gb\/WindowsForBusiness\/End-of-IE-support\">ignorado com seguran\u00e7a<\/a>. Isso significava que n\u00f3s desenvolvedores j\u00e1 pod\u00edamos abandonar completamente o jQuery e contar apenas com o \n <a href=\"https:\/\/dom.spec.whatwg.org\/\">standard DOM<\/a> e algumas pitadas de ES6. Velocidade sendo um dos principais crit\u00e9rios para SEO (e tamb\u00e9m para usu\u00e1rios!), evitar que seu navegador tenha que carregar toda uma biblioteca antes de processar o seu c\u00f3digo \u00e9 uma vantagem que n\u00e3o pode ser ignorada!\n <br>\n <br>\n<\/div>\n<h2>Selecionando os elementos no DOM<\/h2>\n<div>\n <br>\n<\/div>\n<div>\n Imagine o seguinte c\u00f3digo HTML:\n <strong><br><\/strong>\n <br>\n<\/div>\n<pre>&lt;div id=\"lead\"&gt;lorem ipsum&lt;\/div&gt;\n&lt;ul&gt;\n  &lt;li class=\"green\"&gt;First item&lt;\/li&gt;\n  &lt;li class=\"red\"&gt;Second item&lt;\/li&gt;\n  &lt;li class=\"green\"&gt;Third item&lt;\/li&gt;\n  &lt;li class=\"red\"&gt;Last item&lt;\/li&gt;\n&lt;\/ul&gt;\n&lt;p class=\"green status\"&gt;A great status&lt;\/p&gt;<\/pre>\n<div>\n <br>\n<\/div>\n<div>\n No jQuery voc\u00ea pode usar a fun\u00e7\u00e3o $() em combina\u00e7\u00e3o com algum seletor CSS para ir buscar elementos no DOM.\n <strong><br><\/strong>\n <br>\n<\/div>\n<pre>var lead = $('#lead');\nvar firstRedItem = $('.red').eq(0);\nvar greenListItems = $('li.green');  \/\/ Adding `li` not to select the `p`.<\/pre>\n<div>\n <br>\n<\/div>\n<div>\n Mas agora temos como alternativa os tr\u00eas m\u00e9dotos abaixo:\n <strong><br><\/strong>\n <br>\n<\/div>\n<ul>\n <li>- <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/getElementById\">getElementById<\/a><\/li>\n <li>- <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/querySelector\">Element.querySelector<\/a><\/li>\n <li>- <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/querySelectorAll\">Element.querySelectorAll<\/a><\/li>\n<\/ul>\n<div>\n <br>\n<\/div>\n<pre>const lead = document.getElementById('lead');  \/\/ \u26a0\ufe0f no #\nconst firstRedItem = document.querySelector('.red');\nconst greenListItems = document.querySelectorAll('li.green');<\/pre>\n<div>\n <br>\n<\/div>\n<div>\n Os olhares mais atentos perceberam que usamos const em vez de var. No ES6, em vez de \n <strong>var<\/strong>, usamos \n <strong>const<\/strong> ou \n <strong>let<\/strong>. Usaremos \n <strong>let<\/strong> quando quisermos mudar o valor de uma vari\u00e1vel, e const para os outros casos:\n <strong><br><\/strong>\n <br>\n<\/div>\n<pre>let name = \"George\";\nname = name + \" Abitbol\"; \/\/ `name` is being re-assigned.console.log(name);<\/pre>\n<div>\n <br>\n<\/div>\n<div>\n Voc\u00ea pode ler mais sobre isso em \n <a href=\"https:\/\/medium.com\/javascript-scene\/javascript-es6-var-let-or-const-ba58b8dcde75\">let and const<\/a>\n<\/div>\n<div>\n <br>\n<\/div>\n<h2>Inserindo um elemento no DOM<\/h2>\n<div>\n <br>\n<\/div>\n<div>\n Um uso cl\u00e1ssico do JavaScript seria inserir um novo elemento no DOM. Em um blog por exemplo, uma sess\u00e3o de coment\u00e1rios em AJAX iria inserir um coment\u00e1rio sem precisar recarregar a p\u00e1gina.\n <strong><br><\/strong>\n <br>\n<\/div>\n<pre>&lt;div id=\"comments\"&gt;  \n  &lt;p class=\"comment\"&gt;This was great!&lt;\/p&gt;\n  &lt;p class=\"comment\"&gt;I loved it :)&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;form&gt;  \n  &lt;textarea id=\"commentContent\"&gt;&lt;\/textarea&gt;\n  &lt;button&gt;Post comment&lt;\/button&gt;\n&lt;\/form&gt;<\/pre>\n<div>\n <br>\n<\/div>\n<div>\n Usando jQuery, far\u00edamos da seguinte maneira:\n <strong><br><\/strong>\n <br>\n<\/div>\n<pre>var commentContent = $('#commentContent').val(); \/\/ Skipping AJAX part\n$('#comments').append('&lt;p class=\"comment\"&gt;' + commentContent + '&lt;\/p&gt;');<\/pre>\n<div>\n <br>\n<\/div>\n<div>\n Agora podemos contar com \n <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/insertAdjacentHTML\">Element#insertAdjacentHTML<\/a> e com \n <a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/JavaScript\/Reference\/Template_literals\">ES6 template literals<\/a>:\n <strong><br><\/strong>\n <br>\n<\/div>\n<pre>const commentContent = document.getElementById('commentContent').value;\nconst comments = document.getElementById('comments');\n\ncomments.insertAdjacentHTML('beforeend', `&lt;p class=\"comment\"&gt;${commentContent}&lt;\/p&gt;`);<\/pre>\n<div>\n <br>\n<\/div>\n<h2>Atualizando classes CSS<\/h2>\n<div>\n <br>\n<\/div>\n<div>\n Adicionando, removendo ou modificando uma classe CSS em um elemento do DOM \u00e9 algo bem comum em um app usando JavaScript. Com o jQuery, usar\u00edamos:\n <strong><br><\/strong>\n <br>\n<\/div>\n<pre>$(selector).addClass('bold');\n$(selector).removeClass('bold');\n$(selector).toggleClass('bold');<\/pre>\n<div>\n <br>\n<\/div>\n<div>\n E isso seria aplicado em todos os elementos que correspondem a um dado seletor CSS:\n <br>\n <br>\n<\/div>\n<div>\n Sem o jQuery, voc\u00ea pode usar \n <a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/API\/Element\/classList\">classList<\/a>:\n <strong><br><\/strong>\n <br>\n<\/div>\n<pre>\/\/ For one element selected with `getElementById` or `querySelector`\nelement.classList.add('bold');\nelement.classList.remove('bold');\nelement.classList.toggle('bold');\n\n\/\/ For multiple elements selected with `querySelectorAll`:\nelements.forEach((element) =&gt; {  \n  element.classList.add('bold');\n  \/\/ etc.\n});<\/pre>\n<div>\n <br>\n<\/div>\n<div>\n Percebeu? Aqui usamos o \n <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/forEach\">Array.forEach<\/a>!\n<\/div>\n<div>\n <br>\n<\/div>\n<h2>Event listeners<\/h2>\n<div>\n <br>\n<\/div>\n<div>\n JavaScript permite que a gente tenha comportamentos din\u00e2micos em uma p\u00e1gina web. O mais simples exemplo que consigo pensar \u00e9 ter um alerta pop-up quando o usu\u00e1rio clica em um bot\u00e3o.\n <br>\n <br>\n<\/div>\n<pre>&lt;button id=\"useless-btn\"&gt;Click me!&lt;\/button&gt;<\/pre>\n<div>\n <br>\n<\/div>\n<div>\n Com jQuery, a gente usaria o m\u00e9todo .on()&nbsp; (ou um de seus atalhos):\n <strong><br><\/strong>\n <br>\n<\/div>\n<pre>$('#useless-btn').on('click', function(event) {  \n  alert('Thanks for clicking!');\n});<\/pre>\n<div>\n <br>\n<\/div>\n<div>\n Mas no DOM a gente pode brincar com o \n <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/EventTarget\/addEventListener\">addEventListener<\/a>:\n <strong><br><\/strong>\n <br>\n<\/div>\n<pre>const button = document.getElementById('useless-btn');\nbutton.addEventListener('click', (event) =&gt; {  \n  alert('Thanks for clicking!');\n});<\/pre>\n<div>\n <br>\n<\/div>\n<div>\n Para buscar informa\u00e7\u00e3o sobre um elemento clicado, voc\u00ea pode aplicar um call back em um evento event.target. Mas o que \u00e9 esse\n <strong> =&gt;<\/strong>? Bom, isso \u00e9 uma \n <a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\">arrow function<\/a>. Isso serve para a gente ser capaz de preservar uma vari\u00e1vel e n\u00e3o precisar fazer aquela gambiarra do vari\u00e1vel1 = vari\u00e1vel2. Wes Bos tem um \u00f3timo \n <a href=\"http:\/\/wesbos.com\/javascript-arrow-functions\/\">post e video<\/a> sobre o assunto.\n <strong><br><\/strong>\n <br>\n<\/div>\n<h2>AJAX<\/h2>\n<div>\n <br>\n<\/div>\n<div>\n Quando falamos de AJAX, a implementa\u00e7\u00e3o original se apoia no \n <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/XMLHttpRequest\/Using_XMLHttpRequest\">XMLHttpRequest<\/a>, mas ningu\u00e9m quer usar aquilo! jQuery resolveu este problema h\u00e1 10 anos com o m\u00e9todo $.ajax e seus dois atalhos $.get e $.post:\n<\/div>\n<div>\n <br>\n<\/div>\n<pre>\/\/ GET request\n$.ajax({  \n  url: \"https:\/\/swapi.co\/api\/people\/\",  \n  type: \"GET\"  \n  success: function(data) {    \n   console.log(data);  \n  }\n});\n\n\/\/ POST request\n\nconst data = { name: \"a name\", email: \"an@email.com\" };\n\n$.ajax({  \n  url: url,  \n  type: \"POST\",  \n  data: data,  \n  success: function(data) {    \n    console.log(data);  \n  }\n});<\/pre>\n<div>\n <br>\n<\/div>\n<div>\n Nos navegadores atuais, podemos contar com o \n <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API\/Using_Fetch\">fetch<\/a> que fornece uma API melhor que a do basi\u00e7\u00e3o XMLHttpRequest.\n<\/div>\n<div>\n <br>\n<\/div>\n<pre>\/\/ GET request\nfetch(\"https:\/\/swapi.co\/api\/people\/\")  \n  .then(response =&gt; response.json())  \n  .then((data) =&gt; {    \n    console.log(data);  \n  });\n\n\/\/ POST requestconst \ndata = { name: \"a name\", email: \"an@email.com\" };\nfetch(url, {  \n  method: 'POST',  \n  headers: { \"Content-Type\": \"application\/json\" },  \n  body: JSON.stringify(data)})\n   .then(response =&gt; response.json())\n   .then((data) =&gt; {\n     console.log(data);\n   });<\/pre>\n<div>\n <br>\n<\/div>\n<div>\n Perceba que o segundo argumento da fun\u00e7\u00e3o fetch() \u00e9 um hash usando como chaves nomes que representam as partes de uma requisi\u00e7\u00e3o HTTP: o m\u00e9todo (ou verbo), os cabe\u00e7alhos (headers) e o corpo(body).\n<\/div>\n<div>\n <br>\n<\/div>\n<h2>Indo al\u00e9m<\/h2>\n<div>\n <br>\n<\/div>\n<div>\n Alguns recursos para ir al\u00e9m neste tema (em  ):\n <strong><br><\/strong>\n <br>\n<\/div>\n<ul>\n <li>- <a href=\"https:\/\/github.com\/oneuijs\/You-Dont-Need-jQuery\">You don't need jQuery<\/a><\/li>\n <li>- <a href=\"http:\/\/youmightnotneedjquery.com\/\">You might not need jQuery<\/a><\/li>\n <li>- <a href=\"http:\/\/blog.wearecolony.com\/a-year-without-jquery\/\">A year without jQuery<\/a><\/li>\n<\/ul>","_contenu_de_larticle":null,"titre_de_la_banniere":null,"_titre_de_la_banniere":null,"paragraphe_de_la_banniere":null,"_paragraphe_de_la_banniere":null,"intitule_du_bouton_de_la_banniere":null,"_intitule_du_bouton_de_la_banniere":null,"lien_du_bouton_de_la_banniere":null,"_lien_du_bouton_de_la_banniere":null,"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>From jQuery to DOM and ES6 | Le Wagon<\/title>\n<meta name=\"description\" content=\"Olhando para tr\u00e1s, jQuery foi criado para dar conta das diferen\u00e7as de implementa\u00e7\u00e3o do JavaScript nos diferentes navegadores. Mas os tempos mudaram... para melhor!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.lewagon.com\/pt-br\/skills\/from-jquery-to-dom-and-es6\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"From jQuery to DOM and ES6 | Le Wagon\" \/>\n<meta property=\"og:description\" content=\"Olhando para tr\u00e1s, jQuery foi criado para dar conta das diferen\u00e7as de implementa\u00e7\u00e3o do JavaScript nos diferentes navegadores. Mas os tempos mudaram... para melhor!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.lewagon.com\/pt-br\/skills\/from-jquery-to-dom-and-es6\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Le Wagon\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-08T22:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/rx0q8zcbkgc6573u1q0jyylsp8f0.jpeg\" \/>\n<meta name=\"author\" content=\"MickaelT\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"From jQuery to DOM and ES6 | Le Wagon\" \/>\n<meta name=\"twitter:description\" content=\"Olhando para tr\u00e1s, jQuery foi criado para dar conta das diferen\u00e7as de implementa\u00e7\u00e3o do JavaScript nos diferentes navegadores. Mas os tempos mudaram... para melhor!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/rx0q8zcbkgc6573u1q0jyylsp8f0.jpeg\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"MickaelT\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/from-jquery-to-dom-and-es6\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/from-jquery-to-dom-and-es6\\\/\"},\"author\":{\"name\":\"MickaelT\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#\\\/schema\\\/person\\\/8b4567040d8a3520451362bb71ea09e6\"},\"headline\":\"From jQuery to DOM and ES6\",\"datePublished\":\"2017-08-08T22:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/from-jquery-to-dom-and-es6\\\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/from-jquery-to-dom-and-es6\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/rx0q8zcbkgc6573u1q0jyylsp8f0-6.jpeg?fit=1200%2C800&ssl=1\",\"keywords\":[\"Tech\"],\"articleSection\":[\"Skills\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/from-jquery-to-dom-and-es6\\\/\",\"url\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/from-jquery-to-dom-and-es6\\\/\",\"name\":\"From jQuery to DOM and ES6 | Le Wagon\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/from-jquery-to-dom-and-es6\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/from-jquery-to-dom-and-es6\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/rx0q8zcbkgc6573u1q0jyylsp8f0-6.jpeg?fit=1200%2C800&ssl=1\",\"datePublished\":\"2017-08-08T22:00:00+00:00\",\"description\":\"Olhando para tr\u00e1s, jQuery foi criado para dar conta das diferen\u00e7as de implementa\u00e7\u00e3o do JavaScript nos diferentes navegadores. Mas os tempos mudaram... para melhor!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/from-jquery-to-dom-and-es6\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/from-jquery-to-dom-and-es6\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/from-jquery-to-dom-and-es6\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/rx0q8zcbkgc6573u1q0jyylsp8f0-6.jpeg?fit=1200%2C800&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/rx0q8zcbkgc6573u1q0jyylsp8f0-6.jpeg?fit=1200%2C800&ssl=1\",\"width\":1200,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/from-jquery-to-dom-and-es6\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Skills\",\"item\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/.\\\/skills\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"From jQuery to DOM and ES6\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#website\",\"url\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/\",\"name\":\"Le Wagon\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#organization\",\"name\":\"Le Wagon\",\"url\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/logo.svg\",\"width\":172,\"height\":44,\"caption\":\"Le Wagon\"},\"image\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#\\\/schema\\\/person\\\/8b4567040d8a3520451362bb71ea09e6\",\"name\":\"MickaelT\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g\",\"caption\":\"MickaelT\"},\"sameAs\":[\"http:\\\/\\\/blog.lewagon.com\"],\"url\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/author\\\/mickaelt\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"From jQuery to DOM and ES6 | Le Wagon","description":"Olhando para tr\u00e1s, jQuery foi criado para dar conta das diferen\u00e7as de implementa\u00e7\u00e3o do JavaScript nos diferentes navegadores. Mas os tempos mudaram... para melhor!","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:\/\/blog.lewagon.com\/pt-br\/skills\/from-jquery-to-dom-and-es6\/","og_locale":"pt_BR","og_type":"article","og_title":"From jQuery to DOM and ES6 | Le Wagon","og_description":"Olhando para tr\u00e1s, jQuery foi criado para dar conta das diferen\u00e7as de implementa\u00e7\u00e3o do JavaScript nos diferentes navegadores. Mas os tempos mudaram... para melhor!","og_url":"https:\/\/blog.lewagon.com\/pt-br\/skills\/from-jquery-to-dom-and-es6\/","og_site_name":"Blog Le Wagon","article_published_time":"2017-08-08T22:00:00+00:00","og_image":[{"url":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/rx0q8zcbkgc6573u1q0jyylsp8f0.jpeg","type":"","width":"","height":""}],"author":"MickaelT","twitter_card":"summary_large_image","twitter_title":"From jQuery to DOM and ES6 | Le Wagon","twitter_description":"Olhando para tr\u00e1s, jQuery foi criado para dar conta das diferen\u00e7as de implementa\u00e7\u00e3o do JavaScript nos diferentes navegadores. Mas os tempos mudaram... para melhor!","twitter_image":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/rx0q8zcbkgc6573u1q0jyylsp8f0.jpeg","twitter_misc":{"Escrito por":"MickaelT"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/from-jquery-to-dom-and-es6\/#article","isPartOf":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/from-jquery-to-dom-and-es6\/"},"author":{"name":"MickaelT","@id":"https:\/\/blog.lewagon.com\/pt-br\/#\/schema\/person\/8b4567040d8a3520451362bb71ea09e6"},"headline":"From jQuery to DOM and ES6","datePublished":"2017-08-08T22:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/from-jquery-to-dom-and-es6\/"},"wordCount":6,"publisher":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/#organization"},"image":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/from-jquery-to-dom-and-es6\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blog.lewagon.com\/wp-content\/uploads\/2023\/04\/rx0q8zcbkgc6573u1q0jyylsp8f0-6.jpeg?fit=1200%2C800&ssl=1","keywords":["Tech"],"articleSection":["Skills"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/from-jquery-to-dom-and-es6\/","url":"https:\/\/blog.lewagon.com\/pt-br\/skills\/from-jquery-to-dom-and-es6\/","name":"From jQuery to DOM and ES6 | Le Wagon","isPartOf":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/from-jquery-to-dom-and-es6\/#primaryimage"},"image":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/from-jquery-to-dom-and-es6\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blog.lewagon.com\/wp-content\/uploads\/2023\/04\/rx0q8zcbkgc6573u1q0jyylsp8f0-6.jpeg?fit=1200%2C800&ssl=1","datePublished":"2017-08-08T22:00:00+00:00","description":"Olhando para tr\u00e1s, jQuery foi criado para dar conta das diferen\u00e7as de implementa\u00e7\u00e3o do JavaScript nos diferentes navegadores. Mas os tempos mudaram... para melhor!","breadcrumb":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/from-jquery-to-dom-and-es6\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.lewagon.com\/pt-br\/skills\/from-jquery-to-dom-and-es6\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/from-jquery-to-dom-and-es6\/#primaryimage","url":"https:\/\/i0.wp.com\/blog.lewagon.com\/wp-content\/uploads\/2023\/04\/rx0q8zcbkgc6573u1q0jyylsp8f0-6.jpeg?fit=1200%2C800&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blog.lewagon.com\/wp-content\/uploads\/2023\/04\/rx0q8zcbkgc6573u1q0jyylsp8f0-6.jpeg?fit=1200%2C800&ssl=1","width":1200,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/from-jquery-to-dom-and-es6\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/blog.lewagon.com\/pt-br\/"},{"@type":"ListItem","position":2,"name":"Skills","item":"https:\/\/blog.lewagon.com\/pt-br\/.\/skills\/"},{"@type":"ListItem","position":3,"name":"From jQuery to DOM and ES6"}]},{"@type":"WebSite","@id":"https:\/\/blog.lewagon.com\/pt-br\/#website","url":"https:\/\/blog.lewagon.com\/pt-br\/","name":"Le Wagon","description":"","publisher":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.lewagon.com\/pt-br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/blog.lewagon.com\/pt-br\/#organization","name":"Le Wagon","url":"https:\/\/blog.lewagon.com\/pt-br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/blog.lewagon.com\/pt-br\/#\/schema\/logo\/image\/","url":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/02\/logo.svg","contentUrl":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/02\/logo.svg","width":172,"height":44,"caption":"Le Wagon"},"image":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/blog.lewagon.com\/pt-br\/#\/schema\/person\/8b4567040d8a3520451362bb71ea09e6","name":"MickaelT","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g","caption":"MickaelT"},"sameAs":["http:\/\/blog.lewagon.com"],"url":"https:\/\/blog.lewagon.com\/pt-br\/author\/mickaelt\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blog.lewagon.com\/wp-content\/uploads\/2023\/04\/rx0q8zcbkgc6573u1q0jyylsp8f0-6.jpeg?fit=1200%2C800&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/posts\/219505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/comments?post=219505"}],"version-history":[{"count":0,"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/posts\/219505\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/media\/219506"}],"wp:attachment":[{"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/media?parent=219505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/categories?post=219505"},{"taxonomy":"type_de_post","embeddable":true,"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/type_de_post?post=219505"},{"taxonomy":"post-format","embeddable":true,"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/post-format?post=219505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}