{"id":100388,"date":"2025-03-06T23:44:47","date_gmt":"2025-03-06T20:14:47","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/"},"modified":"2025-03-06T23:44:47","modified_gmt":"2025-03-06T20:14:47","slug":"web-dev-day-7-javascript-guide-part-2-2neg","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/","title":{"rendered":"\u0648\u0628 Dev Day 7: \u0631\u0627\u0647\u0646\u0645\u0627\u06cc JavaScript \u0642\u0633\u0645\u062a 2"},"content":{"rendered":"<div data-article-id=\"2315665\" id=\"article-body\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/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-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#DOM_%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >DOM \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0686\u06cc\u0633\u062a\u061f<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#1_%D8%AF%D8%B1%DA%A9_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_DOM\" >1. \u062f\u0631\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 DOM<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#2_%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C_%D8%A8%D9%87_DOM_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_JavaScript\" >2. \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 DOM \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#3_%D8%A7%D8%B5%D9%84%D8%A7%D8%AD_DOM_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D9%85%D8%AD%D8%AA%D9%88%D8%A7\" >3. \u0627\u0635\u0644\u0627\u062d DOM (\u062a\u063a\u06cc\u06cc\u0631 \u0645\u062d\u062a\u0648\u0627)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#4_%D8%AF%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%DB%8C_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_DOM\" >4. \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0639\u0646\u0627\u0635\u0631 DOM<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#5_%D8%B1%D8%B3%DB%8C%D8%AF%DA%AF%DB%8C_%D8%A8%D9%87_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7_%D8%AF%D8%B1_DOM\" >5. \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u062f\u0631 DOM<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%AF%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%DB%8C_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7_%D8%AF%D8%B1_JavaScript_DOM\" >\u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u062f\u0631 JavaScript (DOM)<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#1_%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C_%D8%A8%D9%87_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7\" >1. \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#getAttribute\" >getAttribute()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#setAttribute\" >setAttribute()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#hasAttribute\" >hasAttribute()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#removeAttribute\" >removeAttribute()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#2_%DA%A9%D8%A7%D8%B1_%D8%A8%D8%A7_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_%DA%A9%D9%84%D8%A7%D8%B3\" >2. \u06a9\u0627\u0631 \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u06a9\u0644\u0627\u0633<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#classListadd\" >classList.add()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#classListremove\" >classList.remove()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#classListtoggle\" >classList.toggle()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#classListcontains\" >classList.contains()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#3_%DA%A9%D8%A7%D8%B1_%D8%A8%D8%A7_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7-_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7\" >3. \u06a9\u0627\u0631 \u0628\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627-* \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%AF%D8%B1%DB%8C%D8%A7%D9%81%D8%AA_%D8%AF%D8%A7%D8%AF%D9%87-_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7\" >\u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647-* \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D9%85%D8%AC%D9%85%D9%88%D8%B9%D9%87_%D8%AF%D8%A7%D8%AF%D9%87_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C_%D8%A2%D8%B3%D8%A7%D9%86_%D8%AA%D8%B1\" >\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0622\u0633\u0627\u0646 \u062a\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7-_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7\" >\u062a\u0646\u0638\u06cc\u0645 \u062f\u0627\u062f\u0647 \u0647\u0627-* \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#4_%D9%81%D8%B9%D8%A7%D9%84_%DA%A9%D8%B1%D8%AF%D9%86%D8%BA%DB%8C%D8%B1%D9%81%D8%B9%D8%A7%D9%84_%DA%A9%D8%B1%D8%AF%D9%86_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D8%BA%DB%8C%D8%B1%D9%81%D8%B9%D8%A7%D9%84\" >4. \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646\/\u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0639\u0646\u0627\u0635\u0631 (\u0648\u06cc\u0698\u06af\u06cc \u063a\u06cc\u0631\u0641\u0639\u0627\u0644)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%AF%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%DB%8C_%D8%B3%D8%A8%DA%A9_%D9%87%D8%A7_%D8%AF%D8%B1_JavaScript_DOM\" >\u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0633\u0628\u06a9 \u0647\u0627 \u062f\u0631 JavaScript (DOM)<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#1_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%B3%D8%A8%DA%A9_%D9%87%D8%A7%DB%8C_%D8%AF%D8%B1%D9%88%D9%86_%D8%AE%D8%B7%DB%8C\" >1. \u062a\u063a\u06cc\u06cc\u0631 \u0633\u0628\u06a9 \u0647\u0627\u06cc \u062f\u0631\u0648\u0646 \u062e\u0637\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#2_%D8%A7%D8%B5%D9%84%D8%A7%D8%AD_%DA%86%D9%86%D8%AF_%D8%B3%D8%A8%DA%A9_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_csStext\" >2. \u0627\u0635\u0644\u0627\u062d \u0686\u0646\u062f \u0633\u0628\u06a9 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 csStext<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#3_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D9%84%DB%8C%D8%B3%D8%AA_%DA%A9%D9%84%D8%A7%D8%B3_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AF%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%DB%8C_CSS\" >3. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0644\u06cc\u0633\u062a \u06a9\u0644\u0627\u0633 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%DA%A9%D9%84%D8%A7%D8%B3\" >\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06a9\u0644\u0627\u0633<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%AD%D8%B0%D9%81_%DB%8C%DA%A9_%DA%A9%D9%84%D8%A7%D8%B3\" >\u062d\u0630\u0641 \u06cc\u06a9 \u06a9\u0644\u0627\u0633<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%AC%D8%A7%D8%A8%D8%AC%D8%A7%DB%8C%DB%8C_%DB%8C%DA%A9_%DA%A9%D9%84%D8%A7%D8%B3_%D8%B1%D9%88%D8%B4%D9%86%D8%AE%D8%A7%D9%85%D9%88%D8%B4\" >\u062c\u0627\u0628\u062c\u0627\u06cc\u06cc \u06cc\u06a9 \u06a9\u0644\u0627\u0633 (\u0631\u0648\u0634\u0646\/\u062e\u0627\u0645\u0648\u0634)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C_%D8%A7%DB%8C%D9%86%DA%A9%D9%87_%D8%A2%DB%8C%D8%A7_%DB%8C%DA%A9_%D8%B9%D9%86%D8%B5%D8%B1_%D8%AF%D8%A7%D8%B1%D8%A7%DB%8C_%DA%A9%D9%84%D8%A7%D8%B3_%D8%A7%D8%B3%D8%AA\" >\u0628\u0631\u0631\u0633\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u062f\u0627\u0631\u0627\u06cc \u06a9\u0644\u0627\u0633 \u0627\u0633\u062a<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D9%BE%DB%8C%D9%85%D8%A7%DB%8C%D8%B4_%D8%AF%D8%B1_%D8%B5%D9%81%D8%AD%D9%87_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_JavaScript_DOM_Navigation\" >\u067e\u06cc\u0645\u0627\u06cc\u0634 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript (DOM Navigation)<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C_%D8%A8%D9%87_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_%D9%88%D8%A7%D9%84%D8%AF%DB%8C%D9%86_%D8%8C_%E2%80%8B%E2%80%8B%D9%81%D8%B1%D8%B2%D9%86%D8%AF_%D9%88_%D8%AE%D9%88%D8%A7%D9%87%D8%B1_%D9%88_%D8%A8%D8%B1%D8%A7%D8%AF%D8%B1\" >\u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0639\u0646\u0627\u0635\u0631 \u0648\u0627\u0644\u062f\u06cc\u0646 \u060c \u200b\u200b\u0641\u0631\u0632\u0646\u062f \u0648 \u062e\u0648\u0627\u0647\u0631 \u0648 \u0628\u0631\u0627\u062f\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%DA%AF%D8%B1%D9%81%D8%AA%D9%86_%D8%B9%D9%86%D8%B5%D8%B1_%D9%88%D8%A7%D9%84%D8%AF%DB%8C%D9%86_parentNode_%D9%88%D8%A7%D8%AF_parentElement\" >\u06af\u0631\u0641\u062a\u0646 \u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f\u06cc\u0646 (parentNode \u0648\u0627\u062f parentElement)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_%D8%A8%D9%87_%D8%B5%D9%81%D8%AD%D9%87_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_JavaScript_%D8%AF%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%DB%8C_DOM\" >\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0639\u0646\u0627\u0635\u0631 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript (\u062f\u0633\u062a\u06a9\u0627\u0631\u06cc DOM)<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#1_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%88_%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%DB%8C%DA%A9_%D8%B9%D9%86%D8%B5%D8%B1\" >1. \u0627\u06cc\u062c\u0627\u062f \u0648 \u0627\u0641\u0632\u0648\u062f\u0646 \u06cc\u06a9 \u0639\u0646\u0635\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#createElement_%D8%A8%D8%A7_appendChild\" >createElement()  \u0628\u0627 appendChild()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-37\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#2_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%DB%8C%DA%A9_%D8%B9%D9%86%D8%B5%D8%B1_%D8%AF%D8%B1_%D8%AF%D8%A7%D8%AE%D9%84_%DB%8C%DA%A9_%D9%88%D8%A7%D9%84%D8%AF%DB%8C%D9%86_%D8%AE%D8%A7%D8%B5\" >2. \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u0648\u0627\u0644\u062f\u06cc\u0646 \u062e\u0627\u0635<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-38\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#3_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_insertbefore_%D8%AF%D8%B1_%DB%8C%DA%A9_%D9%85%D9%88%D9%82%D8%B9%DB%8C%D8%AA_%D8%AE%D8%A7%D8%B5_%D8%AF%D8%B1%D8%AC_%DA%A9%D9%86%DB%8C%D8%AF\" >3. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 insertbefore () (\u062f\u0631 \u06cc\u06a9 \u0645\u0648\u0642\u0639\u06cc\u062a \u062e\u0627\u0635 \u062f\u0631\u062c \u06a9\u0646\u06cc\u062f)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-39\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%AD%D8%B0%D9%81_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_%D8%A7%D8%B2_%D8%B5%D9%81%D8%AD%D9%87_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_JavaScript_%D8%AF%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%DB%8C_DOM\" >\u062d\u0630\u0641 \u0639\u0646\u0627\u0635\u0631 \u0627\u0632 \u0635\u0641\u062d\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript (\u062f\u0633\u062a\u06a9\u0627\u0631\u06cc DOM)<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-40\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%AD%D8%B0%D9%81_%DB%8C%DA%A9_%D8%B9%D9%86%D8%B5%D8%B1_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_remove\" >\u062d\u0630\u0641 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 remove()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-41\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#2_%D8%A7%D8%B2_%D8%A8%DB%8C%D9%86_%D8%A8%D8%B1%D8%AF%D9%86_%D8%B9%D9%86%D8%B5%D8%B1_%DA%A9%D9%88%D8%AF%DA%A9_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_removeechild\" >2. \u0627\u0632 \u0628\u06cc\u0646 \u0628\u0631\u062f\u0646 \u0639\u0646\u0635\u0631 \u06a9\u0648\u062f\u06a9 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 removeechild ()<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-42\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C_DOM_%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA\" >\u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc DOM \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-43\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#1_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%DB%8C%DA%A9_%D8%B4%D9%86%D9%88%D9%86%D8%AF%D9%87_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_addEventListener\" >1. \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0634\u0646\u0648\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f (addEventListener)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-44\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#onclick_%D9%88%D8%AA_onmouseenter_%D9%88%D9%82%D8%A7%DB%8C%D8%B9_%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA\" >onclick  \u0648\u062a onmouseenter \u0648\u0642\u0627\u06cc\u0639 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-45\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#1_onclick_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%DA%A9%D9%84%DB%8C%DA%A9_%D9%87%D8%A7_%D8%B1%D8%A7_%D8%AA%D8%B4%D8%AE%DB%8C%D8%B5_%D9%85%DB%8C_%D8%AF%D9%87%D8%AF\" >1 onclick \u0631\u0648\u06cc\u062f\u0627\u062f (\u06a9\u0644\u06cc\u06a9 \u0647\u0627 \u0631\u0627 \u062a\u0634\u062e\u06cc\u0635 \u0645\u06cc \u062f\u0647\u062f)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-46\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#2_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_OnMouseenter_Hover_Mouse\" >2. \u0631\u0648\u06cc\u062f\u0627\u062f OnMouseenter (Hover Mouse)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-47\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#addEventListener_%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA\" >addEventListener()  \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-48\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D9%86%D8%AD%D9%88_%D8%A7%D8%B3%D8%A7%D8%B3%DB%8C\" >\u0646\u062d\u0648 \u0627\u0633\u0627\u0633\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-49\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%B4%D9%86%D9%88%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_%D8%AF%D8%B1_JavaScript\" >\u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0631\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 \u062f\u0631 JavaScript<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-50\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#1_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%DB%8C%DA%A9_%D8%B4%D9%86%D9%88%D9%86%D8%AF%D9%87_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_addEventListener-2\" >1. \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0634\u0646\u0648\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f (addEventListener())<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-51\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#this_%D8%AF%D8%B1_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%B4%D9%86%D9%88%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%D8%AF%D8%B1_JavaScript\" >this  \u062f\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u062f\u0631 JavaScript<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-52\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#1_this_%D8%AF%D8%B1_%DB%8C%DA%A9_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF_%D9%85%D9%86%D8%B8%D9%85_%D8%A8%D9%87_%D8%B9%D9%86%D8%B5%D8%B1_%D8%A7%D8%B4%D8%A7%D8%B1%D9%87_%D8%AF%D8%A7%D8%B1%D8%AF\" >1 this \u062f\u0631 \u06cc\u06a9 \u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u0646\u0638\u0645 (\u0628\u0647 \u0639\u0646\u0635\u0631 \u0627\u0634\u0627\u0631\u0647 \u062f\u0627\u0631\u062f)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-53\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C_%D8%B5%D9%81%D8%AD%D9%87_%DA%A9%D9%84%DB%8C%D8%AF_%D8%AF%D8%B1_JavaScript\" >\u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u062f \u062f\u0631 JavaScript<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-54\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#1_%D8%A7%D9%86%D9%88%D8%A7%D8%B9_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C_%D8%B5%D9%81%D8%AD%D9%87_%DA%A9%D9%84%DB%8C%D8%AF\" >1. \u0627\u0646\u0648\u0627\u0639 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-55\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#2_%D8%AA%D8%B4%D8%AE%DB%8C%D8%B5_%D9%85%D8%B7%D8%A8%D9%88%D8%B9%D8%A7%D8%AA_%DA%A9%D9%84%DB%8C%D8%AF_keydown\" >2. \u062a\u0634\u062e\u06cc\u0635 \u0645\u0637\u0628\u0648\u0639\u0627\u062a \u06a9\u0644\u06cc\u062f (keydown)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-56\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C%DB%8C_%D8%B1%D8%A7_%D8%AA%D8%B4%DA%A9%DB%8C%D9%84_%D9%85%DB%8C_%D8%AF%D9%87%D9%86%D8%AF\" >\u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc\u06cc \u0631\u0627 \u062a\u0634\u06a9\u06cc\u0644 \u0645\u06cc \u062f\u0647\u0646\u062f<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-57\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#1_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C_%D9%81%D8%B1%D9%85_%D9%85%D8%B4%D8%AA%D8%B1%DA%A9\" >1. \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0641\u0631\u0645 \u0645\u0634\u062a\u0631\u06a9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-58\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#2_%D8%A7%D8%B2_%D8%A7%D8%B1%D8%B3%D8%A7%D9%84_%D9%81%D8%B1%D9%85_%D9%BE%DB%8C%D8%B4_%D9%81%D8%B1%D8%B6_%D8%AC%D9%84%D9%88%DA%AF%DB%8C%D8%B1%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF_submit_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF\" >2. \u0627\u0632 \u0627\u0631\u0633\u0627\u0644 \u0641\u0631\u0645 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f (submit \u0631\u0648\u06cc\u062f\u0627\u062f)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-59\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%A7%D8%B3%D8%AA%D8%AE%D8%B1%D8%A7%D8%AC_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D9%81%D8%B1%D9%85_%D8%AF%D8%B1_JavaScript\" >\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0641\u0631\u0645 \u062f\u0631 JavaScript<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-60\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#1_%D8%A7%D8%B3%D8%AA%D8%AE%D8%B1%D8%A7%D8%AC_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_querySelector\" >1. \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 querySelector<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-61\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#2_%D8%A7%D8%B3%D8%AA%D8%AE%D8%B1%D8%A7%D8%AC_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1\" >2. \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0639\u0646\u0627\u0635\u0631[]<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-62\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#3_%D8%A7%D8%B3%D8%AA%D8%AE%D8%B1%D8%A7%D8%AC_%DA%A9%D8%A7%D8%AF%D8%B1_%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8_%D9%88_%D9%85%D9%82%D8%A7%D8%AF%DB%8C%D8%B1_%D8%AF%DA%A9%D9%85%D9%87_%D8%B1%D8%A7%D8%AF%DB%8C%D9%88%DB%8C%DB%8C\" >3. \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u06a9\u0627\u062f\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 \u0648 \u0645\u0642\u0627\u062f\u06cc\u0631 \u062f\u06a9\u0645\u0647 \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-63\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#change_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA\" >change  \u0631\u0648\u06cc\u062f\u0627\u062f \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-64\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#1_%D9%86%D8%AD%D9%88_%D8%A7%D8%B3%D8%A7%D8%B3%DB%8C\" >1. \u0646\u062d\u0648 \u0627\u0633\u0627\u0633\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-65\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#input_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA\" >input  \u0631\u0648\u06cc\u062f\u0627\u062f \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-66\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#1_%D9%86%D8%AD%D9%88_%D8%A7%D8%B3%D8%A7%D8%B3%DB%8C-2\" >1. \u0646\u062d\u0648 \u0627\u0633\u0627\u0633\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-67\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D8%AD%D8%A8%D8%A7%D8%A8_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%AF%D8%B1_JavaScript\" >\u062d\u0628\u0627\u0628 \u0631\u0648\u06cc\u062f\u0627\u062f \u062f\u0631 JavaScript<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-68\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#1_%DA%86%DA%AF%D9%88%D9%86%D9%87_%D8%AD%D8%A8%D8%A7%D8%A8_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%DA%A9%D8%A7%D8%B1_%D9%85%DB%8C_%DA%A9%D9%86%D8%AF\" >1. \u0686\u06af\u0648\u0646\u0647 \u062d\u0628\u0627\u0628 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-69\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#2_%D9%85%D8%AA%D9%88%D9%82%D9%81_%DA%A9%D8%B1%D8%AF%D9%86_%D8%AD%D8%A8%D8%A7%D8%A8_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_StopPropagation\" >2. \u0645\u062a\u0648\u0642\u0641 \u06a9\u0631\u062f\u0646 \u062d\u0628\u0627\u0628 \u0631\u0648\u06cc\u062f\u0627\u062f (StopPropagation ())<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-70\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%D9%86%D9%85%D8%A7%DB%8C%D9%86%D8%AF%DA%AF%DB%8C_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA\" >\u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-71\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#1_%DA%86%D8%B1%D8%A7_%D8%A7%D8%B2_%D9%86%D9%85%D8%A7%DB%8C%D9%86%D8%AF%DA%AF%DB%8C_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D9%85%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF%D8%9F\" >1. \u0686\u0631\u0627 \u0627\u0632 \u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u061f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-72\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#%F0%9F%94%B9_%D8%A8%D8%AF%D9%88%D9%86_%D9%87%DB%8C%D8%A6%D8%AA_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%D8%B4%D9%86%D9%88%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%A8%D9%87_%D9%87%D8%B1_%D8%AF%DA%A9%D9%85%D9%87\" >\ud83d\udd39 \u0628\u062f\u0648\u0646 \u0647\u06cc\u0626\u062a \u0631\u0648\u06cc\u062f\u0627\u062f (\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0647 \u0647\u0631 \u062f\u06a9\u0645\u0647)<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-73\" href=\"https:\/\/nabfollower.com\/blog\/web-dev-day-7-javascript-guide-part-2-2neg\/#2_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D9%86%D9%85%D8%A7%DB%8C%D9%86%D8%AF%DA%AF%DB%8C_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF\" >2. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"DOM_%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  DOM \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0686\u06cc\u0633\u062a\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 <strong>\u0645\u062f\u0644 \u0634\u06cc\u0621 \u0633\u0646\u062f (DOM)<\/strong> \u0627\u0633\u062a <strong>\u0631\u0627\u0628\u0637 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc<\/strong> \u06a9\u0647 \u0628\u0647 JavaScript \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f <strong>\u062a\u0639\u0627\u0645\u0644 \u060c \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0648 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627<\/strong>\u0628\u0634\u0631  <\/p>\n<p>\u0627\u06cc\u0646 \u0646\u0645\u0627\u06cc\u0627\u0646\u06af\u0631 \u06cc\u06a9 <strong>\u0633\u0646\u062f HTML \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0631\u062e\u062a<\/strong>\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0647\u0631 \u06a9\u062f\u0627\u0645 <strong>\u0639\u0646\u0635\u0631 HTML \u06cc\u06a9 \u06af\u0631\u0647 \u0627\u0633\u062a<\/strong>\u0628\u0634\u0631<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_%D8%AF%D8%B1%DA%A9_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_DOM\"><\/span>\n<p>  1. \u062f\u0631\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 DOM<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0627\u06cc\u0646 \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f <strong>\u0633\u0646\u062f HTML<\/strong>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\n\n\n    <title>DOM Example<\/title>\n\n\n    \n    <p class=\"text\">This is a paragraph.<\/p>\n\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0686\u06af\u0648\u0646\u0647 DOM \u0627\u06cc\u0646 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>Document\n \u251c\u2500\u2500 html\n \u2502    \u251c\u2500\u2500 head\n \u2502    \u2502    \u251c\u2500\u2500 title\n \u2502    \u251c\u2500\u2500 body\n \u2502         \u251c\u2500\u2500 h1 (id=\"heading\")\n \u2502         \u251c\u2500\u2500 p (class=\"text\")\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"2_%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C_%D8%A8%D9%87_DOM_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_JavaScript\"><\/span>\n<p>  2. \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 DOM \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0627\u0646\u062a\u062e\u0627\u0628 \u0639\u0646\u0627\u0635\u0631 \u062a\u0648\u0633\u0637 \u0634\u0646\u0627\u0633\u0647 (getElementById)<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let heading = document.getElementById(\"heading\");\nconsole.log(heading.textContent);  \n\/\/ Output: \"Hello, DOM!\"\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0646\u062a\u062e\u0627\u0628 \u0639\u0646\u0627\u0635\u0631 \u062a\u0648\u0633\u0637 \u06a9\u0644\u0627\u0633 (getElementsByClassName<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let paragraphs = document.getElementsByClassName(\"text\");\nconsole.log(paragraphs[0].textContent);  \n\/\/ Output: \"This is a paragraph.\"\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0646\u062a\u062e\u0627\u0628 \u0639\u0646\u0627\u0635\u0631 \u0628\u0627 \u0646\u0627\u0645 \u0628\u0631\u0686\u0633\u0628 (getElementsByTagName)<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let allHeadings = document.getElementsByTagName(\"h1\");\nconsole.log(allHeadings[0].textContent);  \n\/\/ Output: \"Hello, DOM!\"\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0631\u0648\u0634 \u0645\u062f\u0631\u0646: \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 queryselector \u0648 queryselectorall<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let heading = document.querySelector(\"#heading\"); \/\/ Selects by ID\nlet paragraph = document.querySelector(\".text\"); \/\/ Selects first element with class\nlet allParagraphs = document.querySelectorAll(\".text\"); \/\/ Selects all elements with class\n\nconsole.log(heading.textContent);  \n\/\/ Output: \"Hello, DOM!\"\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"3_%D8%A7%D8%B5%D9%84%D8%A7%D8%AD_DOM_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D9%85%D8%AD%D8%AA%D9%88%D8%A7\"><\/span>\n<p>  3. \u0627\u0635\u0644\u0627\u062d DOM (\u062a\u063a\u06cc\u06cc\u0631 \u0645\u062d\u062a\u0648\u0627)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u062a\u063a\u06cc\u06cc\u0631 HTML \u062f\u0627\u062e\u0644\u06cc<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>document.getElementById(\"heading\").innerHTML = \"<span style=\"color:red\">Hello, JS!<\/span>\";\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u063a\u06cc\u06cc\u0631 \u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u062a\u0646<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>document.getElementById(\"heading\").textContent = \"Hello, JavaScript!\";\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"4_%D8%AF%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%DB%8C_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_DOM\"><\/span>\n<p>  4. \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0639\u0646\u0627\u0635\u0631 DOM<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u062c\u062f\u06cc\u062f (CreateElement &#038; AppendChild)<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let newPara = document.createElement(\"p\");\nnewPara.textContent = \"This is a new paragraph!\";\ndocument.body.appendChild(newPara);\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062d\u0630\u0641 \u06cc\u06a9 \u0639\u0646\u0635\u0631 (removeechild)<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let element = document.getElementById(\"heading\");\nelement.parentNode.removeChild(element);\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u063a\u06cc\u06cc\u0631 \u0633\u0628\u06a9 \u0647\u0627\u06cc CSS \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>document.getElementById(\"heading\").style.color = \"blue\";\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"5_%D8%B1%D8%B3%DB%8C%D8%AF%DA%AF%DB%8C_%D8%A8%D9%87_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7_%D8%AF%D8%B1_DOM\"><\/span>\n<p>  5. \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u062f\u0631 DOM<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0634\u0646\u0648\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>document.getElementById(\"heading\").addEventListener(\"click\", function() {\n    alert(\"Heading clicked!\");\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062d\u0630\u0641 \u06cc\u06a9 \u0634\u0646\u0648\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>function greet() {\n    console.log(\"Heading clicked!\");\n}\n\nlet heading = document.getElementById(\"heading\");\nheading.addEventListener(\"click\", greet);\nheading.removeEventListener(\"click\", greet);\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%DB%8C_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7_%D8%AF%D8%B1_JavaScript_DOM\"><\/span>\n<p>  \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u062f\u0631 JavaScript (DOM)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>JavaScript \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f <strong>\u0631\u0648\u0634<\/strong> \u0628\u0647 <strong>\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u060c \u0627\u0635\u0644\u0627\u062d \u0648 \u062d\u0630\u0641<\/strong> \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 HTML \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C_%D8%A8%D9%87_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7\"><\/span>\n<p>  1. \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h4><span class=\"ez-toc-section\" id=\"getAttribute\"><\/span>\n<p>  <code>getAttribute()<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0645\u0642\u062f\u0627\u0631 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let link = document.querySelector(\"a\");\nconsole.log(link.getAttribute(\"href\"));  \n\/\/ Output: The URL inside the `href` attribute\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"setAttribute\"><\/span>\n<p>  <code>setAttribute()<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06cc\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let link = document.querySelector(\"a\");\nlink.setAttribute(\"href\", \"https:\/\/example.com\");\nconsole.log(link.getAttribute(\"href\"));  \n\/\/ Output: \"https:\/\/example.com\"\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"hasAttribute\"><\/span>\n<p>  <code>hasAttribute()<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u062e\u0627\u0635 \u0627\u0633\u062a.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let button = document.querySelector(\"button\");\n\nif (button.hasAttribute(\"disabled\")) {\n    console.log(\"Button is disabled\");\n} else {\n    console.log(\"Button is enabled\");\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"removeAttribute\"><\/span>\n<p>  <code>removeAttribute()<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0627 \u0627\u0632 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u062d\u0630\u0641 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let input = document.querySelector(\"input\");\ninput.removeAttribute(\"disabled\");\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"2_%DA%A9%D8%A7%D8%B1_%D8%A8%D8%A7_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_%DA%A9%D9%84%D8%A7%D8%B3\"><\/span>\n<p>  2. \u06a9\u0627\u0631 \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u06a9\u0644\u0627\u0633<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h4><span class=\"ez-toc-section\" id=\"classListadd\"><\/span>\n<p>  <code>classList.add()<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let box = document.querySelector(\".box\");\nbox.classList.add(\"active\");\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"classListremove\"><\/span>\n<p>  <code>classList.remove()<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u06a9\u0644\u0627\u0633 \u0631\u0627 \u062d\u0630\u0641 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>box.classList.remove(\"active\");\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"classListtoggle\"><\/span>\n<p>  <code>classList.toggle()<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0631\u0648\u0634\u0646\/\u062e\u0627\u0645\u0648\u0634 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>box.classList.toggle(\"hidden\");\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"classListcontains\"><\/span>\n<p>  <code>classList.contains()<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0627\u06af\u0631 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u062f\u0627\u0631\u0627\u06cc \u06a9\u0644\u0627\u0633 \u0628\u0627\u0634\u062f \u060c \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>console.log(box.classList.contains(\"hidden\"));  \n\/\/ Output: true or false\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"3_%DA%A9%D8%A7%D8%B1_%D8%A8%D8%A7_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7-_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7\"><\/span>\n<p>  3. \u06a9\u0627\u0631 \u0628\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627-* \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc (\u062f\u0627\u062f\u0647-*) \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0631\u0627 \u062f\u0631 \u0639\u0646\u0627\u0635\u0631 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1%DB%8C%D8%A7%D9%81%D8%AA_%D8%AF%D8%A7%D8%AF%D9%87-_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7\"><\/span>\n<p>  \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647-* \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let button = document.querySelector(\"button\");\nconsole.log(button.getAttribute(\"data-user-id\"));  \n\/\/ Output: User ID stored in `data-user-id`\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D9%85%D8%AC%D9%85%D9%88%D8%B9%D9%87_%D8%AF%D8%A7%D8%AF%D9%87_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C_%D8%A2%D8%B3%D8%A7%D9%86_%D8%AA%D8%B1\"><\/span>\n<p>  \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0622\u0633\u0627\u0646 \u062a\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>console.log(button.dataset.userId);  \n\/\/ Output: User ID stored in `data-user-id`\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7-_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7\"><\/span>\n<p>  \u062a\u0646\u0638\u06cc\u0645 \u062f\u0627\u062f\u0647 \u0647\u0627-* \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>button.dataset.status = \"active\";\nconsole.log(button.dataset.status);  \n\/\/ Output: \"active\"\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"4_%D9%81%D8%B9%D8%A7%D9%84_%DA%A9%D8%B1%D8%AF%D9%86%D8%BA%DB%8C%D8%B1%D9%81%D8%B9%D8%A7%D9%84_%DA%A9%D8%B1%D8%AF%D9%86_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D8%BA%DB%8C%D8%B1%D9%81%D8%B9%D8%A7%D9%84\"><\/span>\n<p>  4. \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646\/\u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0639\u0646\u0627\u0635\u0631 (\u0648\u06cc\u0698\u06af\u06cc \u063a\u06cc\u0631\u0641\u0639\u0627\u0644)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let button = document.querySelector(\"button\");\n\n\/\/ Disable the button\nbutton.setAttribute(\"disabled\", true);\n\n\/\/ Enable the button\nbutton.removeAttribute(\"disabled\");\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%DB%8C_%D8%B3%D8%A8%DA%A9_%D9%87%D8%A7_%D8%AF%D8%B1_JavaScript_DOM\"><\/span>\n<p>  \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0633\u0628\u06a9 \u0647\u0627 \u062f\u0631 JavaScript (DOM)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>JavaScript \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f <strong>\u067e\u0648\u06cc\u0627 \u0633\u0628\u06a9 CSS \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f<\/strong> \u062f\u0631 \u0639\u0646\u0627\u0635\u0631 HTML \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <strong><code>style<\/code>  \u062f\u0627\u0631\u0627\u06cc\u06cc<\/strong> \u06cc\u0627 <strong>\u06a9\u0644\u0627\u0633\u0647\u0627\u06cc CSS<\/strong>\u0628\u0634\u0631<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%B3%D8%A8%DA%A9_%D9%87%D8%A7%DB%8C_%D8%AF%D8%B1%D9%88%D9%86_%D8%AE%D8%B7%DB%8C\"><\/span>\n<p>  1. \u062a\u063a\u06cc\u06cc\u0631 \u0633\u0628\u06a9 \u0647\u0627\u06cc \u062f\u0631\u0648\u0646 \u062e\u0637\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u062f <strong>\u062e\u0648\u0627\u0635 CSS<\/strong> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>.style<\/code> \u062e\u0627\u0635\u06cc\u062a<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let box = document.querySelector(\".box\");\nbox.style.backgroundColor = \"blue\";\nbox.style.color = \"white\";\nbox.style.padding = \"20px\";\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"2_%D8%A7%D8%B5%D9%84%D8%A7%D8%AD_%DA%86%D9%86%D8%AF_%D8%B3%D8%A8%DA%A9_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_csStext\"><\/span>\n<p>  2. \u0627\u0635\u0644\u0627\u062d \u0686\u0646\u062f \u0633\u0628\u06a9 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 csStext<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>box.style.cssText = \"background: red; color: white; padding: 15px;\";\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"3_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D9%84%DB%8C%D8%B3%D8%AA_%DA%A9%D9%84%D8%A7%D8%B3_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AF%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%DB%8C_CSS\"><\/span>\n<p>  3. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0644\u06cc\u0633\u062a \u06a9\u0644\u0627\u0633 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc CSS<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0628\u0647 \u062c\u0627\u06cc \u0627\u0635\u0644\u0627\u062d \u0645\u0633\u062a\u0642\u06cc\u0645 \u0633\u0628\u06a9 \u0647\u0627 \u060c \u0627\u0632 \u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc CSS \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0628\u0647\u062a\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%DA%A9%D9%84%D8%A7%D8%B3\"><\/span>\n<p>  \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06a9\u0644\u0627\u0633<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>box.classList.add(\"highlight\");\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"%D8%AD%D8%B0%D9%81_%DB%8C%DA%A9_%DA%A9%D9%84%D8%A7%D8%B3\"><\/span>\n<p>  \u062d\u0630\u0641 \u06cc\u06a9 \u06a9\u0644\u0627\u0633<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>box.classList.remove(\"highlight\");\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"%D8%AC%D8%A7%D8%A8%D8%AC%D8%A7%DB%8C%DB%8C_%DB%8C%DA%A9_%DA%A9%D9%84%D8%A7%D8%B3_%D8%B1%D9%88%D8%B4%D9%86%D8%AE%D8%A7%D9%85%D9%88%D8%B4\"><\/span>\n<p>  \u062c\u0627\u0628\u062c\u0627\u06cc\u06cc \u06cc\u06a9 \u06a9\u0644\u0627\u0633 (\u0631\u0648\u0634\u0646\/\u062e\u0627\u0645\u0648\u0634)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>box.classList.toggle(\"hidden\");\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C_%D8%A7%DB%8C%D9%86%DA%A9%D9%87_%D8%A2%DB%8C%D8%A7_%DB%8C%DA%A9_%D8%B9%D9%86%D8%B5%D8%B1_%D8%AF%D8%A7%D8%B1%D8%A7%DB%8C_%DA%A9%D9%84%D8%A7%D8%B3_%D8%A7%D8%B3%D8%AA\"><\/span>\n<p>  \u0628\u0631\u0631\u0633\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u062f\u0627\u0631\u0627\u06cc \u06a9\u0644\u0627\u0633 \u0627\u0633\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>console.log(box.classList.contains(\"hidden\"));  \n\/\/ Output: true or false\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%D9%85%D8%A7%DB%8C%D8%B4_%D8%AF%D8%B1_%D8%B5%D9%81%D8%AD%D9%87_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_JavaScript_DOM_Navigation\"><\/span>\n<p>  \u067e\u06cc\u0645\u0627\u06cc\u0634 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript (DOM Navigation)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>JavaScript \u0627\u0646\u0648\u0627\u0639 \u0645\u062e\u062a\u0644\u0641\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f <strong>\u0631\u0648\u0634\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc DOM<\/strong> \u062d\u0631\u06a9\u062a \u0628\u06cc\u0646 <strong>\u0639\u0646\u0627\u0635\u0631 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0648\u0628<\/strong>\u0628\u0634\u0631<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C_%D8%A8%D9%87_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_%D9%88%D8%A7%D9%84%D8%AF%DB%8C%D9%86_%D8%8C_%E2%80%8B%E2%80%8B%D9%81%D8%B1%D8%B2%D9%86%D8%AF_%D9%88_%D8%AE%D9%88%D8%A7%D9%87%D8%B1_%D9%88_%D8%A8%D8%B1%D8%A7%D8%AF%D8%B1\"><\/span>\n<p>  \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0639\u0646\u0627\u0635\u0631 \u0648\u0627\u0644\u062f\u06cc\u0646 \u060c \u200b\u200b\u0641\u0631\u0632\u0646\u062f \u0648 \u062e\u0648\u0627\u0647\u0631 \u0648 \u0628\u0631\u0627\u062f\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h4><span class=\"ez-toc-section\" id=\"%DA%AF%D8%B1%D9%81%D8%AA%D9%86_%D8%B9%D9%86%D8%B5%D8%B1_%D9%88%D8%A7%D9%84%D8%AF%DB%8C%D9%86_parentNode_%D9%88%D8%A7%D8%AF_parentElement\"><\/span>\n<p>  \u06af\u0631\u0641\u062a\u0646 <strong>\u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f\u06cc\u0646<\/strong> (<code>parentNode<\/code> \u0648\u0627\u062f <code>parentElement<\/code>)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let child = document.querySelector(\".child\");\nconsole.log(child.parentNode);   \nconsole.log(child.parentElement);\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>Feature                 Method\nGet Parent Element  parentNode, parentElement\nGet Child Elements  firstElementChild, lastElementChild\nGet Sibling Elements    nextElementSibling, previousElementSibling\nScroll to Section   scrollIntoView()\nRedirect to URL         window.location.href\nReload Page         window.location.reload()\nNavigate History    window.history.back() \/ forward()\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_%D8%A8%D9%87_%D8%B5%D9%81%D8%AD%D9%87_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_JavaScript_%D8%AF%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%DB%8C_DOM\"><\/span>\n<p>  \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0639\u0646\u0627\u0635\u0631 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript (\u062f\u0633\u062a\u06a9\u0627\u0631\u06cc DOM)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>JavaScript \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f <strong>\u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0639\u0646\u0627\u0635\u0631 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/strong> \u0628\u0647 \u0635\u0641\u062d\u0647 \u0648\u0628 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <strong>DOM API<\/strong>\u0628\u0634\u0631<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%88_%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%DB%8C%DA%A9_%D8%B9%D9%86%D8%B5%D8%B1\"><\/span>\n<p>  1. \u0627\u06cc\u062c\u0627\u062f \u0648 \u0627\u0641\u0632\u0648\u062f\u0646 \u06cc\u06a9 \u0639\u0646\u0635\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h4><span class=\"ez-toc-section\" id=\"createElement_%D8%A8%D8%A7_appendChild\"><\/span>\n<p>  <code>createElement()<\/code>  \u0628\u0627 <code>appendChild()<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let newPara = document.createElement(\"p\"); \/\/ Create <p> element\nnewPara.textContent = \"This is a new paragraph!\"; \/\/ Add text\n\ndocument.body.appendChild(newPara); \/\/ Append to body\n<\/p><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"2_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%DB%8C%DA%A9_%D8%B9%D9%86%D8%B5%D8%B1_%D8%AF%D8%B1_%D8%AF%D8%A7%D8%AE%D9%84_%DB%8C%DA%A9_%D9%88%D8%A7%D9%84%D8%AF%DB%8C%D9%86_%D8%AE%D8%A7%D8%B5\"><\/span>\n<p>  2. \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u0648\u0627\u0644\u062f\u06cc\u0646 \u062e\u0627\u0635<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let parentDiv = document.getElementById(\"container\");\n\nlet newDiv = document.createElement(\"div\");\nnewDiv.textContent = \"Hello, this is a new div!\";\nnewDiv.classList.add(\"new-box\");\n\nparentDiv.appendChild(newDiv);\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"3_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_insertbefore_%D8%AF%D8%B1_%DB%8C%DA%A9_%D9%85%D9%88%D9%82%D8%B9%DB%8C%D8%AA_%D8%AE%D8%A7%D8%B5_%D8%AF%D8%B1%D8%AC_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  3. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 insertbefore () (\u062f\u0631 \u06cc\u06a9 \u0645\u0648\u0642\u0639\u06cc\u062a \u062e\u0627\u0635 \u062f\u0631\u062c \u06a9\u0646\u06cc\u062f)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let list = document.getElementById(\"list\");\nlet newItem = document.createElement(\"li\");\nnewItem.textContent = \"New Item\";\n\nlet firstItem = list.firstElementChild; \/\/ Get first item\nlist.insertBefore(newItem, firstItem);  \/\/ Insert before it\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>Feature                        Method\nCreate an Element          createElement(\"tag\")\nAdd Text                   element.textContent = \"Text\"\nAppend to End                  appendChild(element)\nInsert Before                  insertBefore(newElement, referenceElement)\nInsert at Specific Position    insertAdjacentHTML(position, html)\nPrepend Element                prepend(element)\nClone Element                  cloneNode(true)\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AD%D8%B0%D9%81_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_%D8%A7%D8%B2_%D8%B5%D9%81%D8%AD%D9%87_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_JavaScript_%D8%AF%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%DB%8C_DOM\"><\/span>\n<p>  \u062d\u0630\u0641 \u0639\u0646\u0627\u0635\u0631 \u0627\u0632 \u0635\u0641\u062d\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript (\u062f\u0633\u062a\u06a9\u0627\u0631\u06cc DOM)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>JavaScript \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f <strong>\u0639\u0646\u0627\u0635\u0631 \u0631\u0627 \u0628\u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f<\/strong> \u0627\u0632 DOM \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0631\u0648\u0634\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D8%AD%D8%B0%D9%81_%DB%8C%DA%A9_%D8%B9%D9%86%D8%B5%D8%B1_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_remove\"><\/span>\n<p>  \u062d\u0630\u0641 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>remove()<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let element = document.getElementById(\"box\");\nelement.remove();\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"2_%D8%A7%D8%B2_%D8%A8%DB%8C%D9%86_%D8%A8%D8%B1%D8%AF%D9%86_%D8%B9%D9%86%D8%B5%D8%B1_%DA%A9%D9%88%D8%AF%DA%A9_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_removeechild\"><\/span>\n<p>  2. \u0627\u0632 \u0628\u06cc\u0646 \u0628\u0631\u062f\u0646 \u0639\u0646\u0635\u0631 \u06a9\u0648\u062f\u06a9 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 removeechild ()<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let parent = document.getElementById(\"container\");\nlet child = document.getElementById(\"child\");\n\nparent.removeChild(child);\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>Feature                       Method\nRemove an element         element.remove()\nRemove a child                parent.removeChild(child)\nRemove first\/last child       firstElementChild.remove() \/ lastElementChild.remove()\nRemove all children       innerHTML = \"\"\nRemove using parent       parentNode.removeChild(element)\nRemove multiple elements      querySelectorAll().forEach(el =&gt; el.remove())\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C_DOM_%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA\"><\/span>\n<p>  \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc DOM \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>\u0648\u0642\u0627\u06cc\u0639 DOM<\/strong> \u0628\u0647 JavaScript \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0645\u0627\u0646\u0646\u062f <strong>\u06a9\u0644\u06cc\u06a9 \u060c \u0641\u0634\u0627\u0631 \u06a9\u0644\u06cc\u062f\u06cc \u0648 \u062d\u0631\u06a9\u0627\u062a \u0645\u0627\u0648\u0633<\/strong>\u0628\u0634\u0631<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%DB%8C%DA%A9_%D8%B4%D9%86%D9%88%D9%86%D8%AF%D9%87_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_addEventListener\"><\/span>\n<p>  1. \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0634\u0646\u0648\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f (<code>addEventListener<\/code>)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let button = document.getElementById(\"myButton\");\n\nbutton.addEventListener(\"click\", function() {\n    console.log(\"Button clicked!\");\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"onclick_%D9%88%D8%AA_onmouseenter_%D9%88%D9%82%D8%A7%DB%8C%D8%B9_%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA\"><\/span>\n<p>  <code>onclick<\/code>  \u0648\u062a <code>onmouseenter<\/code> \u0648\u0642\u0627\u06cc\u0639 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>JavaScript \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f <strong>\u062f\u0633\u062a\u06af\u06cc\u0631\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f<\/strong> \u0645\u0627\u0646\u0646\u062f <code>onclick<\/code> \u0648\u062a <code>onmouseenter<\/code> \u0628\u0647 <strong>\u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u062a\u0634\u062e\u06cc\u0635 \u062f\u0647\u06cc\u062f<\/strong> \u0645\u0627\u0646\u0646\u062f <strong>\u06a9\u0644\u06cc\u06a9 \u0648 \u062d\u0631\u06a9\u0627\u062a \u0645\u0627\u0648\u0633<\/strong>\u0628\u0634\u0631<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_onclick_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%DA%A9%D9%84%DB%8C%DA%A9_%D9%87%D8%A7_%D8%B1%D8%A7_%D8%AA%D8%B4%D8%AE%DB%8C%D8%B5_%D9%85%DB%8C_%D8%AF%D9%87%D8%AF\"><\/span>\n<p>  1 <code>onclick<\/code> \u0631\u0648\u06cc\u062f\u0627\u062f (\u06a9\u0644\u06cc\u06a9 \u0647\u0627 \u0631\u0627 \u062a\u0634\u062e\u06cc\u0635 \u0645\u06cc \u062f\u0647\u062f)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u062f\u0631 <strong><code>onclick<\/code>  \u0648\u0627\u0642\u0639\u0647<\/strong> \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0627\u0633\u062a \u0622\u062a\u0634 \u0645\u06cc \u06af\u06cc\u0631\u062f <strong>\u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f<\/strong>\u0628\u0634\u0631<\/p>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>onclick<\/code> \u0628\u0627 HTML (Inline)<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code><button onclick=\"alert('Button clicked!')\">Click Me<\/button>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 OnClick \u062f\u0631 JavaScript (\u0631\u0648\u06cc\u06a9\u0631\u062f \u0628\u0647\u062a\u0631)<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let button = document.getElementById(\"myButton\");\n\nbutton.onclick = function() {\n    alert(\"Button clicked!\");\n};\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 addeventlistener (&#8220;\u06a9\u0644\u06cc\u06a9&#8221;) (\u0628\u0647\u062a\u0631\u06cc\u0646 \u062a\u0645\u0631\u06cc\u0646)<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let btn = document.getElementById(\"myButton\");\n\nbtn.addEventListener(\"click\", () =&gt; {\n    alert(\"Button clicked using addEventListener!\");\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"2_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_OnMouseenter_Hover_Mouse\"><\/span>\n<p>  2. \u0631\u0648\u06cc\u062f\u0627\u062f OnMouseenter (Hover Mouse)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0631\u0648\u06cc\u062f\u0627\u062f OnMouseEnter \u0647\u0646\u06af\u0627\u0645 \u0648\u0631\u0648\u062f \u0645\u0648\u0634 \u0628\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0622\u062a\u0634 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644: \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u062f\u0631 \u0634\u0646\u0627\u0648\u0631<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let box = document.getElementById(\"box\");\n\nbox.onmouseenter = function() {\n    box.style.backgroundColor = \"yellow\";\n};\n\nbox.onmouseleave = function() {\n    box.style.backgroundColor = \"white\";\n};\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"addEventListener_%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA\"><\/span>\n<p>  <code>addEventListener()<\/code>  \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 <strong><code>addEventListener()<\/code>  \u0631\u0648\u0634<\/strong> \u0628\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f <strong>\u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0631\u0627 \u0636\u0645\u06cc\u0645\u0647 \u06a9\u0646\u06cc\u062f<\/strong> \u0628\u0647 \u0639\u0646\u0627\u0635\u0631 HTML \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627.<\/p>\n<p>\u0627\u06cc\u0646 \u0627\u0633\u062a <strong>\u0631\u0648\u0634 \u0627\u0631\u062c\u062d<\/strong> \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u0632\u06cc\u0631\u0627 \u0627\u0632 \u0622\u0646 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f <strong>\u0686\u0646\u062f \u062f\u0633\u062a\u06af\u06cc\u0631\u0647<\/strong>\u0628\u0634\u0631<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D9%86%D8%AD%D9%88_%D8%A7%D8%B3%D8%A7%D8%B3%DB%8C\"><\/span>\n<p>  \u0646\u062d\u0648 \u0627\u0633\u0627\u0633\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>element.addEventListener(\"event\", function);\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B4%D9%86%D9%88%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_%D8%AF%D8%B1_JavaScript\"><\/span>\n<p>  \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0631\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 \u062f\u0631 JavaScript<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062c\u0627\u0630\u0628 <strong>\u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f<\/strong> \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u062a\u0634\u062e\u06cc\u0635 \u062f\u0647\u06cc\u062f <strong>\u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631<\/strong> \u0631\u0648\u06cc \u0639\u0646\u0627\u0635\u0631 \u0645\u0627\u0646\u0646\u062f <strong>\u062f\u06a9\u0645\u0647 \u0647\u0627 \u060c \u067e\u06cc\u0648\u0646\u062f\u0647\u0627 \u060c \u0648\u0631\u0648\u062f\u06cc \u0647\u0627 \u0648 \u0641\u0631\u0645 \u0647\u0627<\/strong>\u0628\u0634\u0631<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%DB%8C%DA%A9_%D8%B4%D9%86%D9%88%D9%86%D8%AF%D9%87_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_addEventListener-2\"><\/span>\n<p>  1. \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0634\u0646\u0648\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f (<code>addEventListener()<\/code>)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>element.addEventListener(\"event\", function);\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"this_%D8%AF%D8%B1_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%B4%D9%86%D9%88%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%D8%AF%D8%B1_JavaScript\"><\/span>\n<p>  <code>this<\/code>  \u062f\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u062f\u0631 JavaScript<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 <strong><code>this<\/code>  \u06a9\u0644\u0645\u0647 \u06a9\u0644\u06cc\u062f\u06cc<\/strong> \u0628\u0631 \u0627\u0633\u0627\u0633 \u0646\u062d\u0648\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0639\u0645\u0644\u06a9\u0631\u062f \u062f\u0631 \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0645\u062a\u0641\u0627\u0648\u062a \u0631\u0641\u062a\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_this_%D8%AF%D8%B1_%DB%8C%DA%A9_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF_%D9%85%D9%86%D8%B8%D9%85_%D8%A8%D9%87_%D8%B9%D9%86%D8%B5%D8%B1_%D8%A7%D8%B4%D8%A7%D8%B1%D9%87_%D8%AF%D8%A7%D8%B1%D8%AF\"><\/span>\n<p>  1 <code>this<\/code> \u062f\u0631 \u06cc\u06a9 \u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u0646\u0638\u0645 (\u0628\u0647 \u0639\u0646\u0635\u0631 \u0627\u0634\u0627\u0631\u0647 \u062f\u0627\u0631\u062f)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0647\u0646\u06af\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 a <strong>\u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u0646\u0638\u0645<\/strong>\u0628\u0627 <code>this<\/code> \u0627\u0634\u0627\u0631\u0647 \u0628\u0647 <strong>\u0639\u0646\u0635\u0631\u06cc \u06a9\u0647 \u0628\u0627\u0639\u062b \u0627\u06cc\u062c\u0627\u062f \u0627\u06cc\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0634\u062f<\/strong>\u0628\u0634\u0631<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let button = document.getElementById(\"myButton\");\n\nbutton.addEventListener(\"click\", function() {\n    console.log(this);  \/\/ Logs the button element\n    this.style.backgroundColor = \"blue\"; \/\/ Changes button color\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C_%D8%B5%D9%81%D8%AD%D9%87_%DA%A9%D9%84%DB%8C%D8%AF_%D8%AF%D8%B1_JavaScript\"><\/span>\n<p>  \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u062f \u062f\u0631 JavaScript<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062c\u0627\u0630\u0628 <strong>\u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u062f<\/strong> \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631 \u06cc\u06a9 \u06a9\u0644\u06cc\u062f \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0627\u062f\u0647 \u06cc\u0627 \u0622\u0632\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u060c \u062a\u0634\u062e\u06cc\u0635 \u062f\u0647\u06cc\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_%D8%A7%D9%86%D9%88%D8%A7%D8%B9_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C_%D8%B5%D9%81%D8%AD%D9%87_%DA%A9%D9%84%DB%8C%D8%AF\"><\/span>\n<p>  1. \u0627\u0646\u0648\u0627\u0639 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"table-wrapper-paragraph\">\n<table>\n<thead>\n<tr>\n<th>\u0648\u0627\u0642\u0639\u0647<\/th>\n<th>\u0634\u0631\u062d<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>keydown<\/code><\/td>\n<td>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06cc\u06a9 \u06a9\u0644\u06cc\u062f \u0627\u0633\u062a \u0622\u062a\u0634 \u0645\u06cc \u06af\u06cc\u0631\u062f <strong>\u0641\u0634\u0627\u0631<\/strong>\n<\/td>\n<\/tr>\n<tr>\n<td><code>keyup<\/code><\/td>\n<td>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06cc\u06a9 \u06a9\u0644\u06cc\u062f \u0627\u0633\u062a \u0622\u062a\u0634 \u0645\u06cc \u06af\u06cc\u0631\u062f <strong>\u0639\u0627\u0631\u06cc \u0627\u0632<\/strong>\n<\/td>\n<\/tr>\n<tr>\n<td><code>keypress<\/code><\/td>\n<td>(\u0645\u0633\u062a\u0647\u0644\u06a9) \u0634\u0628\u06cc\u0647 \u0628\u0647 <code>keydown<\/code>\u060c \u0627\u0645\u0627 \u062a\u0634\u062e\u06cc\u0635 \u0646\u0645\u06cc \u062f\u0647\u062f <code>Shift<\/code>\u0628\u0627 <code>Ctrl<\/code>\u0628\u0627 <code>Alt<\/code>\u060c \u0648 \u063a\u06cc\u0631\u0647<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><strong>\u0628\u0647\u062a\u0631\u06cc\u0646 \u062a\u0645\u0631\u06cc\u0646:<\/strong> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0646 <strong><code>keydown<\/code>  \u0648\u062a <code>keyup<\/code><\/strong>  \u0628\u0647 \u062c\u0627\u06cc <code>keypress<\/code>\u0628\u0634\u0631<\/p>\n<h4><span class=\"ez-toc-section\" id=\"2_%D8%AA%D8%B4%D8%AE%DB%8C%D8%B5_%D9%85%D8%B7%D8%A8%D9%88%D8%B9%D8%A7%D8%AA_%DA%A9%D9%84%DB%8C%D8%AF_keydown\"><\/span>\n<p>  2. \u062a\u0634\u062e\u06cc\u0635 \u0645\u0637\u0628\u0648\u0639\u0627\u062a \u06a9\u0644\u06cc\u062f (<code>keydown<\/code>)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>document.addEventListener(\"keydown\", (event) =&gt; {\n    console.log(`Key pressed: ${event.key}`);\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C%DB%8C_%D8%B1%D8%A7_%D8%AA%D8%B4%DA%A9%DB%8C%D9%84_%D9%85%DB%8C_%D8%AF%D9%87%D9%86%D8%AF\"><\/span>\n<p>  \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc\u06cc \u0631\u0627 \u062a\u0634\u06a9\u06cc\u0644 \u0645\u06cc \u062f\u0647\u0646\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062c\u0627\u0630\u0628 <strong>\u0648\u0642\u0627\u06cc\u0639<\/strong> \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0627 \u0639\u0646\u0627\u0635\u0631 \u0641\u0631\u0645 \u060c \u0645\u0627\u0646\u0646\u062f <strong>\u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u060c \u06a9\u0627\u062f\u0631 \u0686\u06a9 \u0648 \u062f\u06a9\u0645\u0647 \u0647\u0627<\/strong>\u0628\u0634\u0631<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C_%D9%81%D8%B1%D9%85_%D9%85%D8%B4%D8%AA%D8%B1%DA%A9\"><\/span>\n<p>  1. \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0641\u0631\u0645 \u0645\u0634\u062a\u0631\u06a9<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>| Event | Description |\n|-------|------------|\n| `submit` | Fires when a form is submitted |\n| `focus` | Fires when an input field gains focus |\n| `blur` | Fires when an input field loses focus |\n| `change` | Fires when an input value changes (for dropdowns, checkboxes, etc.) |\n| `input` | Fires when the user types in an input field |\n| `reset` | Fires when the form is reset |\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"2_%D8%A7%D8%B2_%D8%A7%D8%B1%D8%B3%D8%A7%D9%84_%D9%81%D8%B1%D9%85_%D9%BE%DB%8C%D8%B4_%D9%81%D8%B1%D8%B6_%D8%AC%D9%84%D9%88%DA%AF%DB%8C%D8%B1%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF_submit_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF\"><\/span>\n<p>  2. \u0627\u0632 \u0627\u0631\u0633\u0627\u0644 \u0641\u0631\u0645 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f (<code>submit<\/code> \u0631\u0648\u06cc\u062f\u0627\u062f)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let form = document.getElementById(\"myForm\");\n\nform.addEventListener(\"submit\", (event) =&gt; {\n    event.preventDefault(); \/\/ Prevent page reload\n    console.log(\"Form submitted!\");\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B3%D8%AA%D8%AE%D8%B1%D8%A7%D8%AC_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D9%81%D8%B1%D9%85_%D8%AF%D8%B1_JavaScript\"><\/span>\n<p>  \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0641\u0631\u0645 \u062f\u0631 JavaScript<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>JavaScript \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f <strong>\u0645\u0642\u0627\u062f\u06cc\u0631 \u0648\u0631\u0648\u062f\u06cc \u0641\u0631\u0645 \u0631\u0627 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u062f<\/strong> \u0628\u0631\u0627\u06cc \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u060c \u067e\u0631\u062f\u0627\u0632\u0634 \u06cc\u0627 \u0627\u0631\u0633\u0627\u0644 \u062f\u0627\u062f\u0647 \u0628\u0647 \u0633\u0631\u0648\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_%D8%A7%D8%B3%D8%AA%D8%AE%D8%B1%D8%A7%D8%AC_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_querySelector\"><\/span>\n<p>  1. \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>querySelector<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>document.getElementById(\"myForm\").addEventListener(\"submit\", function(event) {\n    event.preventDefault(); \/\/ Prevent page reload\n\n    let name = document.querySelector(\"#name\").value;\n    let email = document.querySelector(\"#email\").value;\n    let message = document.querySelector(\"#message\").value;\n\n    console.log(`Name: ${name}, Email: ${email}, Message: ${message}`);\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"2_%D8%A7%D8%B3%D8%AA%D8%AE%D8%B1%D8%A7%D8%AC_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1\"><\/span>\n<p>  2. \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0639\u0646\u0627\u0635\u0631[]\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>document.getElementById(\"myForm\").addEventListener(\"submit\", function(event) {\n    event.preventDefault();\n\n    let form = event.target;\n    let name = form.elements[\"name\"].value;\n    let email = form.elements[\"email\"].value;\n\n    console.log(`Name: ${name}, Email: ${email}`);\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"3_%D8%A7%D8%B3%D8%AA%D8%AE%D8%B1%D8%A7%D8%AC_%DA%A9%D8%A7%D8%AF%D8%B1_%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8_%D9%88_%D9%85%D9%82%D8%A7%D8%AF%DB%8C%D8%B1_%D8%AF%DA%A9%D9%85%D9%87_%D8%B1%D8%A7%D8%AF%DB%8C%D9%88%DB%8C%DB%8C\"><\/span>\n<p>  3. \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u06a9\u0627\u062f\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 \u0648 \u0645\u0642\u0627\u062f\u06cc\u0631 \u062f\u06a9\u0645\u0647 \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>document.getElementById(\"myForm\").addEventListener(\"submit\", function(event) {\n    event.preventDefault();\n\n    let agree = document.querySelector(\"#agree\").checked;\n    let gender = document.querySelector('input[name=\"gender\"]:checked').value;\n\n    console.log(`Agreement: ${agree}, Gender: ${gender}`);\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>Feature                    Method\nGet Input Value            document.querySelector(\"#id\").value\nGet Checkbox Value     document.querySelector(\"#id\").checked\nGet Selected Radio Value document.querySelector('input[name=\"name\"]:checked').value\nGet Dropdown Value     document.querySelector(\"#id\").value\nExtract All Form Data      new FormData(form).entries()\nSend Data to Server    fetch(\"URL\", { method: \"POST\", body: formData })\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"change_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA\"><\/span>\n<p>  <code>change<\/code>  \u0631\u0648\u06cc\u062f\u0627\u062f \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 <strong><code>change<\/code>  \u0648\u0627\u0642\u0639\u0647<\/strong> \u0622\u062a\u0634 \u0633\u0648\u0632\u06cc \u0647\u0646\u06af\u0627\u0645 \u0648\u0631\u0648\u062f\u06cc \u0641\u0631\u0645 <strong>\u062a\u0645\u0631\u06a9\u0632 \u062e\u0648\u062f \u0631\u0627 \u067e\u0633 \u0627\u0632 \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0631\u0632\u0634 \u0627\u0632 \u062f\u0633\u062a \u0645\u06cc \u062f\u0647\u062f<\/strong>\u0628\u0634\u0631<\/p>\n<p>\u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0631\u0627\u06cc <strong>\u06a9\u0634\u0648\u06cc\u06cc \u060c \u06a9\u0627\u062f\u0631 \u0686\u06a9 \u060c \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0648 \u0648\u0631\u0648\u062f\u06cc \u0647\u0627\u06cc \u0645\u062a\u0646<\/strong>\u0628\u0634\u0631<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_%D9%86%D8%AD%D9%88_%D8%A7%D8%B3%D8%A7%D8%B3%DB%8C\"><\/span>\n<p>  1. \u0646\u062d\u0648 \u0627\u0633\u0627\u0633\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>element.addEventListener(\"change\", function(event) {\n    console.log(event.target.value);\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"input_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA\"><\/span>\n<p>  <code>input<\/code>  \u0631\u0648\u06cc\u062f\u0627\u062f \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 <strong><code>input<\/code>  \u0648\u0627\u0642\u0639\u0647<\/strong> \u0622\u062a\u0634 \u0633\u0648\u0632\u06cc <strong>\u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 \u06cc\u06a9 \u0645\u06cc\u062f\u0627\u0646 \u0648\u0631\u0648\u062f\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f<\/strong>\u060c \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062f\u0647 \u0622\u0644 \u0628\u0631\u0627\u06cc <strong>\u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0647\u0627\u06cc \u0632\u0646\u062f\u0647<\/strong>\u0628\u0634\u0631<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_%D9%86%D8%AD%D9%88_%D8%A7%D8%B3%D8%A7%D8%B3%DB%8C-2\"><\/span>\n<p>  1. \u0646\u062d\u0648 \u0627\u0633\u0627\u0633\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>element.addEventListener(\"input\", function(event) {\n    console.log(event.target.value);\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AD%D8%A8%D8%A7%D8%A8_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%AF%D8%B1_JavaScript\"><\/span>\n<p>  \u062d\u0628\u0627\u0628 \u0631\u0648\u06cc\u062f\u0627\u062f \u062f\u0631 JavaScript<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>\u062d\u0628\u0627\u0628 \u0631\u0648\u06cc\u062f\u0627\u062f<\/strong> \u0645\u0641\u0647\u0648\u0645\u06cc \u062f\u0631 DOM \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u06cc\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f <strong>\u0627\u0632 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f<\/strong> \u0648\u062a <strong>\u0628\u0647 \u0633\u0645\u062a \u0628\u0627\u0644\u0627 \u067e\u062e\u0634 \u0645\u06cc \u0634\u0648\u062f<\/strong> \u0628\u0647 \u0627\u062c\u062f\u0627\u062f \u0622\u0646<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_%DA%86%DA%AF%D9%88%D9%86%D9%87_%D8%AD%D8%A8%D8%A7%D8%A8_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%DA%A9%D8%A7%D8%B1_%D9%85%DB%8C_%DA%A9%D9%86%D8%AF\"><\/span>\n<p>  1. \u0686\u06af\u0648\u0646\u0647 \u062d\u0628\u0627\u0628 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>HTML \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code><p>\n    <button id=\"child\">Click Me<\/button>\n<\/p>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062d\u0627\u0644 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>document.getElementById(\"child\").addEventListener(\"click\", () =&gt; {\n    console.log(\"Child clicked!\");\n});\n\ndocument.getElementById(\"parent\").addEventListener(\"click\", () =&gt; {\n    console.log(\"Parent clicked!\");\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u0633\u06cc\u0627\u0647\u0647\u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u062f\u06a9\u0645\u0647 \u0647\u0627:<\/p>\n<p>\u06a9\u0648\u062f\u06a9 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f!<br \/>\u0648\u0627\u0644\u062f\u06cc\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646\u062f!<\/p>\n<p>\u0627\u06cc\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0632 \u06a9\u0648\u062f\u06a9 (\u062f\u06a9\u0645\u0647) \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f \u0648 \u062d\u0628\u0627\u0628 \u062a\u0627 \u0648\u0627\u0644\u062f\u06cc\u0646 (DIV).<\/p>\n<h4><span class=\"ez-toc-section\" id=\"2_%D9%85%D8%AA%D9%88%D9%82%D9%81_%DA%A9%D8%B1%D8%AF%D9%86_%D8%AD%D8%A8%D8%A7%D8%A8_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_StopPropagation\"><\/span>\n<p>  2. \u0645\u062a\u0648\u0642\u0641 \u06a9\u0631\u062f\u0646 \u062d\u0628\u0627\u0628 \u0631\u0648\u06cc\u062f\u0627\u062f (StopPropagation ())<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u062d\u0628\u0627\u0628 \u0627\u0632 event.stoppropagation () \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>document.getElementById(\"child\").addEventListener(\"click\", (event) =&gt; {\n    event.stopPropagation();\n    console.log(\"Child clicked!\");\n});\n\ndocument.getElementById(\"parent\").addEventListener(\"click\", () =&gt; {\n    console.log(\"Parent clicked!\");\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0641\u0642\u0637 \u0633\u06cc\u0627\u0647\u0647\u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637:<\/p>\n<p>\u06a9\u0648\u062f\u06a9 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f!<\/p>\n<p>\u0631\u0648\u06cc\u062f\u0627\u062f \u0648\u0627\u0644\u062f\u06cc\u0646 \u0634\u0631\u0648\u0639 \u0646\u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%86%D9%85%D8%A7%DB%8C%D9%86%D8%AF%DA%AF%DB%8C_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA\"><\/span>\n<p>  \u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>\u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u06cc<\/strong> \u06cc\u06a9 \u062a\u06a9\u0646\u06cc\u06a9 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0622\u0646 <strong>\u0634\u0646\u0648\u0646\u062f\u0647 \u062a\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f<\/strong> \u0628\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f\u06cc\u0646 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u0634\u0648\u062f \u062a\u0627 \u062d\u0648\u0627\u062f\u062b \u0631\u0627 \u0628\u0631 \u0631\u0648\u06cc \u0686\u0646\u062f\u06cc\u0646 \u0639\u0646\u0627\u0635\u0631 \u06a9\u0648\u062f\u06a9 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u062f \u060c \u062d\u062a\u06cc \u0627\u06af\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0627\u0636\u0627\u0641\u0647 \u0634\u0648\u0646\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_%DA%86%D8%B1%D8%A7_%D8%A7%D8%B2_%D9%86%D9%85%D8%A7%DB%8C%D9%86%D8%AF%DA%AF%DB%8C_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D9%85%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF%D8%9F\"><\/span>\n<p>  1. \u0686\u0631\u0627 \u0627\u0632 \u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%94%B9_%D8%A8%D8%AF%D9%88%D9%86_%D9%87%DB%8C%D8%A6%D8%AA_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%D8%B4%D9%86%D9%88%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%A8%D9%87_%D9%87%D8%B1_%D8%AF%DA%A9%D9%85%D9%87\"><\/span>\n<p>  \ud83d\udd39 \u0628\u062f\u0648\u0646 \u0647\u06cc\u0626\u062a \u0631\u0648\u06cc\u062f\u0627\u062f (\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0647 \u0647\u0631 \u062f\u06a9\u0645\u0647)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>let buttons = document.querySelectorAll(\".btn\");\n\nbuttons.forEach(button =&gt; {\n    button.addEventListener(\"click\", () =&gt; {\n        console.log(\"Button clicked!\");\n    });\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0631\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647 \u067e\u0648\u06cc\u0627 \u06a9\u0627\u0631 \u0646\u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"2_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D9%86%D9%85%D8%A7%DB%8C%D9%86%D8%AF%DA%AF%DB%8C_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF\"><\/span>\n<p>  2. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>document.getElementById(\"parent\").addEventListener(\"click\", (event) =&gt; {\n    if (event.target.matches(\".btn\")) {\n        console.log(`Button Clicked: ${event.target.textContent}`);\n    }\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0686\u0631\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f\u061f<\/p>\n<ul>\n<li>\u0641\u0642\u0637 \u06cc\u06a9 \u0634\u0646\u0648\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0644\u0627\u0632\u0645 \u0627\u0633\u062a.<\/li>\n<li>\u0628\u0631\u0627\u06cc \u0647\u0631 \u062f\u0648 \u0639\u0646\u0627\u0635\u0631 \u0645\u0648\u062c\u0648\u062f \u0648 \u067e\u0648\u06cc\u0627 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/li>\n<\/ul><\/div>\n","protected":false},"excerpt":{"rendered":"<p>DOM \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0686\u06cc\u0633\u062a\u061f \u062f\u0631 \u0645\u062f\u0644 \u0634\u06cc\u0621 \u0633\u0646\u062f (DOM) \u0627\u0633\u062a \u0631\u0627\u0628\u0637 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u06a9\u0647 \u0628\u0647 JavaScript \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0639\u0627\u0645\u0644 \u060c \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0648 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627\u0628\u0634\u0631 \u0627\u06cc\u0646 \u0646\u0645\u0627\u06cc\u0627\u0646\u06af\u0631 \u06cc\u06a9 \u0633\u0646\u062f HTML \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0631\u062e\u062a\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0647\u0631 \u06a9\u062f\u0627\u0645 \u0639\u0646\u0635\u0631 HTML \u06cc\u06a9 \u06af\u0631\u0647 \u0627\u0633\u062a\u0628\u0634\u0631 1. \u062f\u0631\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 DOM \u0627\u06cc\u0646 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":100389,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-100388","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/100388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=100388"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/100388\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/100389"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=100388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=100388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=100388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}