{"id":28385,"date":"2021-07-27T21:16:21","date_gmt":"2021-07-27T14:16:21","guid":{"rendered":"https:\/\/wiki.tino.org\/staging\/?p=28385"},"modified":"2021-08-02T18:16:28","modified_gmt":"2021-08-02T11:16:28","slug":"dom-la-gi","status":"publish","type":"post","link":"https:\/\/tino.vn\/blog\/dom-la-gi\/","title":{"rendered":"DOM l\u00e0 g\u00ec? DOM v\u00e0 JavaScript c\u00f3 m\u1ed1i quan h\u1ec7 nh\u01b0 th\u1ebf n\u00e0o?"},"content":{"rendered":"\n<p><strong><a href=\"https:\/\/tino.vn\/blog\/html-css-javascript-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScrpit<\/a> l\u00e0 m\u1ed9t ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh c\u00f3 nhi\u1ec1u ch\u1ee9c n\u0103ng, trong \u0111\u00f3 bao g\u1ed3m vi\u1ec7c thao t\u00e1c v\u1edbi c\u00e1c t\u00e0i li\u1ec7u <a href=\"https:\/\/tino.vn\/blog\/html-css-javascript-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML<\/a>. Tuy nhi\u00ean, \u0111\u1ec3 JavaScript l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u n\u00e0y ph\u1ea3i th\u00f4ng qua m\u1ed9t c\u01a1 ch\u1ebf g\u1ecdi l\u00e0 DOM. V\u1eady DOM l\u00e0 g\u00ec? DOM v\u00e0 JavaScript c\u00f3 m\u1ed1i quan h\u1ec7 nh\u01b0 th\u1ebf n\u00e0o? C\u00e1c b\u1ea1n h\u00e3y c\u00f9ng Tino Group t\u00ecm hi\u1ec3u chi ti\u1ebft qua b\u00e0i bi\u1ebft d\u01b0\u1edbi \u0111\u00e2y nh\u00e9!<\/strong><\/p>\n\n\n\n<h2 id=\"DOM_l\u00e0_g\u00ec?\"><strong>DOM l\u00e0 g\u00ec?<\/strong><\/h2>\n\n\n\n<h3 id=\"\u0110\u1ecbnh_ngh\u0129a_DOM\"><strong>\u0110\u1ecbnh ngh\u0129a DOM<\/strong><\/h3>\n\n\n\n<p>DOM l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a <strong>Document Object Model<\/strong>, t\u1ea1m d\u1ecbch: <strong>M\u00f4 h\u00ecnh \u0110\u1ed1i t\u01b0\u1ee3ng T\u00e0i li\u1ec7u, <\/strong>\u0111\u00e2y l\u00e0 m\u1ed9t l\u00e0 m\u1ed9t API l\u1eadp tr\u00ecnh cho c\u00e1c t\u00e0i li\u1ec7u HTML v\u00e0 XML. DOM x\u00e1c \u0111\u1ecbnh c\u1ea5u tr\u00fac logic c\u1ee7a c\u00e1c t\u00e0i li\u1ec7u v\u00e0 c\u00e1ch m\u1ed9t t\u00e0i li\u1ec7u \u0111\u01b0\u1ee3c truy c\u1eadp v\u00e0 thao t\u00e1c.<\/p>\n\n\n\n<p>V\u1edbi DOM, c\u00e1c l\u1eadp tr\u00ecnh vi\u00ean \u0111\u01b0\u1ee3c ph\u00e9p t\u1ea1o v\u00e0 x\u00e2y d\u1ef1ng t\u00e0i li\u1ec7u, \u0111i\u1ec1u h\u01b0\u1edbng c\u1ea5u tr\u00fac c\u1ee7a ch\u00fang, \u0111\u1ed3ng th\u1eddi c\u00f3 th\u1ec3 th\u00eam, s\u1eeda \u0111\u1ed5i ho\u1eb7c x\u00f3a c\u00e1c ph\u1ea7n t\u1eed v\u00e0 n\u1ed9i dung. Hi\u1ec3u \u0111\u01a1n gi\u1ea3n, b\u1ea5t k\u1ef3 th\u1ee9 g\u00ec \u0111\u01b0\u1ee3c t\u00ecm th\u1ea5y trong t\u00e0i li\u1ec7u HTML ho\u1eb7c <a href=\"https:\/\/tino.vn\/blog\/xml-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">XML<\/a> \u0111\u1ec1u c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c truy c\u1eadp, thay \u0111\u1ed5i, x\u00f3a ho\u1eb7c th\u00eam b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng DOM.<\/p>\n\n\n\n<p>Trang web l\u00e0 m\u1ed9t lo\u1ea1i t\u00e0i li\u1ec7u. T\u00e0i li\u1ec7u n\u00e0y c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb trong c\u1eeda s\u1ed5 tr\u00ecnh duy\u1ec7t ho\u1eb7c d\u01b0\u1edbi d\u1ea1ng ngu\u1ed3n HTML. DOM l\u00e0 m\u1ed9t \u0111\u1ea1i di\u1ec7n h\u01b0\u1edbng \u0111\u1ed1i t\u01b0\u1ee3ng c\u1ee7a trang web, c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eeda \u0111\u1ed5i b\u1eb1ng ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh nh\u01b0 JavaScript.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1302.png\" alt=\"DOM-la-gi\" class=\"wp-image-28393\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1302.png 700w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1302-300x161.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<p>C\u00e1c ti\u00eau chu\u1ea9n DOM W3C v\u00e0 WHATWG DOM \u0111\u01b0\u1ee3c tri\u1ec3n khai trong h\u1ea7u h\u1ebft c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i.<\/p>\n\n\n\n<h3 id=\"DOM_v\u00e0_JavaScript\"><strong>DOM v\u00e0 JavaScript<\/strong><\/h3>\n\n\n\n<h4 id=\"M\u1ed1i_quan_h\u1ec7_gi\u1eefa_DOM_v\u00e0_JavaScript\"><strong>M\u1ed1i quan h\u1ec7 gi\u1eefa DOM v\u00e0 JavaScript<\/strong><\/h4>\n\n\n\n<p>DOM kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh, nh\u01b0ng n\u1ebfu kh\u00f4ng c\u00f3 API n\u00e0y, ng\u00f4n ng\u1eef JavaScript s\u1ebd kh\u00f4ng c\u00f3 b\u1ea5t k\u1ef3 m\u00f4 h\u00ecnh ho\u1eb7c kh\u00e1i ni\u1ec7m n\u00e0o v\u1ec1 c\u00e1c trang web, t\u00e0i li\u1ec7u HTML, t\u00e0i li\u1ec7u XML v\u00e0 c\u00e1c ph\u1ea7n th\u00e0nh ph\u1ea7n c\u1ee7a ch\u00fang (v\u00ed d\u1ee5: c\u00e1c ph\u1ea7n t\u1eed). M\u1ecdi ph\u1ea7n t\u1eed trong t\u00e0i li\u1ec7u l\u00e0 m\u1ed9t ph\u1ea7n c\u1ee7a DOM cho t\u00e0i li\u1ec7u \u0111\u00f3, v\u00ec v\u1eady t\u1ea5t c\u1ea3 ch\u00fang \u0111\u1ec1u c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c truy c\u1eadp v\u00e0 thao t\u00e1c b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng DOM v\u00e0 m\u1ed9t ng\u00f4n ng\u1eef nh\u01b0 JavaScript.<\/p>\n\n\n\n<p>V\u1edbi DOM, JavaScript s\u1ebd th\u1ec3 hi\u1ec7n \u0111\u01b0\u1ee3c t\u1ea5t c\u1ea3 c\u00e1c t\u00ednh n\u0103ng c\u1ea7n thi\u1ebft \u0111\u1ec3 t\u1ea1o ra HTML \u0111\u1ed9ng nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>C\u00f3 th\u1ec3 thay \u0111\u1ed5i h\u1ea7u h\u1ebft c\u00e1c ph\u1ea7n t\u1eed HTML v\u00e0 thu\u1ed9c t\u00ednh c\u1ee7a ch\u00fang trong trang<\/li><li>C\u00f3 th\u1ec3 thay \u0111\u1ed5i t\u1ea5t c\u1ea3 c\u00e1c style CSS trong trang<\/li><li>C\u00f3 th\u1ec3 lo\u1ea1i b\u1ecf c\u00e1c y\u1ebfu t\u1ed1 HTML c\u0169ng nh\u01b0 thu\u1ed9c t\u00ednh c\u1ee7a ch\u00fang \u1edf hi\u1ec7n t\u1ea1i<\/li><li>C\u00f3 th\u1ec3 ph\u1ea3n \u1ee9ng v\u1edbi t\u1ea5t c\u1ea3 c\u00e1c s\u1ef1 ki\u1ec7n HTML hi\u1ec7n c\u00f3 trong trang v\u00e0 \u0111\u1ed3ng th\u1eddi t\u1ea1o ra c\u00e1c s\u1ef1 ki\u1ec7n HTML m\u1edbi<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1303.png\" alt=\"DOM-la-gi\" class=\"wp-image-28395\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1303.png 700w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1303-300x161.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<h3 id=\"C\u00e1c_lo\u1ea1i_DOM_n\u00e0o_c\u00f3_trong_JavaScript?\"><strong>C\u00e1c lo\u1ea1i DOM n\u00e0o c\u00f3 trong JavaScript?<\/strong><\/h3>\n\n\n\n<p>Vi\u1ec7c JavaScript x\u1eed l\u00fd v\u00e0 l\u00e0m vi\u1ec7c v\u1edbi c\u00e1c ph\u1ea7n t\u1eed HTML t\u01b0\u01a1ng \u0111\u1ed1i ph\u1ee9c t\u1ea1p v\u00e0 \u0111a d\u1ea1ng. Do \u0111\u00f3, x\u00e9t v\u1ec1 t\u00ednh ch\u1ea5t, DOM \u0111\u01b0\u1ee3c chia l\u00e0m 8 lo\u1ea1i kh\u00e1c nhau g\u1ed3m:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>DOM document:<\/strong> c\u00f3 vai tr\u00f2 l\u01b0u tr\u1eef t\u1ea5t c\u1ea3 c\u00e1c th\u00e0nh ph\u1ea7n trong t\u00e0i li\u1ec7u c\u1ee7a trang web<\/li><li><strong>DOM element:<\/strong> c\u00f3 nhi\u1ec7m v\u1ee5 truy xu\u1ea5t t\u1edbi th\u1ebb HTML b\u1ea5t k\u1ef3 th\u00f4ng qua c\u00e1c thu\u1ed9c t\u00ednh nh\u01b0 t\u00ean class, id, name c\u1ee7a th\u1ebb HTML<\/li><li><strong>DOM HTML:<\/strong> c\u00f3 ch\u1ee9c n\u0103ng thay \u0111\u1ed5i gi\u00e1 tr\u1ecb n\u1ed9i dung v\u00e0 gi\u00e1 tr\u1ecb thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c th\u1ebb HTML<\/li><li><strong>DOM CSS:<\/strong> c\u00f3 nhi\u1ec7m v\u1ee5 thay \u0111\u1ed5i nh\u1eefng \u0111\u1ecbnh d\u1ea1ng CSS trong th\u1ebb HTML<\/li><li><strong>DOM Event:<\/strong> d\u00f9ng \u0111\u1ec3 g\u00e1n c\u00e1c s\u1ef1 ki\u1ec7n nh\u01b0 onclick(), onload() v\u00e0o c\u00e1c th\u1ebb HTML<\/li><li><strong>DOM Listener:<\/strong> c\u00f3 ch\u1ee9c n\u0103ng x\u00e1c \u0111\u1ecbnh v\u00e0 theo d\u00f5i c\u00e1c s\u1ef1 ki\u1ec7n t\u00e1c \u0111\u1ed9ng l\u00ean th\u1ebb HTML \u0111\u00f3<\/li><li><strong>DOM Navigation:<\/strong> d\u00f9ng \u0111\u1ec3 qu\u1ea3n l\u00fd v\u00e0 thao t\u00e1c v\u1edbi c\u00e1c th\u1ebb HTML.<\/li><li><strong>DOM Node, Nodelist:<\/strong> c\u00f3 ch\u1ee9c n\u0103ng thao t\u00e1c v\u1edbi HTML th\u00f4ng qua c\u00e1c \u0111\u1ed1i t\u01b0\u1ee3ng (Object)<\/li><\/ul>\n\n\n\n<h2 id=\"C\u1ea5u_tr\u00fac_c\u1ee7a_DOM\"><strong>C\u1ea5u tr\u00fac c\u1ee7a DOM<\/strong><\/h2>\n\n\n\n<h3 id=\"Node\"><strong>Node<\/strong><\/h3>\n\n\n\n<p>Trong DOM, m\u1ecdi th\u00e0nh ph\u1ea7n t\u01b0\u1ee3ng tr\u01b0ng cho 1 n\u00fat (node) v\u00e0 \u0111\u01b0\u1ee3c bi\u1ec3u di\u1ec5n tr\u00ean c\u00f9ng 1 c\u00e2y. C\u00e1c ph\u1ea7n t\u1eed kh\u00e1c nhau s\u1ebd l\u00e0 m\u1ed9t lo\u1ea1i n\u00fat kh\u00e1c nhau, trong \u0111\u00f3 3 lo\u1ea1i quan tr\u1ecdng nh\u1ea5t l\u00e0: n\u00fat g\u1ed1c (document node), n\u00fat ph\u1ea7n t\u1eed (element node), n\u00fat v\u0103n b\u1ea3n (text node).<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Document node:<\/strong> l\u00e0 t\u00e0i li\u1ec7u HTML v\u00e0 \u0111\u01b0\u1ee3c bi\u1ec3u di\u1ec5n b\u1edfi th\u1ebb &lt;html&gt;.<\/li><li><strong>Element node:<\/strong> \u0111\u1ea1i di\u1ec7n cho 1 ph\u1ea7n t\u1eed HTML.<\/li><li><strong>Text node:<\/strong> m\u1ed7i \u0111o\u1ea1n k\u00fd t\u1ef1 trong t\u00e0i li\u1ec7u HTML, b\u00ean trong 1 th\u1ebb HTML \u0111\u1ec1u \u0111\u01b0\u1ee3c xem l\u00e0 1 n\u00fat v\u0103n b\u1ea3n. Ch\u00fang c\u00f3 th\u1ec3 l\u00e0 t\u00ean trang web trong th\u1ebb &lt;title&gt;, t\u00ean \u0111\u1ec1 m\u1ee5c trong th\u1ebb &lt;h1&gt; ho\u1eb7c m\u1ed9t \u0111o\u1ea1n v\u0103n trong th\u1ebb &lt;p&gt;.<\/li><\/ul>\n\n\n\n<h3 id=\"M\u1ed1i_quan_h\u1ec7_gi\u1eefa_c\u00e1c_n\u00fat\"><strong>M\u1ed1i quan h\u1ec7 gi\u1eefa c\u00e1c n\u00fat<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>N\u00fat g\u1ed1c lu\u00f4n l\u00e0 n\u00fat \u0111\u1ea7u ti\u00ean v\u00e0 \u1edf tr\u00ean c\u00f9ng trong s\u01a1 \u0111\u1ed3 c\u00e2y.<\/li><li>T\u1ea5t c\u1ea3 c\u00e1c n\u00fat kh\u00e1c kh\u00f4ng ph\u1ea3i l\u00e0 n\u00fat g\u1ed1c \u0111\u1ec1u ch\u1ec9 c\u00f3 1 n\u00fat cha duy nh\u1ea5t<\/li><li>M\u1ed9t n\u00fat c\u00f3 th\u1ec3 ch\u1ee9a m\u1ed9t ho\u1eb7c nhi\u1ec1u con b\u00ean d\u01b0\u1edbi, nh\u01b0ng c\u0169ng c\u00f3 th\u1ec3 kh\u00f4ng c\u00f3 con n\u00e0o.<\/li><li>Nh\u1eefng n\u00fat \u0111\u01b0\u1ee3c t\u1ea1o ra t\u1eeb c\u00f9ng n\u00fat cha \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 c\u00e1c n\u00fat anh em (siblings).<\/li><li>Trong c\u00e1c n\u00fat anh em, c\u00f3 th\u1ec3 g\u1ecdi n\u00fat \u0111\u1ea7u ti\u00ean \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 con c\u1ea3 (firstChild) v\u00e0 xem n\u00fat cu\u1ed1i c\u00f9ng l\u00e0 con \u00fat (lastChild).<\/li><\/ul>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 quan s\u00e1t h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y \u0111\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 DOM.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1304.png\" alt=\"DOM-la-gi\" class=\"wp-image-28397\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1304.png 700w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1304-300x161.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<p>Nh\u01b0 \u0111\u00e3 th\u1ea5y trong h\u00ecnh, t\u1ea5t c\u1ea3 c\u00e1c th\u1ebb HTML s\u1ebd xu\u1ea5t ph\u00e1t t\u1eeb m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng Document, th\u1ebb \u1edf v\u1ecb tr\u00ed cao nh\u1ea5t l\u00e0 th\u1ebb html, k\u1ebf ti\u1ebfp l\u00e0 c\u00e1c ph\u00e2n nh\u00e1nh body v\u00e0 head. D\u01b0\u1edbi th\u1ebb head s\u1ebd c\u00f3 nh\u1eefng th\u1ebb nh\u01b0 style, title, &#8230; v\u00e0 b\u00ean d\u01b0\u1edbi th\u1ebb body th\u00ec l\u00e0 v\u00f4 s\u1ed1 c\u00e1c th\u1ebb HTML kh\u00e1c.<\/p>\n\n\n\n<p>Nh\u01b0 v\u1eady, n\u1ebfu JavaScript mu\u1ed1n truy xu\u1ea5t \u0111\u1ebfn m\u1ed9t th\u1ebb HTML b\u1ea5t k\u1ef3 th\u00ec ph\u1ea3i th\u00f4ng qua \u0111\u1ed1i t\u01b0\u1ee3ng Document \u0111\u01b0\u1ee3c l\u01b0u tr\u1eef trong m\u1ed9t bi\u1ebfn to\u00e0n c\u1ee5c t\u00ean l\u00e0 document.<\/p>\n\n\n\n<h2 id=\"C\u00e1ch_truy_xu\u1ea5t_DOM\"><strong>C\u00e1ch truy xu\u1ea5t DOM<\/strong><\/h2>\n\n\n\n<h3 id=\"Truy_xu\u1ea5t_gi\u00e1n_ti\u1ebfp\"><strong>Truy xu\u1ea5t gi\u00e1n ti\u1ebfp<\/strong><\/h3>\n\n\n\n<p>M\u1ed7i m\u1ed9t n\u00fat tr\u00ean s\u01a1 \u0111\u1ed3 DOM \u0111\u1ec1u c\u00f3 6 thu\u1ed9c t\u00ednh quan h\u1ec7 gi\u00fap b\u1ea1n truy xu\u1ea5t gi\u00e1n ti\u1ebfp theo v\u1ecb tr\u00ed c\u1ee7a n\u00fat:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Node.parentNode:<\/strong> cho ph\u00e9p tham chi\u1ebfu \u0111\u1ebfn n\u00fat cha c\u1ee7a n\u00fat hi\u1ec7n t\u1ea1i. Do \u0111\u00f3, n\u1ebfu b\u1ea1n c\u1ea7n t\u00ecm ngu\u1ed3n g\u1ed1c xa h\u01a1n n\u1eefa c\u1ee7a 1 n\u00fat, b\u1ea1n ph\u1ea3i n\u1ed1i thu\u1ed9c t\u00ecnh n\u00e0y nhi\u1ec1u l\u1ea7n. V\u00ed d\u1ee5 Node.parentNode.parentNode.<\/li><li><strong>Node.childNodes:<\/strong> cho ph\u00e9p tham chi\u1ebfu \u0111\u1ebfn c\u00e1c n\u00fat con tr\u1ef1c ti\u1ebfp c\u1ee7a n\u00fat hi\u1ec7n t\u1ea1i. C\u00e1c n\u00fat con s\u1ebd kh\u00f4ng b\u1ecb ph\u00e2n bi\u1ec7t b\u1edfi lo\u1ea1i n\u00fat, n\u00ean k\u1ebft qu\u1ea3 m\u1ea3ng tr\u1ea3 v\u1ec1 c\u00f3 th\u1ec3 s\u1ebd g\u1ed3m nhi\u1ec1u lo\u1ea1i n\u00fat kh\u00e1c nhau.<\/li><li><strong>Node.firstChild:<\/strong> cho ph\u00e9p tham chi\u1ebfu \u0111\u1ebfn n\u00fat con \u0111\u1ea7u ti\u00ean c\u1ee7a n\u00fat hi\u1ec7n t\u1ea1i. V\u00ed d\u1ee5: Node.childNodes[0].<\/li><li><strong>Node.lastChild:<\/strong> cho ph\u00e9p tham chi\u1ebfu \u0111\u1ebfn n\u00fat con cu\u1ed1i c\u00f9ng c\u1ee7a n\u00fat hi\u1ec7n t\u1ea1i. V\u00ed d\u1ee5: Node.childNodes[Element.childNodes.length-1].<\/li><li><strong>Node.nextSibling<\/strong>: cho ph\u00e9p tham chi\u1ebfu \u0111\u1ebfn c\u00e1c n\u00fat anh em n\u1eb1m sau n\u00fat hi\u1ec7n t\u1ea1i.<\/li><li><strong>Node.previousSibling:<\/strong> cho ph\u00e9p tham chi\u1ebfu \u0111\u1ebfn n\u00fat anh em n\u1eb1m tr\u01b0\u1edbc n\u00fat hi\u1ec7n t\u1ea1i.<\/li><\/ul>\n\n\n\n<h3 id=\"Truy_xu\u1ea5t_tr\u1ef1c_ti\u1ebfp\"><strong>Truy xu\u1ea5t tr\u1ef1c ti\u1ebfp<\/strong><\/h3>\n\n\n\n<p>C\u00e1ch truy xu\u1ea5t n\u00e0y s\u1ebd nhanh h\u01a1n v\u00e0 \u0111\u01a1n gi\u1ea3n h\u01a1n khi b\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i quan h\u1ec7 v\u00e0 v\u1ecb tr\u00ed c\u1ee7a n\u00fat. \u0110\u1ec3 truy xu\u1ea5t tr\u1ef1c ti\u1ebfp, b\u1ea1n h\u00e3y d\u00f9ng 1 trong 3 c\u00e1ch sau:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>document.getElementById(&#8216;id_c\u1ea7n_t\u00ecm&#8217;)<\/li><li>document.getElementsByTagName(&#8216;div&#8217;)<\/li><li>document.getElementsByName(&#8216;t\u00ean_c\u1ea7n_t\u00ecm&#8217;)<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1305.png\" alt=\"DOM-la-gi\" class=\"wp-image-28399\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1305.png 700w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1305-300x161.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<h2 id=\"H\u01b0\u1edbng_d\u1eabn_c\u00e1ch_t\u1ea1o_m\u1edbi,_th\u00eam,_xo\u00e1_v\u00e0_thay_th\u1ebf_ph\u1ea7n_t\u1eed_HTML_b\u1eb1ng_JavaScript\"><strong>H\u01b0\u1edbng d\u1eabn c\u00e1ch t\u1ea1o m\u1edbi, th\u00eam, xo\u00e1 v\u00e0 thay th\u1ebf ph\u1ea7n t\u1eed HTML b\u1eb1ng JavaScript<\/strong><\/h2>\n\n\n\n<h3 id=\"C\u00e1ch_t\u1ea1o_m\u1ed9t_ph\u1ea7n_t\u1eed_HTML\"><strong>C\u00e1ch t\u1ea1o m\u1ed9t ph\u1ea7n t\u1eed HTML<\/strong><\/h3>\n\n\n\n<p>Ch\u00fang ta c\u00f3 th\u1ec3 t\u1ea1o m\u1edbi 1 ph\u1ea7n t\u1eed HTML b\u1eb1ng c\u00e1c c\u00e1ch sau:<\/p>\n\n\n\n<p><strong>document.createElement(tag_name):<\/strong> D\u00f9ng \u0111\u1ec3 t\u1ea1o ra ph\u1ea7n t\u1eed c\u00f3 th\u1ebb tag_name nh\u01b0 a, p, div,&#8230;<\/p>\n\n\n\n<p><strong>element.cloneNode():<\/strong> D\u00f9ng \u0111\u1ec3 t\u1ea1o ra 1 ph\u1ea7n t\u1eed b\u1eb1ng c\u00e1ch nh\u00e2n b\u1ea3n ph\u1ea7n t\u1eed \u0111\u00f3<\/p>\n\n\n\n<p><strong>document.createTextNode(text):<\/strong> D\u00f9ng \u0111\u1ec3 t\u1ea1o ra 1 n\u00fat v\u0103n b\u1ea3n<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1306.png\" alt=\"DOM-la-gi\" class=\"wp-image-28401\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1306.png 700w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1306-300x161.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<h3 id=\"X\u00f3a_ph\u1ea7n_t\u1eed_HTML\"><strong>X\u00f3a ph\u1ea7n t\u1eed HTML<\/strong><\/h3>\n\n\n\n<p>\u0110\u1ec3 lo\u1ea1i b\u1ecf m\u1ed9t ph\u1ea7n t\u1eed HTML, b\u1ea1n ph\u1ea3i ch\u1ecdn ph\u1ea7n t\u1eed cha r\u1ed3i m\u1edbi s\u1eed d\u1ee5ng ph\u01b0\u01a1ng th\u1ee9c removeChild(node)<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"demo\">\r\n\r\n&lt;p id=\"p1\">This is a paragraph.&lt;\/p>\r\n\r\n&lt;p id=\"p2\">This is another paragraph.&lt;\/p>\r\n\r\n&lt;\/div>\r\n\r\n&lt;script>\r\n\r\nvar parent = document.getElementById(\"demo\");\r\n\r\nvar child = document.getElementById(\"p1\");\r\n\r\nparent.removeChild(child);\r\n\r\n&lt;\/script><\/code><\/pre>\n\n\n\n<p>Ho\u1eb7c b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng th\u1ee7 thu\u1eadt l\u1ea5y thu\u1ed9c t\u00ednh parentNode \u0111\u1ec3 b\u1ecf qua b\u01b0\u1edbc t\u00ecm ph\u1ea7n t\u1eed cha trong DOM: child.parentNode.removeChild(child);<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"demo\">\r\n\r\n&lt;p id=\"p1\">This is a paragraph.&lt;\/p>\r\n\r\n&lt;p id=\"p2\">This is another paragraph.&lt;\/p>\r\n\r\n&lt;\/div>\r\n\r\n&lt;script>\r\n\r\nvar child = document.getElementById(\"p1\");\r\n\r\nchild.parentNode.removeChild(child);\r\n\r\n&lt;\/script><\/code><\/pre>\n\n\n\n<h3 id=\"Thay_th\u1ebf_ph\u1ea7n_t\u1eed_HTML\"><strong>Thay th\u1ebf ph\u1ea7n t\u1eed HTML<\/strong><\/h3>\n\n\n\n<p>\u0110\u1ec3 thay th\u1ec3 m\u1ed9t ph\u1ea7n HTML t\u1eed b\u1eb1ng m\u1ed9t ph\u1ea7n t\u1eed HTML kh\u00e1c, b\u1ea1n h\u00e3y d\u00f9ng c\u00fa ph\u00e1p element.replaceChild(newNode, oldNode). Trong \u0111\u00f3 element s\u1ebd l\u00e0 n\u00fat cha<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"demo\">\r\n\r\n&lt;p id=\"p1\">This is a paragraph.&lt;\/p>\r\n\r\n&lt;p id=\"p2\">This is another paragraph.&lt;\/p>\r\n\r\n&lt;\/div>\r\n\r\n&lt;script>\r\n\r\nvar p = document.createElement(\"p\");\r\n\r\np.innerText = 'New Text';\r\n\r\nvar parent = document.getElementById(\"demo\");\r\n\r\nvar child = document.getElementById(\"p1\");\r\n\r\nparent.replaceChild(p, child);\r\n\r\n&lt;\/script><\/code><\/pre>\n\n\n\n<p>Khi b\u01b0\u1edbc ch\u00e2n v\u00e0o l\u0129nh v\u1ef1c l\u1eadp tr\u00ecnh, DOM l\u00e0 m\u1ed9t kh\u00e1i ni\u1ec7m c\u01a1 b\u1ea3n m\u00e0 b\u1ea1n b\u1eaft bu\u1ed9c ph\u1ea3i n\u1eafm r\u00f5. B\u00e0i vi\u1ebft tr\u00ean c\u0169ng kh\u00e1i qu\u00e1t m\u1ed9t s\u1ed1 th\u00f4ng tin li\u00ean quan \u0111\u1ebfn DOM. Ch\u00fac b\u1ea1n c\u00f3 th\u1ec3 thao t\u00e1c v\u1edbi DOM th\u1eadt hi\u1ec7u qu\u1ea3 nh\u00e9!<\/p>\n\n\n\n<h2 id=\"FAQs_v\u1ec1_DOM\"><strong>FAQs v\u1ec1 DOM<\/strong><\/h2>\n\n\n\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"HTML_DOM_kh\u00e1c_g\u00ec_v\u1edbi_DOM?\">HTML DOM kh\u00e1c g\u00ec v\u1edbi DOM?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p>DOM \u0111\u01b0\u1ee3c chia th\u00e0nh nhi\u1ec1u lo\u1ea1i, trong \u0111\u00f3, HTML DOM l\u00e0 m\u1ed9t c\u00e1ch g\u1ecdi kh\u00e1c c\u1ee7a DOM trong Javascript, lo\u1ea1i DOM n\u00e0y \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 truy xu\u1ea5t \u0111\u1ebfn c\u00e1c th\u1ebb HTML v\u00e0 thay \u0111\u1ed5i d\u1eef li\u1ec7u cho th\u1ebb HTML \u0111\u00f3.<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"DOM_implementation_l\u00e0_g\u00ec?\">DOM implementation l\u00e0 g\u00ec?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p>DOM implementation (c\u00f2n \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 tri\u1ec3n khai m\u00e1y ch\u1ee7 l\u01b0u tr\u1eef) l\u00e0 m\u1ed9t ph\u1ea7n m\u1ec1m l\u1ea5y t\u00e0i li\u1ec7u XML ho\u1eb7c HTML \u0111\u00e3 \u0111\u01b0\u1ee3c ph\u00e2n t\u00edch c\u00fa ph\u00e1p v\u00e0 c\u00f3 s\u1eb5n \u0111\u1ec3 x\u1eed l\u00fd qua c\u00e1c giao di\u1ec7n DOM. V\u00ed d\u1ee5: m\u1ed9t tr\u00ecnh duy\u1ec7t ch\u1ee9a m\u1ed9t tri\u1ec3n khai l\u01b0u tr\u1eef.<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"C\u00f3_ph\u1ea3i_DOM_ch\u1ec9_d\u00f9ng_cho_JavaScript?\">C\u00f3 ph\u1ea3i DOM ch\u1ec9 d\u00f9ng cho JavaScript?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p>\u0110i\u1ec1u n\u00e0y s\u1ebd ph\u1ee5 thu\u1ed9c v\u00e0o vi\u1ec7c tri\u1ec3n khai l\u01b0u tr\u1eef m\u00e0 b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng DOM v\u1edbi ng\u00f4n ng\u1eef JavaScript, VBScript, Scheme, Java, C++ , Perl v\u00e0 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Python_(programming_language)\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Python<\/a>.<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"T\u00f4i_c\u00f3_th\u1ec3_\u0111\u0103ng_nh\u1eefng_c\u00e2u_h\u1ecfi_v\u1ec1_DOM_\u1edf_\u0111\u00e2u?\">T\u00f4i c\u00f3 th\u1ec3 \u0111\u0103ng nh\u1eefng c\u00e2u h\u1ecfi v\u1ec1 DOM \u1edf \u0111\u00e2u?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p>M\u1eb7c d\u00f9 c\u00e1c c\u00e2u h\u1ecfi v\u1ec1 DOM c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111\u0103ng tr\u00ean c\u00e1c di\u1ec5n \u0111\u00e0n kh\u00e1c, nh\u01b0ng t\u1ed1t nh\u1ea5t b\u1ea1n n\u00ean \u0111\u0103ng ch\u00fang v\u00e0o danh s\u00e1ch g\u1eedi th\u01b0 chung t\u1ea1i www-dom@w3.org.<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\n<script type=\"application\/ld+json\">\n\t{\n\t\t\"@context\": \"https:\/\/schema.org\",\n\t\t\"@type\": \"FAQPage\",\n\t\t\"mainEntity\": [\n\t\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"HTML DOM kh\u00e1c g\u00ec v\u1edbi DOM?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>DOM \u0111\u01b0\u1ee3c chia th\u00e0nh nhi\u1ec1u lo\u1ea1i, trong \u0111\u00f3, HTML DOM l\u00e0 m\u1ed9t c\u00e1ch g\u1ecdi kh\u00e1c c\u1ee7a DOM trong Javascript, lo\u1ea1i DOM n\u00e0y \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 truy xu\u1ea5t \u0111\u1ebfn c\u00e1c th\u1ebb HTML v\u00e0 thay \u0111\u1ed5i d\u1eef li\u1ec7u cho th\u1ebb HTML \u0111\u00f3.<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t,\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"DOM implementation l\u00e0 g\u00ec?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>DOM implementation (c\u00f2n \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 tri\u1ec3n khai m\u00e1y ch\u1ee7 l\u01b0u tr\u1eef) l\u00e0 m\u1ed9t ph\u1ea7n m\u1ec1m l\u1ea5y t\u00e0i li\u1ec7u XML ho\u1eb7c HTML \u0111\u00e3 \u0111\u01b0\u1ee3c ph\u00e2n t\u00edch c\u00fa ph\u00e1p v\u00e0 c\u00f3 s\u1eb5n \u0111\u1ec3 x\u1eed l\u00fd qua c\u00e1c giao di\u1ec7n DOM. V\u00ed d\u1ee5: m\u1ed9t tr\u00ecnh duy\u1ec7t ch\u1ee9a m\u1ed9t tri\u1ec3n khai l\u01b0u tr\u1eef.<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t,\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"C\u00f3 ph\u1ea3i DOM ch\u1ec9 d\u00f9ng cho JavaScript?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>\u0110i\u1ec1u n\u00e0y s\u1ebd ph\u1ee5 thu\u1ed9c v\u00e0o vi\u1ec7c tri\u1ec3n khai l\u01b0u tr\u1eef m\u00e0 b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng DOM v\u1edbi ng\u00f4n ng\u1eef JavaScript, VBScript, Scheme, Java, C++ , Perl v\u00e0 <a>Python<\/a>.<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t,\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"T\u00f4i c\u00f3 th\u1ec3 \u0111\u0103ng nh\u1eefng c\u00e2u h\u1ecfi v\u1ec1 DOM \u1edf \u0111\u00e2u?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>M\u1eb7c d\u00f9 c\u00e1c c\u00e2u h\u1ecfi v\u1ec1 DOM c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111\u0103ng tr\u00ean c\u00e1c di\u1ec5n \u0111\u00e0n kh\u00e1c, nh\u01b0ng t\u1ed1t nh\u1ea5t b\u1ea1n n\u00ean \u0111\u0103ng ch\u00fang v\u00e0o danh s\u00e1ch g\u1eedi th\u01b0 chung t\u1ea1i www-dom@w3.org.<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t\t\t\t]\n\t}\n<\/script>\n\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScrpit l\u00e0 m\u1ed9t ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh c\u00f3 nhi\u1ec1u ch\u1ee9c n\u0103ng, trong \u0111\u00f3 bao g\u1ed3m vi\u1ec7c thao t\u00e1c v\u1edbi c\u00e1c t\u00e0i li\u1ec7u HTML. Tuy nhi\u00ean, \u0111\u1ec3 JavaScript l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u n\u00e0y ph\u1ea3i th\u00f4ng qua m\u1ed9t c\u01a1 ch\u1ebf g\u1ecdi l\u00e0 DOM. V\u1eady DOM l\u00e0 g\u00ec? DOM v\u00e0 JavaScript c\u00f3 m\u1ed1i quan h\u1ec7 nh\u01b0 th\u1ebf n\u00e0o? C\u00e1c [&hellip;]<\/p>\n","protected":false},"author":23,"featured_media":28390,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5404],"tags":[6187],"class_list":["post-28385","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webmasters","tag-ho-tro-developer"],"_links":{"self":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/posts\/28385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/comments?post=28385"}],"version-history":[{"count":0,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/posts\/28385\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/media\/28390"}],"wp:attachment":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/media?parent=28385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/categories?post=28385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/tags?post=28385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}