{"id":2999,"date":"2024-11-30T21:28:40","date_gmt":"2024-11-30T14:28:40","guid":{"rendered":"https:\/\/fstack.io.vn\/?p=2999"},"modified":"2024-11-30T22:16:00","modified_gmt":"2024-11-30T15:16:00","slug":"dom-la-gi-cach-thao-tac-voi-dom-trong-javascript","status":"publish","type":"post","link":"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/","title":{"rendered":"DOM l\u00e0 g\u00ec ? 1 S\u1ed1 Thao t\u00e1c v\u1edbi DOM trong JavaScript."},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2999\" class=\"elementor elementor-2999\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f38b3b e-flex e-con-boxed e-con e-parent\" data-id=\"5f38b3b\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4cea02c elementor-widget elementor-widget-heading\" data-id=\"4cea02c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Danh m\u1ee5c b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/#DOM_la_gi\" >DOM l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/#Cac_thanh_phan_chinh_cua_DOM\" >C\u00e1c th\u00e0nh ph\u1ea7n ch\u00ednh c\u1ee7a DOM:<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/#1_Document\" >1. Document<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/#2_Elements\" >2. Elements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/#3_Attributes\" >3. Attributes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/#4_Text_Nodes\" >4. Text Nodes<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/#Cach_JavaScript_tuong_tac_voi_DOM\" >C\u00e1ch JavaScript t\u01b0\u01a1ng t\u00e1c v\u1edbi DOM<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/#1_Truy_xuat_phan_tu_DOM\" >1. Truy xu\u1ea5t ph\u1ea7n t\u1eed DOM<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/#2_Thay_doi_noi_dung_va_thuoc_tinh\" >2. Thay \u0111\u1ed5i n\u1ed9i dung v\u00e0 thu\u1ed9c t\u00ednh<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/#3_Thao_tac_voi_CSS\" >3. Thao t\u00e1c v\u1edbi CSS<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/#4_Them_va_xoa_phan_tu\" >4. Th\u00eam v\u00e0 x\u00f3a ph\u1ea7n t\u1eed<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/#Ung_dung_thuc_te\" >\u1ee8ng d\u1ee5ng th\u1ef1c t\u1ebf<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/#1_Xu_ly_su_kien\" >1. X\u1eed l\u00fd s\u1ef1 ki\u1ec7n<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/#2_Tao_hieu_ung_dong\" >2. T\u1ea1o hi\u1ec7u \u1ee9ng \u0111\u1ed9ng<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"DOM_la_gi\"><\/span>DOM l\u00e0 g\u00ec?<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89684c3 elementor-widget elementor-widget-text-editor\" data-id=\"89684c3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>DOM (Document Object Model)<\/strong> l\u00e0 m\u1ed9t <a href=\"https:\/\/fstack.io.vn\/blog\/du-an\/\">giao di\u1ec7n<\/a> <a href=\"https:\/\/fstack.io.vn\/blog\/lap-trinh-la-gi-mot-so-dac-diem-cua-lap-trinh-ma-ban-nen-biet\/\">l\u1eadp tr\u00ecnh<\/a> cung c\u1ea5p <a href=\"https:\/\/fstack.io.vn\/blog\/4-cau-truc-du-lieu-va-giai-thuat-la-gi\/\">c\u1ea5u tr\u00fac<\/a> d\u1eef li\u1ec7u d\u1ea1ng c\u00e2y \u0111\u1ec3 <a href=\"https:\/\/fstack.io.vn\/blog\/mot-so-cau-hoi-phong-van-javascript-tu-co-ban-den-nang-cao\/\">JavaScript<\/a> c\u00f3 th\u1ec3 t\u01b0\u01a1ng t\u00e1c v\u1edbi t\u00e0i li\u1ec7u HTML ho\u1eb7c XML. Khi tr\u00ecnh duy\u1ec7t t\u1ea3i trang web, n\u00f3 chuy\u1ec3n \u0111\u1ed5i HTML th\u00e0nh m\u1ed9t c\u00e2y DOM. M\u1ed7i th\u00e0nh ph\u1ea7n trong t\u00e0i li\u1ec7u HTML s\u1ebd tr\u1edf th\u00e0nh m\u1ed9t <strong>node<\/strong> trong c\u00e2y DOM.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f7bc6fb elementor-widget elementor-widget-image\" data-id=\"f7bc6fb\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"486\" height=\"266\" src=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/11\/pic_htmltree.gif\" class=\"attachment-large size-large wp-image-3003\" alt=\"dom-tree\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d6d7a78 elementor-widget elementor-widget-text-editor\" data-id=\"d6d7a78\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ngu\u1ed3n: W3 Schools<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cae80d3 elementor-widget elementor-widget-heading\" data-id=\"cae80d3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Cac_thanh_phan_chinh_cua_DOM\"><\/span>C\u00e1c th\u00e0nh ph\u1ea7n ch\u00ednh c\u1ee7a DOM:<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-56e5ad2 elementor-widget elementor-widget-heading\" data-id=\"56e5ad2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"1_Document\"><\/span>1. Document<span class=\"ez-toc-section-end\"><\/span><\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e362b91 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"e362b91\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">L\u00e0 g\u1ed1c c\u1ee7a c\u00e2y DOM, \u0111\u1ea1i di\u1ec7n cho to\u00e0n b\u1ed9 t\u00e0i li\u1ec7u HTML ho\u1eb7c XML \u0111\u01b0\u1ee3c t\u1ea3i trong tr\u00ecnh duy\u1ec7t.<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">N\u00f3 cung c\u1ea5p m\u1ed9t API \u0111\u1ec3 truy c\u1eadp v\u00e0 thao t\u00e1c v\u1edbi n\u1ed9i dung c\u1ee7a trang web, nh\u01b0 thay \u0111\u1ed5i n\u1ed9i dung, c\u1ea5u tr\u00fac ho\u1eb7c phong c\u00e1ch.<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de3a81e elementor-widget elementor-widget-heading\" data-id=\"de3a81e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"2_Elements\"><\/span>2. Elements<span class=\"ez-toc-section-end\"><\/span><\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-087cd02 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"087cd02\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u0110\u1ea1i di\u1ec7n cho c\u00e1c ph\u1ea7n t\u1eed HTML nh\u01b0 div, p, img, a ,...<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">M\u1ed7i ph\u1ea7n t\u1eed HTML tr\u00ean trang \u0111\u01b0\u1ee3c bi\u1ec3u di\u1ec5n d\u01b0\u1edbi d\u1ea1ng m\u1ed9t <a href=\"https:\/\/fstack.io.vn\/blog\/lap-trinh-huong-doi-tuong-la-gi-mot-so-dac-trung-cua-oop\/\">\u0111\u1ed1i t\u01b0\u1ee3ng<\/a> trong DOM.<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6f4031a elementor-widget elementor-widget-heading\" data-id=\"6f4031a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"3_Attributes\"><\/span>3. Attributes<span class=\"ez-toc-section-end\"><\/span><\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ea3708 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"7ea3708\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed HTML, ch\u1eb3ng h\u1ea1n nh\u01b0 id, class, src, style,...<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">C\u00e1c thu\u1ed9c t\u00ednh n\u00e0y gi\u00fap b\u1ed5 sung th\u00f4ng tin ho\u1eb7c \u0111\u1ecbnh ngh\u0129a c\u00e1ch ho\u1ea1t \u0111\u1ed9ng c\u1ee7a ph\u1ea7n t\u1eed<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4391d1f elementor-widget elementor-widget-heading\" data-id=\"4391d1f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"4_Text_Nodes\"><\/span>4. Text Nodes<span class=\"ez-toc-section-end\"><\/span><\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4656a52 elementor-widget elementor-widget-text-editor\" data-id=\"4656a52\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u0110\u1ea1i di\u1ec7n cho n\u1ed9i dung v\u0103n b\u1ea3n n\u1eb1m gi\u1eefa c\u00e1c th\u1ebb HTML, v\u00ed d\u1ee5<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b8012d elementor-widget elementor-widget-code-highlight\" data-id=\"1b8012d\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><p>Ch\u00e0o m\u1eebng b\u1ea1n \u0111\u1ebfn v\u1edbi <a href=\"https:\/\/fstack.io.vn\/blog\/ve-chung-toi\/\">Fstack<\/a>.<\/p>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9a9861e elementor-widget elementor-widget-text-editor\" data-id=\"9a9861e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Trong DOM, n\u1ed9i dung &#8220;\u0110\u00e2y l\u00e0 m\u1ed9t \u0111o\u1ea1n v\u0103n b\u1ea3n.&#8221; l\u00e0 m\u1ed9t n\u00fat v\u0103n b\u1ea3n (text node).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5a90050 elementor-widget elementor-widget-heading\" data-id=\"5a90050\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Cach_JavaScript_tuong_tac_voi_DOM\"><\/span>C\u00e1ch JavaScript t\u01b0\u01a1ng t\u00e1c v\u1edbi DOM<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c87488d elementor-widget elementor-widget-heading\" data-id=\"c87488d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"1_Truy_xuat_phan_tu_DOM\"><\/span>1. Truy xu\u1ea5t ph\u1ea7n t\u1eed DOM<span class=\"ez-toc-section-end\"><\/span><\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bffc88b elementor-widget elementor-widget-text-editor\" data-id=\"bffc88b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>JavaScript cung c\u1ea5p c\u00e1c ph\u01b0\u01a1ng th\u1ee9c \u0111\u1ec3 l\u1ea5y c\u00e1c ph\u1ea7n t\u1eed trong DOM:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11f30c4 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"11f30c4\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\"><strong><code>getElementById<\/code><\/strong>: Truy xu\u1ea5t ph\u1ea7n t\u1eed theo <code>id.<\/code><\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7817af1 elementor-widget elementor-widget-code-highlight\" data-id=\"7817af1\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const heading = document.getElementById('heading');\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1c74036 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"1c74036\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\"><b>getElementsByClassName<\/b>: L\u1ea5y danh s\u00e1ch c\u00e1c ph\u1ea7n t\u1eed theo class<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-87741e1 elementor-widget elementor-widget-code-highlight\" data-id=\"87741e1\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const items = document.getElementsByClassName('item');\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6b472a4 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"6b472a4\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\"><b>querySelector \/ querySelectorAll<\/b>: Cung c\u1ea5p c\u00e1ch truy xu\u1ea5t linh ho\u1ea1t v\u1edbi CSS selectors.<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-423dc6c elementor-widget elementor-widget-code-highlight\" data-id=\"423dc6c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const firstItem = document.querySelector('.item'); \/\/ L\u1ea5y ph\u1ea7n t\u1eed \u0111\u1ea7u ti\u00ean\r\nconst allItems = document.querySelectorAll('.item'); \/\/ L\u1ea5y t\u1ea5t c\u1ea3\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-41108b6 elementor-widget elementor-widget-heading\" data-id=\"41108b6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"2_Thay_doi_noi_dung_va_thuoc_tinh\"><\/span>2. Thay \u0111\u1ed5i n\u1ed9i dung v\u00e0 thu\u1ed9c t\u00ednh<span class=\"ez-toc-section-end\"><\/span><\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-40a52ce elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"40a52ce\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\"><b>C\u1eadp nh\u1eadt n\u1ed9i dung:<\/b><\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b5b7ba elementor-widget elementor-widget-code-highlight\" data-id=\"9b5b7ba\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const heading = document.getElementById('heading');\r\nheading.textContent = 'Ch\u00e0o m\u1eebng b\u1ea1n \u0111\u1ebfn v\u1edbi Fstack!'; \/\/ Thay \u0111\u1ed5i n\u1ed9i dung\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-01ad205 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"01ad205\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\"><b>Thay \u0111\u1ed5i thu\u1ed9c t\u00ednh:<\/b><\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3739da9 elementor-widget elementor-widget-code-highlight\" data-id=\"3739da9\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const link = document.querySelector('a');\r\nlink.href = 'https:\/\/fstack.io.vn'; \/\/ C\u1eadp nh\u1eadt li\u00ean k\u1ebft\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aca0e82 elementor-widget elementor-widget-heading\" data-id=\"aca0e82\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"3_Thao_tac_voi_CSS\"><\/span>3. Thao t\u00e1c v\u1edbi CSS<span class=\"ez-toc-section-end\"><\/span><\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-55d3977 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"55d3977\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\"><b>Thay \u0111\u1ed5i tr\u1ef1c ti\u1ebfp:<\/b><\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-483191f elementor-widget elementor-widget-code-highlight\" data-id=\"483191f\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const heading = document.querySelector('#heading');\r\nheading.style.color = 'blue';\r\nheading.style.fontSize = '24px';\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bfeb062 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"bfeb062\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\"><b>Th\u00eam \/ x\u00f3a l\u1edbp CSS:<\/b><\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-69a3565 elementor-widget elementor-widget-code-highlight\" data-id=\"69a3565\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>heading.classList.add('highlight'); \/\/ Th\u00eam l\u1edbp\r\nheading.classList.remove('highlight'); \/\/ X\u00f3a l\u1edbp\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eafa3cf elementor-widget elementor-widget-heading\" data-id=\"eafa3cf\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"4_Them_va_xoa_phan_tu\"><\/span>4. Th\u00eam v\u00e0 x\u00f3a ph\u1ea7n t\u1eed<span class=\"ez-toc-section-end\"><\/span><\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2f8bc1 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"a2f8bc1\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\"><b>Th\u00eam ph\u1ea7n t\u1eed:<\/b><\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b2d9009 elementor-widget elementor-widget-code-highlight\" data-id=\"b2d9009\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const newItem = document.createElement('li');\r\nnewItem.textContent = 'M\u1ee5c m\u1edbi';\r\ndocument.querySelector('ul').appendChild(newItem); \/\/ Th\u00eam v\u00e0o danh s\u00e1ch\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab88429 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"ab88429\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\"><b>X\u00f3a ph\u1ea7n t\u1eed:<\/b><\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88cbb64 elementor-widget elementor-widget-code-highlight\" data-id=\"88cbb64\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const item = document.querySelector('.item');\r\nitem.remove();\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-333435f elementor-widget elementor-widget-heading\" data-id=\"333435f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Ung_dung_thuc_te\"><\/span>\u1ee8ng d\u1ee5ng th\u1ef1c t\u1ebf<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a49b02a elementor-widget elementor-widget-heading\" data-id=\"a49b02a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"1_Xu_ly_su_kien\"><\/span>1. X\u1eed l\u00fd s\u1ef1 ki\u1ec7n<span class=\"ez-toc-section-end\"><\/span><\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ac8159 elementor-widget elementor-widget-text-editor\" data-id=\"7ac8159\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>B\u1ea1n c\u00f3 th\u1ec3 l\u1eafng nghe v\u00e0 ph\u1ea3n h\u1ed3i c\u00e1c s\u1ef1 ki\u1ec7n c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, ch\u1eb3ng h\u1ea1n nh\u01b0 <strong>click<\/strong>, <strong>hover<\/strong>, ho\u1eb7c <strong>submit<\/strong>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5335743 elementor-widget elementor-widget-code-highlight\" data-id=\"5335743\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const button = document.querySelector('button');\r\nbutton.addEventListener('click', () => {\r\n  alert('B\u1ea1n v\u1eeba nh\u1ea5n n\u00fat!');\r\n});\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5788b13 elementor-widget elementor-widget-heading\" data-id=\"5788b13\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"2_Tao_hieu_ung_dong\"><\/span>2. T\u1ea1o hi\u1ec7u \u1ee9ng \u0111\u1ed9ng<span class=\"ez-toc-section-end\"><\/span><\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af4a64e elementor-widget elementor-widget-text-editor\" data-id=\"af4a64e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>DOM th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng t\u01b0\u01a1ng t\u00e1c nh\u01b0 <strong>\u1ea9n\/hi\u1ec7n n\u1ed9i dung<\/strong>, <strong>thay \u0111\u1ed5i tr\u1ea1ng th\u00e1i<\/strong>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-998411c elementor-widget elementor-widget-code-highlight\" data-id=\"998411c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const box = document.querySelector('.box');\r\nbox.addEventListener('mouseover', () => {\r\n  box.style.backgroundColor = 'yellow';\r\n});\r\nbox.addEventListener('mouseout', () => {\r\n  box.style.backgroundColor = 'white';\r\n});\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-59afc68 elementor-widget elementor-widget-heading\" data-id=\"59afc68\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span>T\u1ed5ng k\u1ebft<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f0ff5fa elementor-widget elementor-widget-text-editor\" data-id=\"f0ff5fa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Nh\u01b0 v\u1eady, ch\u00fang ta \u0111\u00e3 c\u00f9ng nhau t\u00ecm hi\u1ec3u c\u00e1c kh\u00e1i ni\u1ec7m c\u01a1 b\u1ea3n v\u1ec1 c\u1ea5u tr\u00fac t\u00e0i li\u1ec7u v\u00e0 c\u00e1ch t\u01b0\u01a1ng t\u00e1c v\u1edbi DOm. M\u1eb7c d\u00f9 ch\u1ec9 d\u1eebng l\u1ea1i \u1edf nh\u1eefng ki\u1ebfn th\u1ee9c n\u1ec1n t\u1ea3ng, b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 th\u1ea5y s\u1ef1 quan tr\u1ecdng v\u00e0 s\u1ee9c m\u1ea1nh c\u1ee7a m\u00f4 h\u00ecnh n\u00e0y. Hi\u1ec3u r\u00f5 c\u00e1ch ho\u1ea1t \u0111\u1ed9ng c\u1ee7a n\u00f3 s\u1ebd gi\u00fap b\u1ea1n l\u00e0m ch\u1ee7 c\u00e1c k\u1ef9 thu\u1eadt hi\u1ec7n \u0111\u1ea1i h\u01a1n nh\u01b0 <a href=\"https:\/\/fstack.io.vn\/blog\/react-query-la-gi-tai-sao-nen-dung-react-query\/\">React<\/a>, Vue, ho\u1eb7c Angular.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ccc7dee elementor-widget elementor-widget-heading\" data-id=\"ccc7dee\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/www.w3schools.com\/js\/js_htmldom.asp\" rel=\"nofollow noopener\" target=\"_blank\">Click \u0111\u1ec3 xem chi ti\u1ebft h\u01a1n<\/a><\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b04de7e elementor-widget elementor-widget-text-editor\" data-id=\"b04de7e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u1ede tr\u00ean l\u00e0 1 s\u1ed1 chia s\u1ebb v\u1ec1 ki\u1ebfn th\u1ee9c JavaScript c\u1ee7a m\u00ecnh, v\u00ec \u0111\u00e2y \u0111a ph\u1ea7n l\u00e0 ki\u1ebfn th\u1ee9c m\u00ecnh t\u1ef1 h\u1ecdc n\u00ean c\u00f3 th\u1ec3 b\u00e0i vi\u1ebft n\u00e0y c\u00f3 th\u1ec3 c\u00f3 nhi\u1ec1u ch\u1ed7 ch\u01b0a ch\u00ednh x\u00e1c v\u00e0 thi\u1ebfu s\u00f3t, mong m\u1ecdi ng\u01b0\u1eddi g\u00f3p \u00fd \u1edf d\u01b0\u1edbi ph\u1ea7n b\u00ecnh lu\u1eadn \u0111\u1ec3 b\u00e0i vi\u1ebft th\u00eam ho\u00e0n ch\u1ec9nh v\u00e0 x\u00e2y d\u1ef1ng m\u1ed9t c\u1ed9ng \u0111\u1ed3ng n\u01a1i m\u1ecdi ng\u01b0\u1eddi c\u00f3 th\u1ec3 chia s\u1ebb kinh nghi\u1ec7m\u00a0<a href=\"https:\/\/fstack.io.vn\/lap-trinh-la-gi-mot-so-dac-diem-cua-lap-trinh-ma-ban-nen-biet\/\">l\u1eadp tr\u00ecnh<\/a>\u00a0cho nhau\u00a0\ud83d\ude18.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>DOM l\u00e0 g\u00ec? DOM (Document Object Model) l\u00e0 m\u1ed9t giao di\u1ec7n l\u1eadp tr\u00ecnh cung c\u1ea5p c\u1ea5u tr\u00fac d\u1eef li\u1ec7u d\u1ea1ng c\u00e2y \u0111\u1ec3 JavaScript c\u00f3 th\u1ec3 t\u01b0\u01a1ng t\u00e1c v\u1edbi t\u00e0i li\u1ec7u HTML ho\u1eb7c XML. Khi tr\u00ecnh duy\u1ec7t t\u1ea3i trang web, n\u00f3 chuy\u1ec3n \u0111\u1ed5i HTML th\u00e0nh m\u1ed9t c\u00e2y DOM. M\u1ed7i th\u00e0nh ph\u1ea7n trong t\u00e0i li\u1ec7u HTML s\u1ebd [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":3000,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[73],"tags":[83,82],"class_list":["post-2999","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-document-object-model","tag-dom"],"acf":[],"jetpack_featured_media_url":"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/11\/dom.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/2999","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/comments?post=2999"}],"version-history":[{"count":15,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/2999\/revisions"}],"predecessor-version":[{"id":3019,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/2999\/revisions\/3019"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media\/3000"}],"wp:attachment":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media?parent=2999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/categories?post=2999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/tags?post=2999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}