លើសពីនេះ វត្ថុ HTMLDocument កំណត់លក្ខណៈសម្បត្តិពីរ ដែលនីមួយៗមិនសំដៅទៅលើបណ្តុំមួយ ប៉ុន្តែចំពោះធាតុតែមួយ។ លក្ខណៈសម្បត្តិ document.body តំណាងឱ្យធាតុឯកសារ HTML ហើយលក្ខណៈសម្បត្តិ document.head តំណាងឱ្យ . លក្ខណសម្បត្តិទាំងនេះតែងតែត្រូវបានកំណត់នៅក្នុងឯកសារ៖ ទោះបីជាឯកសារប្រភពមិនមាន និងធាតុក៏ដោយ កម្មវិធីរុករកនឹងបង្កើតពួកវាដោយប្រយោល។ លក្ខណសម្បត្តិ documentElement នៃ Document object សំដៅទៅលើធាតុ root របស់ឯកសារ។ នៅក្នុងឯកសារ HTML វាតែងតែតំណាងឱ្យ .

តម្លៃនៃគុណលក្ខណៈថ្នាក់ HTML គឺជាបញ្ជីនៃលេខសម្គាល់សូន្យ ឬច្រើន ដែលបំបែកដោយដកឃ្លា។ វាអនុញ្ញាតឱ្យអ្នកកំណត់សំណុំនៃធាតុឯកសារដែលពាក់ព័ន្ធ៖ ធាតុណាមួយដែលមានអត្តសញ្ញាណដូចគ្នានៅក្នុងគុណលក្ខណៈថ្នាក់គឺជាផ្នែកនៃសំណុំដូចគ្នា។ ថ្នាក់​ពាក្យ​ត្រូវ​បាន​បម្រុង​ទុក​ក្នុង JavaScript ដូច្នេះ JavaScript ខាង​ម៉ាស៊ីន​ភ្ញៀវ​ប្រើ​លក្ខណសម្បត្តិ className ដើម្បី​ទុក​តម្លៃ​នៃ​គុណលក្ខណៈ​ថ្នាក់ HTML ។

ជាធម្មតា គុណលក្ខណៈថ្នាក់ត្រូវបានប្រើដោយភ្ជាប់ជាមួយ CSS cascading style sheets ដើម្បីអនុវត្តរចនាប័ទ្មបង្ហាញទូទៅចំពោះសមាជិកទាំងអស់នៃសំណុំមួយ។ ទោះយ៉ាងណាក៏ដោយ លើសពីនេះ ស្តង់ដារ HTML5 កំណត់វិធីសាស្ត្រ getElementsByClassName() ដែលអនុញ្ញាតឱ្យអ្នកជ្រើសរើសធាតុឯកសារជាច្រើនដោយផ្អែកលើការកំណត់អត្តសញ្ញាណនៅក្នុងគុណលក្ខណៈថ្នាក់របស់ពួកគេ។

ដូចវិធីសាស្ត្រ getElementsByTagName() វិធីសាស្ត្រ getElementsByClassName() អាចត្រូវបានហៅទាំងនៅលើឯកសារ HTML និងធាតុ HTML ហើយត្រឡប់វត្ថុ NodeList ផ្ទាល់ដែលមានកូនចៅទាំងអស់នៃឯកសារ ឬធាតុដែលត្រូវគ្នានឹងលក្ខណៈវិនិច្ឆ័យស្វែងរក។

វិធីសាស្ត្រ getElementsByClassName() យកអាគុយម៉ង់ខ្សែតែមួយ ប៉ុន្តែខ្សែអក្សរខ្លួនវាអាចមានធាតុសម្គាល់ច្រើន ដែលបំបែកដោយដកឃ្លា។ ធាតុទាំងអស់ដែលគុណលក្ខណៈថ្នាក់មានធាតុសម្គាល់ដែលបានបញ្ជាក់ទាំងអស់នឹងត្រូវបានចាត់ទុកថាត្រូវគ្នា។ លំដាប់នៃអ្នកកំណត់អត្តសញ្ញាណមិនមានបញ្ហាទេ។ ចំណាំថាទាំងគុណលក្ខណៈថ្នាក់ និងអាគុយម៉ង់ទៅវិធីសាស្ត្រ getElementsByClassName() គ្រឿងសម្គាល់ថ្នាក់ត្រូវបានបំបែកដោយដកឃ្លាជាជាងសញ្ញាក្បៀស។

ខាងក្រោម​នេះ​ជា​ឧទាហរណ៍​មួយ​ចំនួន​នៃ​ការ​ប្រើ​វិធីសាស្ត្រ getElementsByClassName()៖

// ស្វែងរកធាតុទាំងអស់ជាមួយ class "warning" var warnings = document.getElementsByClassName("warning"); // ស្វែងរកកូនចៅទាំងអស់នៃធាតុដែលមានលេខសម្គាល់ "log" // ជាមួយថ្នាក់ "error" និង "fatal" var log = document.getElementById("log"); var fatal = log.getElementsByClassName("កំហុសធ្ងន់ធ្ងរ");

CSS Cascading Style Sheets មាន​រចនាសម្ព័ន្ធ​វាក្យសម្ព័ន្ធ​ដ៏​មាន​ឥទ្ធិពល​ខ្លាំង​ដែល​គេ​ស្គាល់​ថា​ជា Selectors ដែល​អនុញ្ញាត​ឱ្យ​អ្នក​ពណ៌នា​អំពី​ធាតុ ឬ​សំណុំ​នៃ​ធាតុ​ក្នុង​ឯកសារ។ រួមជាមួយនឹងការកំណត់ស្តង់ដារឧបករណ៍ជ្រើសរើស CSS3 ស្តង់ដារ W3C មួយផ្សេងទៀតដែលគេស្គាល់ថាជា Selectors API កំណត់វិធីសាស្ត្រ JavaScript សម្រាប់ការទាញយកធាតុដែលត្រូវគ្នានឹងឧបករណ៍ជ្រើសរើសដែលបានបញ្ជាក់។

គន្លឹះនៃ API នេះគឺ querySelectorAll() method នៃ Document object ។ វាត្រូវការអាគុយម៉ង់ខ្សែតែមួយជាមួយឧបករណ៍ជ្រើសរើស CSS ហើយត្រឡប់វត្ថុ NodeList ដែលតំណាងឱ្យធាតុឯកសារទាំងអស់ដែលត្រូវគ្នានឹងឧបករណ៍ជ្រើសរើស។

បន្ថែមពីលើវិធីសាស្ត្រ querySelectorAll() វត្ថុឯកសារក៏កំណត់វិធីសាស្ត្រ querySelector() ដែលស្រដៀងនឹងវិធីសាស្ត្រ querySelectorAll() លើកលែងតែវាត្រឡប់តែធាតុដែលត្រូវគ្នាដំបូង (តាមលំដាប់ឯកសារ) ឬទុកជាមោឃៈ ប្រសិនបើមិនមាន ធាតុដែលត្រូវគ្នា។

វិធីសាស្រ្តទាំងពីរនេះក៏ត្រូវបានកំណត់ដោយ Elements class ផងដែរ។ នៅពេលដែលពួកគេត្រូវបានហៅនៅលើធាតុមួយ ឯកសារទាំងមូលត្រូវបានស្វែងរកការផ្គូផ្គងសម្រាប់អ្នកជ្រើសរើសដែលបានផ្តល់ឱ្យ ហើយបន្ទាប់មកលទ្ធផលត្រូវបានត្រងដើម្បីរួមបញ្ចូលតែកូនចៅនៃធាតុដែលបានប្រើ។ វិធីសាស្រ្តនេះអាចហាក់ដូចជាផ្ទុយស្រឡះ ព្រោះវាមានន័យថា ខ្សែអក្សរជ្រើសរើសអាចរួមបញ្ចូលបុព្វបុរសនៃធាតុដែលត្រូវបានផ្គូផ្គង។

បន្ទាប់ពីជ្រើសរើសធាតុឯកសារ ជួនកាលចាំបាច់ត្រូវស្វែងរកផ្នែកដែលទាក់ទងតាមរចនាសម្ព័ន្ធនៃឯកសារ (ឪពុកម្តាយ បងប្អូនបង្កើត កូន)។ វត្ថុឯកសារអាចត្រូវបានគិតថាជាមែកធាងនៃវត្ថុ Node ។ ប្រភេទថ្នាំងកំណត់លក្ខណៈសម្បត្តិដែលអនុញ្ញាតឱ្យអ្នករុករកមែកធាងបែបនេះ។ មានចំណុចប្រទាក់កម្មវិធីមួយផ្សេងទៀតសម្រាប់ការរុករកឯកសារ ដូចជាមែកធាងវត្ថុធាតុ។

វត្ថុឯកសារ វត្ថុធាតុរបស់វា និងវត្ថុអត្ថបទដែលតំណាងឱ្យបំណែកអត្ថបទក្នុងឯកសារគឺជាវត្ថុ Node ទាំងអស់។ Node class កំណត់លក្ខណៈសម្បត្តិសំខាន់ៗដូចខាងក្រោមៈ

ថ្នាំងមេរបស់ថ្នាំងនេះ ឬចាត់ទុកជាមោឃៈសម្រាប់ថ្នាំងដែលមិនមានមេ ដូចជាឯកសារ។

វត្ថុដូចអារេដែលអាចអានបាន (NodeList) ដែលផ្តល់នូវតំណាងនៃថ្នាំងកុមារ។

ថ្នាំងកូនទីមួយ និងចុងក្រោយ ឬទុកជាមោឃៈ ប្រសិនបើថ្នាំងដែលបានផ្តល់ឱ្យមិនមានថ្នាំងកូន។

ថ្នាំងបងប្រុសបន្ទាប់និងមុន។ ថ្នាំងបងប្អូនបង្កើតគឺជាថ្នាំងពីរដែលមានមេដូចគ្នា។ លំដាប់​ដែល​ពួកគេ​បង្ហាញ​ត្រូវ​នឹង​លំដាប់​ក្នុង​ឯកសារ។ លក្ខណៈសម្បត្តិទាំងនេះភ្ជាប់ថ្នាំងទៅក្នុងបញ្ជីដែលភ្ជាប់ទ្វេដង។

ប្រភេទនៃថ្នាំងនេះ។ ថ្នាំងនៃប្រភេទឯកសារមានតម្លៃ 9 ក្នុងលក្ខណៈសម្បត្តិនេះ។ Nodes of type Element - value 1. Text nodes of type Text - value 3. Nodes of type Comments - value 8 and nodes of type DocumentFragment - value 11.

ខ្លឹមសារអត្ថបទនៃអត្ថបទ និងមតិយោបល់។

ឈ្មោះ​របស់​ស្លាក​ធាតុ​ដែល​មាន​តួអក្សរ​ទាំងអស់​បាន​បំប្លែង​ទៅជា​អក្សរធំ។

ដោយប្រើលក្ខណសម្បត្តិទាំងនេះនៃ Node class អ្នកអាចយោងថ្នាំងកូនទីពីរនៃ node កូនទីមួយនៃ Document object ដូចដែលបានបង្ហាញខាងក្រោម៖

Document.childNodes.childNodes == document.firstChild.firstChild.nextSibling

ឧបមាថាឯកសារដែលចោទសួរមានទម្រង់ដូចខាងក្រោមៈ

សាកល្បងសួស្តីពិភពលោក!

បន្ទាប់មកថ្នាំងកូនទីពីរនៃថ្នាំងកូនទីមួយនឹងជាធាតុ។ នៅក្នុងលក្ខណសម្បត្តិ nodeType វាមានតម្លៃ 1 ហើយនៅក្នុងលក្ខណៈសម្បត្តិ nodeName វាផ្ទុកតម្លៃ "BODY" ។

ទោះយ៉ាងណាក៏ដោយ សូមចំណាំថា API នេះមានភាពរសើបខ្លាំងចំពោះការផ្លាស់ប្តូរនៅក្នុងអត្ថបទឯកសារ។ ឧទាហរណ៍ ប្រសិនបើអ្នកបន្ថែមមតិព័ត៌មានបន្ទាត់តែមួយរវាងស្លាក និងស្លាកក្នុងឯកសារនេះ តួអក្សរព័ត៌មានបន្ទាត់នោះក្លាយជាថ្នាំងកូនទីមួយ (ថ្នាំងអត្ថបទ) នៃថ្នាំងកូនទីមួយ ហើយថ្នាំងកូនទីពីរក្លាយជាធាតុ មិនមែនទេ។

នៅពេលដែលចំណាប់អារម្មណ៍ចម្បងគឺធាតុឯកសារដោយខ្លួនឯង ជាជាងអត្ថបទនៅក្នុងពួកវា (និងចន្លោះពណ៌សរវាងពួកវា) វាកាន់តែងាយស្រួលប្រើចំណុចប្រទាក់កម្មវិធីដែលអនុញ្ញាតឱ្យអ្នកបកស្រាយឯកសារជាមែកធាងនៃវត្ថុធាតុដោយមិនអើពើ។ ថ្នាំងអត្ថបទ និងមតិយោបល់ ដែលជាផ្នែកនៃឯកសារផងដែរ។

ផ្នែកដំបូងនៃចំណុចប្រទាក់កម្មវិធីនេះគឺជាទ្រព្យសម្បត្តិរបស់កុមារនៃវត្ថុធាតុ។ ដូចលក្ខណសម្បត្តិ childNodes តម្លៃរបស់វាគឺវត្ថុ NodeList ។ ទោះយ៉ាងណាក៏ដោយ មិនដូចលក្ខណៈ childNodes ទេ បញ្ជីកុមារមានធាតុ Element ប៉ុណ្ណោះ។

ចំណាំថាថ្នាំងអត្ថបទ និងមតិយោបល់មិនមានថ្នាំងកូនទេ។ នេះមានន័យថា លក្ខណៈសម្បត្តិ Node.parentNode ដែលបានពិពណ៌នាខាងលើ មិនដែលត្រឡប់ថ្នាំងនៃប្រភេទ Text ឬ Comment ទេ។ តម្លៃនៃលក្ខណសម្បត្តិ parentNode នៃវត្ថុ Element ណាមួយនឹងតែងតែជាវត្ថុ Element ផ្សេងទៀត ឬជា root នៃមែកធាង - a Document or DocumentFragment object ។

ផ្នែកទីពីរនៃចំណុចប្រទាក់កម្មវិធីសម្រាប់រុករកធាតុឯកសារគឺជាលក្ខណសម្បត្តិរបស់វត្ថុធាតុ ស្រដៀងនឹងលក្ខណៈសម្បត្តិសម្រាប់ចូលប្រើកូន និងបងប្អូនបង្កើតរបស់វត្ថុថ្នាំង៖

ស្រដៀង​នឹង​លក្ខណៈ​សម្បត្តិ​កូន​ដំបូង និង​កូន​ចុង ប៉ុន្តែ​ត្រឡប់​ធាតុ​កូន​វិញ។

ស្រដៀង​គ្នា​នឹង​លក្ខណៈ​សម្បត្តិ NextSibling និង PreviousSibling ប៉ុន្តែ​ត្រឡប់​ធាតុ​បងប្អូន​បង្កើត​វិញ។

ចំនួនធាតុរបស់កុមារ។ ត្រឡប់​តម្លៃ​ដូច​គ្នា​នឹង​ទ្រព្យ​សម្បត្តិ kids.length។

លក្ខណសម្បត្តិនៃការចូលប្រើធាតុរបស់កូន និងបងប្អូនបង្កើតទាំងនេះត្រូវបានធ្វើស្តង់ដារ និងអនុវត្តនៅក្នុងកម្មវិធីរុករកបច្ចុប្បន្នទាំងអស់ លើកលែងតែ IE ។

Document Object Model ឬ "DOM" គឺជាចំណុចប្រទាក់កម្មវិធីសម្រាប់ចូលប្រើធាតុនៃគេហទំព័រ។ សំខាន់វាគឺជា API ទំព័រដែលអនុញ្ញាតឱ្យអ្នកអាន និងរៀបចំមាតិកា រចនាសម្ព័ន្ធ និងរចនាប័ទ្មនៃទំព័រមួយ។ ចូរយើងស្វែងយល់ពីរបៀបដែលវាដំណើរការ និងរបៀបដែលវាដំណើរការ។

ដំណើរការនៃការបំប្លែងឯកសារ HTML ដើមទៅជាទំព័រដែលអាចបង្ហាញបាន រចនាប័ទ្ម និងអន្តរកម្មត្រូវបានគេហៅថា "ផ្លូវបង្ហាញសំខាន់" ។ ខណៈពេលដែលដំណើរការនេះអាចត្រូវបានបែងចែកជាជំហានជាច្រើន ដូចដែលខ្ញុំបានពិពណ៌នានៅក្នុងការយល់ដឹងអំពីផ្លូវសំខាន់ក្នុងការបង្ហាញ ជំហានទាំងនេះអាចត្រូវបានដាក់ជាក្រុមជាពីរជំហាន។ ទីមួយ កម្មវិធីរុករកតាមអ៊ីនធឺណិតញែកឯកសារដើម្បីកំណត់នូវអ្វីដែលនឹងបង្ហាញនៅលើទំព័រចុងក្រោយ ហើយនៅក្នុងទីពីរ កម្មវិធីរុករកនឹងដំណើរការការបង្ហាញ។

លទ្ធផល​នៃ​ដំណាក់​កាល​ទី​មួយ​គឺ​អ្វី​ដែល​ត្រូវ​បាន​គេ​ហៅ​ថា "ដើមឈើ​បង្ហាញ​" ។ មែកធាងបង្ហាញគឺជាតំណាងនៃធាតុ HTML ដែលនឹងត្រូវបានបង្ហាញនៅលើទំព័រមួយ និងរចនាប័ទ្មដែលពាក់ព័ន្ធរបស់វា។ ដើម្បីបង្កើតមែកធាងនេះ កម្មវិធីរុករកត្រូវការរឿងពីរ៖

DOM គឺជាវត្ថុតំណាងនៃឯកសារ HTML ដើម។ វាមានភាពខុសគ្នាមួយចំនួន ដូចដែលយើងនឹងឃើញខាងក្រោម ប៉ុន្តែសំខាន់វាគឺជាការប៉ុនប៉ងបំប្លែងរចនាសម្ព័ន្ធ និងខ្លឹមសារនៃឯកសារ HTML ទៅជាគំរូវត្ថុដែលអាចប្រើបានដោយកម្មវិធីផ្សេងៗ។

រចនាសម្ព័ន្ធនៃវត្ថុ DOM ត្រូវបានតំណាងដោយអ្វីដែលគេហៅថា "មែកធាង node" ។ វាត្រូវបានគេហៅថាព្រោះវាអាចត្រូវបានគេគិតថាជាដើមឈើដែលមានមេតែមួយដែលបែកជាមែកកូនជាច្រើនដែលនីមួយៗអាចមានស្លឹក។ ក្នុងករណីនេះ មេ "ធាតុ" គឺជាធាតុឫស កូន "សាខា" គឺជាធាតុដែលជាប់ ហើយ "ស្លឹក" គឺជាខ្លឹមសារនៅក្នុងធាតុ។

តោះយកឯកសារ HTML នេះធ្វើជាឧទាហរណ៍៖

គេហទំព័រដំបូងរបស់ខ្ញុំ សួស្តីពិភពលោក!

សុខសប្បាយជាទេ?

ឯកសារនេះអាចត្រូវបានតំណាងជាមែកធាងនៃថ្នាំងខាងក្រោម៖

• html
  • ក្បាល
    • ចំណងជើង
      • គេហទំព័រដំបូងរបស់ខ្ញុំ
  • រាងកាយ
    • h1
      • សួស្តីពិភពលោក!
    • ទំ
      • សុខសប្បាយជាទេ?

នៅក្នុងឧទាហរណ៍ខាងលើ វាបង្ហាញថា DOM គឺជាការគូសផែនទី 1:1 នៃឯកសារ HTML ដើម។ ទោះយ៉ាងណាក៏ដោយដូចដែលខ្ញុំបាននិយាយពីមុនវាមានភាពខុសគ្នា។ ដើម្បីយល់ច្បាស់ថា DOM ជាអ្វី យើងត្រូវពិនិត្យមើលថាតើវាមិនមែនជាអ្វី។

ទោះបីជា DOM ត្រូវបានបង្កើតចេញពីឯកសារ HTML ក៏ដោយ វាមិនតែងតែដូចគ្នានោះទេ។ មានករណីពីរដែល DOM អាចខុសគ្នាពីប្រភព HTML ។

DOM គឺជាចំណុចប្រទាក់សម្រាប់ការចូលប្រើធាតុពិត (ដែលបានបង្ហាញរួចហើយ) នៃឯកសារ HTML ។ កំឡុងពេលដំណើរការបង្កើត DOM កម្មវិធីរុករកខ្លួនឯងអាចកែកំហុសមួយចំនួននៅក្នុងកូដ HTML ។

ពិចារណាឯកសារ HTML នេះជាឧទាហរណ៍៖

សួស្តីពិភពលោក!

ឯកសារខ្វះធាតុ ហើយដែលជាតម្រូវការសម្រាប់ HTML ។ ប៉ុន្តែប្រសិនបើយើងក្រឡេកមើលមែកធាង DOM លទ្ធផលយើងអាចឃើញថាវាត្រូវបានជួសជុល:

• html
  • ក្បាល
  • រាងកាយ
    • សួស្តីពិភពលោក!
  2. នៅពេលដែល DOM ត្រូវបានកែប្រែដោយកូដ Javascript

  បន្ថែមពីលើការធ្វើជាចំណុចប្រទាក់សម្រាប់មើលមាតិកានៃឯកសារ HTML នោះ DOM ខ្លួនឯងក៏អាចកែប្រែបានផងដែរ។

  ជាឧទាហរណ៍ យើងអាចបង្កើតថ្នាំងបន្ថែមសម្រាប់ DOM ដោយប្រើ Javascript ។

  Var newParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("ខ្ញុំ"ថ្មី!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph);

  កូដនេះនឹងផ្លាស់ប្តូរ DOM ប៉ុន្តែការផ្លាស់ប្តូរនឹងមិនបង្ហាញក្នុងឯកសារ HTML ទេ។

  DOM មិនមែនជាអ្វីដែលអ្នកឃើញនៅក្នុងកម្មវិធីរុករកទេ (ឧ.

  នៅក្នុង browser viewport អ្នកឃើញមែកធាងបង្ហាញ ដែលដូចដែលខ្ញុំបាននិយាយគឺជាការរួមបញ្ចូលគ្នានៃ DOM និង CSSOM ។ អ្វី​ដែល​ខុស​គ្នា​អំពី DOM និង​មែកធាង​បង្ហាញ​គឺ​ថា​អ្វី​ដែល​ក្រោយ​មក​មាន​តែ​អ្វី​ដែល​នឹង​ត្រូវ​បាន​បង្ហាញ​នៅ​ទី​បំផុត​លើ​អេក្រង់។

  ដោយសារតែមែកធាង render ទាក់ទងតែអ្វីដែលបង្ហាញ វាមិនរាប់បញ្ចូលធាតុដែលលាក់ដោយមើលឃើញ។ ឧទាហរណ៍ ធាតុដែលមានរចនាប័ទ្មជាមួយការបង្ហាញ៖ គ្មាន .

  សួស្តីពិភពលោក!

  សុខសប្បាយជាទេ?

  DOM នឹងរួមបញ្ចូលធាតុ

  • html
    • ក្បាល
    • រាងកាយ
      • h1
        • សួស្តីពិភពលោក!
      • ទំ
        • សុខសប្បាយជាទេ?

  ទោះយ៉ាងណាក៏ដោយ មែកធាងបង្ហាញ ហើយដូច្នេះអ្វីដែលអាចមើលឃើញនៅក្នុង viewport នឹងមិនត្រូវបានរួមបញ្ចូលនៅក្នុងធាតុនេះទេ។

  • html
    • រាងកាយ
      • h1
        • សួស្តីពិភពលោក!
  DOM មិនមែនជាអ្វីដែលត្រូវបានបង្ហាញនៅក្នុង DevTools ទេ។

  ភាពខុសគ្នានេះគឺតូចជាងបន្តិច ដោយសារ DevTools Element Inspector ផ្តល់នូវការប៉ាន់ស្មានជិតបំផុតទៅនឹង DOM ដែលយើងមាននៅក្នុងកម្មវិធីរុករក។ ទោះយ៉ាងណាក៏ដោយ អធិការ DevTools មានព័ត៌មានបន្ថែមដែលមិនមាននៅក្នុង DOM ទេ។

  ឧទាហរណ៍ដ៏ល្អបំផុតគឺ CSS pseudo-elements ។ ធាតុ Pseudo ដែលបង្កើតដោយប្រើ ::before និង ::after selectors គឺជាផ្នែកមួយនៃ CSSOM និង rendering tree ប៉ុន្តែមិនមែនជាផ្នែកបច្ចេកទេសនៃ DOM ទេ។ នេះដោយសារតែ DOM ត្រូវបានបង្កើតឡើងតែពីឯកសារ HTML ដើមប៉ុណ្ណោះ ដោយមិនរាប់បញ្ចូលរចនាប័ទ្មដែលបានអនុវត្តចំពោះធាតុ។

  ទោះបីជាធាតុ pseudo-elements មិនមែនជាផ្នែកនៃ DOM ក៏ដោយ ពួកវាមានវត្តមាននៅក្នុងឧបករណ៍ត្រួតពិនិត្យធាតុ devtools របស់យើង។

  
  បន្ត

  DOM គឺជាចំណុចប្រទាក់នៃឯកសារ HTML ។ វា​ត្រូវ​បាន​ប្រើ​ដោយ​កម្មវិធី​រុករក​ជា​ជំហាន​ដំបូង​ក្នុង​ការ​កំណត់​នូវ​អ្វី​ដែល​ត្រូវ​បង្ហាញ​ក្នុង​ច្រក​មើល និង​ដោយ​កូដ Javascript ដើម្បី​ផ្លាស់ប្ដូរ​ខ្លឹមសារ រចនាសម្ព័ន្ធ ឬ​រចនាប័ទ្ម​នៃ​ទំព័រ។

នៅក្នុងការបង្រៀននេះ យើងនឹងពិនិត្យមើលមូលដ្ឋាននៃការធ្វើការជាមួយព្រឹត្តិការណ៍ គុណលក្ខណៈ និង getElementById នៅក្នុង JavaScript ។

នៅក្នុងមេរៀនមុន យើងបានសិក្សាពីសមត្ថភាពជាមូលដ្ឋាននៃភាសា JavaScript ។ ចាប់ផ្តើមជាមួយមេរៀននេះ យើងនឹងធ្វើអ្វីដែល JavaScript ត្រូវបានរចនាឡើងសម្រាប់ - យើងនឹងកែប្រែធាតុទំព័រ HTML និងឆ្លើយតបទៅនឹងសកម្មភាពរបស់អ្នកប្រើប្រាស់។ ស្គ្រីបរបស់យើងនឹងកាន់តែអស្ចារ្យ និងមានប្រយោជន៍។

យើងនឹងចាប់ផ្តើមដោយការបង្រៀនកូដរបស់យើងដើម្បីឆ្លើយតបទៅនឹងសកម្មភាពរបស់អ្នកប្រើប្រាស់គេហទំព័រ។

ឧទាហរណ៍ អ្នកប្រើប្រាស់នឹងចុចនៅកន្លែងណាមួយដោយប្រើកណ្ដុរ ហើយលេខកូដរបស់យើងក្នុងការឆ្លើយតបនឹងត្រូវដំណើរការការចុចនេះហើយបង្ហាញព័ត៌មានមួយចំនួននៅលើអេក្រង់។ សកម្មភាពរបស់អ្នកប្រើប្រាស់ដែលយើងអាចតាមដានតាមរយៈ JavaScript ត្រូវបានគេហៅថាព្រឹត្តិការណ៍។ ព្រឹត្តិការណ៍អាចមានដូចខាងក្រោម៖យំ កណ្តុរនៅលើធាតុទំព័រមួយការណែនាំ កណ្ដុរ​ទៅ​ធាតុ​ទំព័រ ឬ​ផ្ទុយ​មក​វិញ -ថែទាំ

ទស្សន៍ទ្រនិចកណ្ដុរពីធាតុមួយ ហើយដូច្នេះនៅលើ។ លើសពីនេះទៀត មានព្រឹត្តិការណ៍ដែលមិនអាស្រ័យលើសកម្មភាពរបស់អ្នកប្រើ ឧទាហរណ៍ ព្រឹត្តិការណ៍នៅពេលដែលទំព័រ HTML ត្រូវបានផ្ទុកទៅក្នុងកម្មវិធីរុករក។

យើងនឹងចាប់ផ្តើមជាមួយពួកគេសាមញ្ញបំផុត។ មូលដ្ឋានព្រឹត្តិការណ៍មធ្យោបាយងាយស្រួលបំផុតដើម្បីកំណត់ការឆ្លើយតបរបស់ធាតុទៅនឹងព្រឹត្តិការណ៍ជាក់លាក់មួយគឺត្រូវបញ្ជាក់វាដោយប្រើគុណលក្ខណៈសម្រាប់ស្លាកជាក់លាក់មួយ។ ឧទាហរណ៍ព្រឹត្តិការណ៍មួយ។ "ចុចកណ្ដុរ"ត្រូវគ្នាទៅនឹងគុណលក្ខណៈ onclick ព្រឹត្តិការណ៍ "កណ្ដុរលើ"- គុណលក្ខណៈ onmouseover និងព្រឹត្តិការណ៍

"ទស្សន៍ទ្រនិចទុកធាតុ" - គុណលក្ខណៈ onmouseout ។តម្លៃនៃគុណលក្ខណៈដែលមានព្រឹត្តិការណ៍គឺកូដ JavaScript ។ ក្នុងឧទាហរណ៍ខាងក្រោម

ដោយចុចប៊ូតុងមួយដោយប្រើកណ្ដុរ មុខងារជូនដំណឹងនឹងត្រូវបានប្រតិបត្តិ៖ហើយឥឡូវនេះ

ដោយចុច

មុខងារ Func នឹងត្រូវបានប្រតិបត្តិលើធាតុ៖

មុខងារ func() ( ដាស់តឿន("!");)

អ្នកអាចអនុវត្តមិនត្រឹមតែមុខងារមួយប៉ុណ្ណោះទេ ប៉ុន្តែមានមុខងារជាច្រើន៖ មុខងារ func1() ( alert("1");) មុខងារ func2() ( alert("2"); )សូមចំណាំថាប្រសិនបើអ្នកត្រូវការសម្រង់ទ្វេនៅខាងក្នុងគុណលក្ខណៈ (ឧទាហរណ៍សម្រាប់ខ្សែអក្សរ) ហើយសម្រង់ខាងក្រៅនៃគុណលក្ខណៈក៏ជាសម្រង់ទ្វេផងដែរ -

onclick="alert("!")" មុខងារ func1() ( alert("1");) មុខងារ func2() ( alert("2"); )- លេខកូដនេះនឹងមិនដំណើរការទេ។ មានវិធីជាច្រើនដើម្បីប្រយុទ្ធប្រឆាំងនឹងបញ្ហានេះ៖ អ្នកអាចប្តូរសម្រង់ខាងក្រៅទៅជាសម្រង់តែមួយអ្នកក៏អាចគេចផុតពីសម្រង់ខាងក្នុងដោយប្រើសញ្ញាថយក្រោយ onclick="alert(\"!\)".

ឬគ្រាន់តែផ្លាស់ទីកូដ JavaScript ពីគុណលក្ខណៈទៅមុខងារ ហើយទុកតែឈ្មោះមុខងារក្នុងគុណលក្ខណៈ មុខងារ func1() ( alert("1");) មុខងារ func2() ( alert("2"); ) onclick="func()"

ឥឡូវនេះយើងនឹងរៀនពីរបៀបទទួលធាតុទំព័រ HTML និងអនុវត្តឧបាយកលផ្សេងៗជាមួយពួកគេ (យើងនឹងអាចផ្លាស់ប្តូរឧទាហរណ៍ អត្ថបទ និងពណ៌ និងវត្ថុមានប្រយោជន៍ជាច្រើនទៀត)។

ឧបមាថាយើងមានស្លាកនៅលើទំព័រដែលមានគុណលក្ខណៈលេខសម្គាល់ដែលបានកំណត់ដើម្បីសាកល្បង។

ចូរយើងសរសេរតំណភ្ជាប់ទៅស្លាកនេះទៅក្នុងអថេរ elem ។ ដើម្បីធ្វើដូចនេះយើងត្រូវប្រើវិធី getElementById ដែលទទួលបានធាតុដោយលេខសម្គាល់របស់វា។ធាតុនេះនឹងកើតឡើងនៅពេលដែលប៊ូតុងដែលយើងបានកំណត់គុណលក្ខណៈ onclick ត្រូវបានចុច។ ដោយចុចលើប៊ូតុងនេះ មុខងារ Func នឹងដំណើរការ ដែលនឹងរកឃើញធាតុមួយនៅលើទំព័រ HTML ដែលមានលេខសម្គាល់ស្មើនឹងសាកល្បង និងសរសេរ

ភ្ជាប់ទៅវា។ ទៅអថេរ elem៖.

ឥឡូវនេះនៅក្នុងអថេរ elem យើងមានតំណភ្ជាប់ទៅធាតុមួយដែលមានគុណលក្ខណៈលេខសម្គាល់នៅក្នុងតម្លៃសាកល្បង។ ធាតុអថេរខ្លួនឯងគឺ

វត្ថុ

តោះមើលរបៀបដែលវាកើតឡើងនៅក្នុងការអនុវត្ត។

មូលដ្ឋានគ្រឹះនៃការធ្វើការជាមួយគុណលក្ខណៈ HTML តាមរយៈ JavaScript ឥឡូវនេះយើងនឹងអាន និងផ្លាស់ប្តូរគុណលក្ខណៈស្លាក។អនុញ្ញាតឱ្យយើងបញ្ចូលលេខសម្គាល់ម្តងទៀត ស្មើនឹងការសាកល្បង និងប៊ូតុងមួយ នៅពេលចុចដែលមុខងារ func នឹងត្រូវបានបើកដំណើរការ៖

នៅខាងក្នុងមុខងារ Func យើងនឹងទទួលបានការបញ្ចូលរបស់យើង។

ដោយលេខសម្គាល់របស់គាត់។

ហើយសរសេរតំណទៅវានៅក្នុងអថេរ elem៖

មុខងារ func() ( var elem = document.getElementById("test"); )

ឥឡូវនេះ សូមបង្ហាញខ្លឹមសារនៃគុណលក្ខណៈបញ្ចូលរបស់យើង។

ឧទាហរណ៍ ដើម្បីចូលប្រើគុណលក្ខណៈតម្លៃ អ្នកគួរតែសរសេរដូចខាងក្រោម៖ elem.value ដែល elem គឺជាអថេរដែលយើងបានសរសេរតំណភ្ជាប់ទៅកាន់ធាតុរបស់យើងដោយប្រើ getElementById ហើយតម្លៃគឺជាគុណលក្ខណៈនៃស្លាកដែលយើងចាប់អារម្មណ៍។

យើងអាចបង្ហាញមាតិកានៃគុណលក្ខណៈតាមរយៈការជូនដំណឹងតាមវិធីនេះ - alert(elem.value) - ឬសរសេរវាទៅអថេរមួយចំនួន។ តោះធ្វើដូចនេះ៖

មុខងារ func() ( var elem = document.getElementById("test"); elem.value = "www"; //присвоим новое значение атрибуту value } !}

កូដ HTML នឹងមើលទៅដូចនេះ (គុណលក្ខណៈតម្លៃនឹងក្លាយជា www)៖

ជាការប្រសើរណាស់ឥឡូវនេះអ្វីដែលពិបាកបំផុត - អ្នកមិនអាចបញ្ចូលអថេរ elem បានទេ ប៉ុន្តែបង្កើតខ្សែសង្វាក់នៃចំណុចតាមរបៀបនេះ៖

function func() ( alert(document.getElementById("test").value); // នឹងបង្ហាញ "!")

តាមរបៀបដូចគ្នា (ខ្សែសង្វាក់) អ្នកអាចសរសេរគុណលក្ខណៈឡើងវិញបាន៖

function func() ( document.getElementById("test").value = "www"; }!}

ទោះយ៉ាងណាក៏ដោយ ក្នុងករណីភាគច្រើន ការណែនាំអថេរគឺងាយស្រួលជាង។ ប្រៀបធៀបឧទាហរណ៍ពីរ - ឥឡូវនេះខ្ញុំបានណែនាំអថេរ elem និងអាចអានចំនួននៃគុណលក្ខណៈណាមួយខណៈពេលដែល getElementById ត្រូវបានគេហៅថា តែម្តង:

មុខងារ func() ( var elem = document.getElementById("test"); elem.value = "www"; elem.type = "submit"; }!}

ឥឡូវនេះខ្ញុំមិនណែនាំអថេរថ្មីទេ ដូច្នេះខ្ញុំត្រូវហៅ getElementById ពីរដង៖

function func() ( document.getElementById("test").value = "www"; document.getElementById("test").type = "submit"; }!}

តាមគំនិតរបស់ខ្ញុំ កូដនេះកាន់តែស្មុគស្មាញ បើទោះបីជាវាប្រើមួយបន្ទាត់តិចក៏ដោយ។ លើសពីនេះទៀត ប្រសិនបើខ្ញុំចង់ផ្លាស់ប្តូរតម្លៃ id ពី test ទៅ ឧទាហរណ៍ www ខ្ញុំនឹងត្រូវធ្វើវានៅកន្លែងជាច្រើន ដែលវាមិនងាយស្រួលនោះទេ។

ក្នុងករណីរបស់យើង ប្រសិនបើយើងប្រើ getElementById រាល់ពេល នោះកម្មវិធីរុករកនឹងដំណើរការទំព័រ HTML រាល់ពេល ហើយស្វែងរកធាតុដែលមានលេខសម្គាល់ដែលបានផ្តល់ឱ្យច្រើនដង (វាមិនមានបញ្ហាទេដែលលេខសម្គាល់ដូចគ្នា - កម្មវិធីរុករកនឹងធ្វើទាំងអស់ សកម្មភាពជាច្រើនដង) អនុវត្តប្រតិបត្តិការដែលគ្មានប្រយោជន៍ដែលអាចបន្ថយប្រតិបត្តិការកម្មវិធីរុករក។

ប្រសិនបើយើងប្រើអថេរ elem គ្មានការស្វែងរកនៅលើទំព័រកើតឡើងទេ (ធាតុត្រូវបានរកឃើញរួចហើយ ហើយតំណភ្ជាប់ទៅវាស្ថិតនៅក្នុងអថេរ elem)។

អ្នកបានរៀនពីរបៀបធ្វើការជាមួយគុណលក្ខណៈតាមរយៈ JavaScript ហើយឥឡូវនេះវាដល់ពេលដែលត្រូវប្រាប់អ្នកថាមិនមែនអ្វីៗទាំងអស់គឺសាមញ្ញទេ - មានករណីលើកលែងនៅពេលធ្វើការជាមួយគុណលក្ខណៈ - នេះគឺជាគុណលក្ខណៈថ្នាក់។

ពាក្យនេះគឺពិសេសនៅក្នុង JavaScript ដូច្នេះហើយយើងមិនអាចសរសេរដោយសាមញ្ញបានទេ។ elem.classដើម្បីអានតម្លៃនៃគុណលក្ខណៈថ្នាក់។ ជំនួសមកវិញ អ្នកគួរតែសរសេរ elem.className.

ឧទាហរណ៍ខាងក្រោមបង្ហាញតម្លៃនៃគុណលក្ខណៈថ្នាក់៖

មុខងារ func() ( var elem = document.getElementById("test"); alert(elem.className); )

ដោយវិធីនេះមានគុណលក្ខណៈផ្សេងទៀតដែលត្រូវបានគេហៅថាខុសពីលក្ខណៈសម្បត្តិ។

ឥឡូវនេះយើងនឹងធ្វើការជាមួយវត្ថុពិសេសមួយ ដែលចង្អុលទៅធាតុបច្ចុប្បន្ន (ធាតុដែលព្រឹត្តិការណ៍នេះបានកើតឡើង)។

លើសពីនេះទៅទៀត វាបង្ហាញថាធាតុនេះបានទទួលរួចហើយដោយវិធីសាស្ត្រ getElementById ។

តោះមើលពីរបៀបធ្វើការជាមួយនេះនិងអ្វីដែលជាភាពងាយស្រួលនៃវិធីសាស្រ្តនេះ។

អនុញ្ញាតឱ្យយើងមានភារកិច្ចចុចលើធាតុបញ្ចូលដើម្បីបង្ហាញមាតិកានៃតម្លៃរបស់វា។

សម្រាប់ពេលនេះ អ្នកគ្រាន់តែអាចធ្វើការសម្រេចចិត្តនេះបាន៖

មុខងារ func() ( var elem = document.getElementById("test"); alert(elem.value); )

ជាគោលការណ៍ដំណោះស្រាយនេះគឺល្អប៉ុន្តែឥឡូវនេះស្រមៃថាយើងមានធាតុចូលជាច្រើនហើយនៅពេលដែលយើងចុចលើនីមួយៗយើងត្រូវបង្ហាញតម្លៃរបស់វា។

ក្នុងករណីនេះ យើងនឹងបញ្ចប់រឿងដូចនេះ៖

មុខងារ func1() ( var elem = document.getElementById("test1"); alert(elem.value); ) មុខងារ func2() ( var elem = document.getElementById("test2"); alert(elem.value); ) មុខងារ func3() ( var elem = document.getElementById("test3"); alert(elem.value); )

ឥឡូវនេះគុណវិបត្តិនៃវិធីសាស្រ្តរបស់យើងគឺអាចមើលឃើញយ៉ាងច្បាស់ - សម្រាប់ការបញ្ចូលនីមួយៗយើងត្រូវបង្កើតមុខងារដំណើរការចុចផ្ទាល់ខ្លួនរបស់យើង ហើយមុខងារទាំងនេះធ្វើស្ទើរតែដូចគ្នា។

ប្រសិនបើយើងមានធាតុបញ្ចូលចំនួន 10 យើងនឹងត្រូវបង្កើតមុខងារចំនួន 10 ដែលវាមិនងាយស្រួលនោះទេ។

ចូរសម្រួលកិច្ចការរបស់យើង៖ យើងនឹងបញ្ជូនលេខសម្គាល់ធាតុបច្ចុប្បន្នជាប៉ារ៉ាម៉ែត្រទៅមុខងារ។

ហើយជំនួសឱ្យមុខងារមួយចំនួនធំ អ្វីគ្រប់យ៉ាងនឹងត្រូវបានកាត់បន្ថយទៅជាមុខងារមួយ៖

មុខងារ func(id) ( var elem = document.getElementById(id); alert(elem.value); )

ទោះយ៉ាងណាក៏ដោយ ដំណោះស្រាយនេះនៅតែមានគុណវិបត្តិមួយ - ធាតុនីមួយៗនឹងត្រូវបញ្ចូលលេខសម្គាល់ផ្សេងគ្នា ដែលជាការរអាក់រអួលខ្លះផងដែរ។

ដូច្នេះ ទីបំផុត​សូម​ក្រឡេក​មើល​ជម្រើស​នៃ​ការ​ដោះស្រាយ​បញ្ហា​ដោយ​ប្រើ​វិធី​នេះ។ ចូរធ្វើវាដើម្បីឱ្យធាតុបញ្ចូលនីមួយៗនឹងបង្ហាញមាតិការបស់វានៅពេលចុច។ដើម្បីធ្វើដូចនេះយើងបញ្ជូនវត្ថុនេះជាប៉ារ៉ាម៉ែត្រទៅមុខងារដូចនេះ: func(this) ។

របស់​យើង​នេះ​ត្រូវ​បាន​ឆ្លង​កាត់​ជា​ប៉ារ៉ាម៉ែត្រ​អនុគមន៍ ហើយ​បញ្ចប់​ក្នុង​អថេរ​អេឡឹម។

ឥន្រ្ទិយ​នេះ​ប្រព្រឹត្ត​ទៅ​ដូច​ជា​ទទួល​បាន​តាម​វិធី​នេះ៖

ប៉ុន្តែអ្នកមិនចាំបាច់ទទួលវាតាមវិធីនេះទេ អ្វីគ្រប់យ៉ាងគឺរួចរាល់នៅទីនោះ ហើយអ្នកអាចប្រើវាបាន។ ឧទាហរណ៍ elem.value ចង្អុលទៅតម្លៃនៃការបញ្ចូលរបស់យើង ហើយដូច្នេះនៅលើ។ដូច្នេះ ខាងក្រោមនេះគឺជាដំណោះស្រាយដ៏សាមញ្ញបំផុតចំពោះបញ្ហារបស់យើង៖

មុខងារ func() ( var elem = document.getElementById("test"); elem.style.color = "red"; )

អ្នក​ក៏​មិន​អាច​បញ្ចូល​អថេរ elem ដែរ ប៉ុន្តែ build ខ្សែសង្វាក់វែងណាស់។.

ប្រធានបទពិតជាស្មុគស្មាញណាស់។ ប៉ុន្តែដូចដែលពួកគេនិយាយ អារក្សមិនគួរឱ្យខ្លាចដូចដែលវាត្រូវបានលាបពណ៌នោះទេ។ នេះគឺជាកន្លែងដែលខ្ញុំទទួលបានគ្រាប់ដ៏លំបាកបំផុត៖ កិច្ចការដ៏អស្ចារ្យនេះនៃ "ការគូរវា" ដែលអាចរំលាយបានតាមដែលអាចធ្វើទៅបាន ប៉ុន្តែមិនមែនជារឿងដើមទាំងស្រុងនោះទេ។ រហូតមកដល់ពេលនេះ ឯកសារទាំងអស់ដែលខ្ញុំបានអានមានទំនោរទៅមិនពិត ឬមានលក្ខណៈដើម។

អក្សរកាត់ DOM តំណាងឱ្យ គំរូវត្ថុឯកសារ(គំរូវត្ថុឯកសារ) ។

DOM គឺជាចំណុចប្រទាក់សរសេរកម្មវិធីសម្រាប់ការចូលប្រើខ្លឹមសារនៃឯកសារ HTML, XHTML និង XML ដែលតំណាងឱ្យស្លាក និងគុណលក្ខណៈ HTML, XHTML និង XML ក៏ដូចជារចនាប័ទ្ម CSS ជាវត្ថុសរសេរកម្មវិធី។ ទាំង JavaScript និងភាសាសរសេរកម្មវិធីគេហទំព័រផ្សេងទៀតដំណើរការជាមួយគំរូនេះ។

ប្រវត្តិបន្តិច

មាន 4 កម្រិត DOM (0, 1, 2 និង 3) ។

កម្រិត 0 (1996) រួមបញ្ចូលគំរូ DOM ដែលមានមុនកម្រិត 1។ ទាំងនេះគឺជាបណ្តុំសំខាន់ៗ៖ document.images, document.forms, document.layers និង document.all ។ ម៉ូដែលទាំងនេះមិនមែនជាលក្ខណៈផ្លូវការរបស់ DOM ដែលចេញផ្សាយដោយ W3C ទេ។ ផ្ទុយទៅវិញ ពួកគេតំណាងឱ្យព័ត៌មានអំពីអ្វីដែលមានមុនពេលដំណើរការស្តង់ដារចាប់ផ្តើម។

កម្រិត 1 (1997) ក៏រួមបញ្ចូលមុខងារជាមូលដ្ឋានសម្រាប់ដំណើរការឯកសារ XML៖ វិធីជាច្រើនដើម្បីធ្វើការជាមួយថ្នាំងបុគ្គល ធ្វើការជាមួយការណែនាំអំពីដំណើរការ XML ។ល។

លើសពីនេះទៀត DOM កម្រិត 1 មានចំណុចប្រទាក់ពិសេសមួយចំនួនដែលអាចគ្រប់គ្រងធាតុ HTML នីមួយៗ។ ឧទាហរណ៍ អ្នកអាចធ្វើការជាមួយតារាង HTML ទម្រង់ បញ្ជីជ្រើសរើស។ល។

DOM Level 2 (2002) បានបន្ថែមមុខងារថ្មីៗជាច្រើន។

ខណៈពេលដែល DOM កម្រិត 1 ខ្វះការគាំទ្រសម្រាប់ namespaces ចំណុចប្រទាក់ DOM កម្រិត 2 មានវិធីសាស្រ្តសម្រាប់ការគ្រប់គ្រង namespaces ដែលទាក់ទងនឹងតម្រូវការសម្រាប់ការតែង និងដំណើរការឯកសារ XML ។

លើសពីនេះទៀត DOM កម្រិត 2 គាំទ្រព្រឹត្តិការណ៍។

កម្រិត 2 គឺជាកម្រិតបច្ចុប្បន្ននៃការបញ្ជាក់ DOM ប៉ុន្តែ W3C ណែនាំផ្នែកខ្លះនៃការបញ្ជាក់កម្រិត 3 ។

DOM កម្រិតទី 3 គឺជាសេចក្តីព្រាងការងារនៃការបញ្ជាក់ដែលពង្រីកមុខងាររបស់ DOM កម្រិត 2 ។ លក្ខណៈពិសេសដ៏សំខាន់បំផុតមួយនៃកំណែនៃការបញ្ជាក់នេះគឺសមត្ថភាពក្នុងការធ្វើការជាមួយផ្នែកបន្ថែម DOM ជាច្រើន។

តើ "ចំណុចប្រទាក់កម្មវិធី" មានន័យដូចម្តេច?

ចំណុចប្រទាក់ពាក្យភាសាអង់គ្លេសអាចត្រូវបានបកប្រែជា "តំបន់ទំនាក់ទំនង" ។ កុំព្យូទ័រមួយអាចយល់បានតែពីរយ៉ាងគឺ ប៊ីតទទេ និងប៊ីតបំពេញ។ ភាសាដែលកុំព្យូទ័រ "និយាយ" អាចត្រូវបានគេគិតថាជាខ្សែអក្សរសូន្យ និងលេខដែលមិនចេះចប់ ដោយផ្តល់ចំនួនមិនកំណត់នៃបន្សំផ្សេងៗគ្នា។

កូដកម្មវិធីណាមួយគឺជាការបកស្រាយដែលអាចយល់បានចំពោះអ្នកសរសេរកម្មវិធីនៃ "សូន្យ និងលេខ" ដែលកុំព្យូទ័រដំណើរការ។ ដូច្នេះ ភាសាសរសេរកម្មវិធីណាមួយគឺជាចំណុចប្រទាក់មនុស្ស-ម៉ាស៊ីន។

កម្មវិធីរុករកដំណើរការដូចកម្មវិធីកុំព្យូទ័រផ្សេងទៀតដែរ។ ពួកគេបកស្រាយកូដ HTML, XML, CSS, JavaScript, PHP, Perl ជាដើម។ ទៅជា “សូន្យ និងមួយ”។ ដើម្បីដោះស្រាយជាមួយពហុភាសានេះ វេទិកាទូទៅគឺចាំបាច់។ វេទិកានេះគឺជា DOM - ការបញ្ជាក់ដែលមិនអាស្រ័យលើភាសាសរសេរកម្មវិធីជាក់លាក់ ឬសញ្ញាសម្គាល់។ វាគឺជាចំណុចប្រទាក់ដែលអាចប្រើបានជាភាសាសរសេរកម្មវិធីដ៏ពេញនិយមជាច្រើនដែលទាក់ទងនឹងការបង្កើតគេហទំព័រ និងមានសមត្ថភាពយល់ និងបកស្រាយវត្ថុ DOM ។

DOM និងកម្មវិធីរុករក

DOM និង JavaScript

នៅក្នុង JavaScript ផ្នែកខាងលើនៃជណ្ដើរឋានានុក្រមនៃវត្ថុ DOM ដែលជាប្រភេទនៃ " conductor" ទៅកាន់ចំណុចប្រទាក់នេះគឺជាវត្ថុឯកសារ ហើយវត្ថុ DOM ក្លាយជាលក្ខណៈសម្បត្តិរបស់វា លក្ខណៈសម្បត្តិនៃលក្ខណៈសម្បត្តិរបស់វា។ល។ ពួកគេត្រូវបានគេហៅថាថ្នាំង DOM ផងដែរ។

មានថ្នាំង 12 ប្រភេទនៅក្នុង DOM កម្រិត 2 ។ ប្រភេទថ្នាំង DOM នីមួយៗត្រូវបានផ្តល់តម្លៃថេរដែលមានឈ្មោះតែមួយគត់។ ថ្នាំងភាគច្រើនត្រូវបានរចនាឡើងដើម្បីធ្វើការជាមួយ XML ។ នៅក្នុង HTML - JavaScript assembly ដែលយើងកំពុងធ្វើ មានតែ 5 ប្រភេទប៉ុណ្ណោះដែលអាចប្រើបាន។ ប៉ុន្តែសូម្បីតែ "ចុងនៃផ្ទាំងទឹកកក" នេះក៏ជា "ដើមឈើរីករាលដាល" ដែលមិនអាចត្រូវបានគ្របដណ្តប់នៅក្នុងមេរៀនមួយឬពីរ។

សំណុំពេញលេញនៃថេរប្រភេទថ្នាំងដែលបានកំណត់នៅក្នុងការបញ្ជាក់ W3C DOM (ថ្នាំងដែលមានសម្រាប់ HTML - JavaScript ត្រូវបានបន្លិចជាពណ៌ខៀវ)៖

* Notations គឺជាឈ្មោះដែលកំណត់ទ្រង់ទ្រាយនៃផ្នែកដែលមិនបានញែក ទម្រង់នៃធាតុដែលមានគុណលក្ខណៈ notation ឬកម្មវិធីកម្មវិធីដែលការណែនាំត្រូវបានដោះស្រាយ។

(មិនច្បាស់ទេ? ខ្ញុំមិនប្រាកដពេកទេ។ )

រចនាសម្ព័ន្ធឯកសារនៅក្នុង DOM

បឋមកថា DOM

អត្ថបទកថាខណ្ឌ

នេះគឺជាដ្យាក្រាមនៃមែកធាង DOM របស់វា៖

ថ្នាំងនីមួយៗអាចមានថ្នាំងកូន (ព្រួញនាំទៅរកពួកវាក្នុងដ្យាក្រាម)។ វត្ថុឯកសារ - មូលដ្ឋាននៃមែកធាងឯកសារ - ក៏ជាថ្នាំងដែរ ប៉ុន្តែវាមិនមានថ្នាំងមេ ហើយមានលក្ខណៈសម្បត្តិ និងវិធីសាស្ត្រមួយចំនួនដែលថ្នាំងផ្សេងទៀតមិនមាន។ វាមានថ្នាំងកូនតែមួយ៖ ធាតុ។

ធាតុមួយមានថ្នាំងកូនពីរ៖ ហើយដែលធាតុទាំងអស់ដែលមាននៅក្នុងពួកវាក្លាយជាកូន។

យកចិត្តទុកដាក់!

បឋមកថា DOM

"ធាតុ" និង "ស្លាក" មិនមានន័យដូចគ្នាទេ។ ស្លាកគឺជាសញ្ញាសម្គាល់៖ - នេះគឺជាស្លាកពីរផ្សេងគ្នា។ ហើយធាតុមួយគឺជាវត្ថុដែលត្រូវបានសម្គាល់ដោយស្លាកទាំងនេះ៖

ធាតុ, និង

មានអត្ថបទនៅខាងក្នុង។ ទាំងនេះគឺជាថ្នាំងអត្ថបទកូនរបស់ពួកគេ។ ធាតុក៏មានគុណលក្ខណៈផងដែរ៖ align="center" ។ ថ្នាំងគុណលក្ខណៈក៏ជាថ្នាំងកូននៃធាតុដែលមានពួកវាផងដែរ។

លក្ខណៈសម្បត្តិមួយចំនួនរបស់ថ្នាំង

ការណែនាំតូច

ខ្ញុំនិយាយម្តងទៀត៖ នៅពេលយើងចូលប្រើធាតុទំព័រនៅក្នុងស្គ្រីប យើងកំពុងដោះស្រាយមិនត្រឹមតែជាមួយភាសា Javascript ប៉ុណ្ណោះទេ ប៉ុន្តែក៏មានចំណុចប្រទាក់ DOM ដែលបានបង្កប់នៅក្នុងវាផងដែរ។ ពេល​ខ្លះ​អ្នក​ត្រូវ​ដឹង​ពី​ចំណុច​នេះ ពេល​ខ្លះ​អ្នក​អាច​ភ្លេច​ថា "យើង​កំពុង​និយាយ​ក្នុង​ពាក្យ​សំដី"។

យើងបានប្រើលក្ខណសម្បត្តិ និងវិធីសាស្រ្តមួយចំនួនរួចហើយពីគំរូវត្ថុ DOM តាមវិធីនេះ។ ដូច្នេះ ពីពេលមួយទៅពេលមួយ ខ្ញុំនឹងផ្តល់តំណភ្ជាប់ទៅកាន់មេរៀនមុនៗ។

នៅក្នុងមេរៀននេះ យើងនឹងមិនទៅផ្លូវ "សិក្សា" ដោយពិចារណាលើលក្ខណៈសម្បត្តិទាំងអស់នៃ nodes នៅក្នុងកម្មវិធីរុករកទាំងអស់។ ជាដំបូង ចូរយើងស្គាល់នូវការអនុវត្តជាក់ស្តែងបំផុត និង "គ្មានជម្លោះ" នៃពួកគេ។

នោះហើយជាមូលហេតុដែលយើងនឹងមិនចាប់ផ្តើមដូចទម្លាប់ជាមួយនឹង "លក្ខណៈសម្បត្តិចម្បង": nodeName និង nodeValue ។

ឈ្មោះស្លាក

ត្រឡប់ខ្សែអក្សរដែលមានឈ្មោះស្លាករបស់ធាតុ។ តម្លៃ tagName ទាំងអស់មានអក្សរធំតែប៉ុណ្ណោះ។

.tagName

ឧទាហរណ៍

សាកល្បងលក្ខណសម្បត្តិ tagName document.write(document.getElementById("testTagName"

ឈ្មោះស្លាក)

លទ្ធផល

សាកល្បងលក្ខណសម្បត្តិ tagName

ខាងក្នុង HTML

ផ្តល់សិទ្ធិចូលប្រើមាតិកានៃធាតុ។ បញ្ជាក់មិនត្រឹមតែមាតិកាអត្ថបទប៉ុណ្ណោះទេ ប៉ុន្តែក៏មានស្លាក HTML ទាំងអស់ដែលមានទីតាំងនៅខាងក្នុងធាតុផងដែរ។

ទ្រព្យសម្បត្តិនេះមិនត្រឹមតែសម្រាប់ការអានប៉ុណ្ណោះទេ ប៉ុន្តែថែមទាំងសម្រាប់ការផ្លាស់ប្តូរខ្លឹមសារផងដែរ។

ចំណាំ

នៅក្នុង IE, innerHTML គឺបានតែអានសម្រាប់ធាតុមួយចំនួន: ទាំងនេះគឺជាធាតុតារាងទាំងអស់ លើកលែងតែ និង ក៏ដូចជា និង .

ជាឧទាហរណ៍ យើងបានបង្កើតតារាងទទេដោយគ្មានធាតុ ហើយយើងចង់បញ្ចូលវាទៅក្នុងកម្មវិធី តាមរយៈ innerHTML:

IE នឹងបោះចោល "កំហុសពេលដំណើរការមិនស្គាល់" ហើយកម្មវិធីរុករកផ្សេងទៀតនឹងធ្វើការបិទភ្ជាប់។

ក្នុងពេលជាមួយគ្នានេះ ប្រសិនបើយើងសួរមាតិកាដែលមានស្រាប់នៃធាតុមួយ។ ឧទាហរណ៍ តាមរយៈ alert(document.getElementById("id").innerHTML) បន្ទាប់មកវានឹងដំណើរការនៅក្នុង IE។

ត្រឡប់ខ្សែអក្សរដែលមានឈ្មោះស្លាករបស់ធាតុ។ តម្លៃ tagName ទាំងអស់មានអក្សរធំតែប៉ុណ្ណោះ។

.tagName

សាកល្បងលក្ខណៈសម្បត្តិ HTML ខាងក្នុង

កថាខណ្ឌដែលត្រូវបញ្ចូល

ឧបករណ៍សំខាន់សម្រាប់ដំណើរការ និងការផ្លាស់ប្តូរថាមវន្តនៅលើទំព័រគឺ DOM (គំរូវត្ថុឯកសារ) - គំរូវត្ថុដែលប្រើសម្រាប់ឯកសារ XML/HTML ។

យោងតាមគំរូ DOM ឯកសារគឺជាឋានានុក្រម។
ស្លាក HTML នីមួយៗបង្កើតជាធាតុថ្នាំងដាច់ដោយឡែក បំណែកនៃអត្ថបទនីមួយៗបង្កើតជាធាតុអត្ថបទ។ល។

និយាយឱ្យសាមញ្ញ DOM គឺជាតំណាងនៃឯកសារជាមែកធាងនៃស្លាក។ មែកធាងនេះត្រូវបានបង្កើតឡើងដោយរចនាសម្ព័ន្ធដាក់គ្នានៃស្លាក បូកនឹងបំណែកអត្ថបទនៃទំព័រ ដែលនីមួយៗបង្កើតបានជាថ្នាំងដាច់ដោយឡែក។

ដំបូងយើងបង្កើតមែកធាង DOM សម្រាប់ឯកសារបន្ទាប់។

ចំណងជើង៖ ឯកសារដ៏អស្ចារ្យ

ស្លាកខាងក្រៅបំផុតគឺ ដូច្នេះដើមឈើចាប់ផ្តើមដុះពីទីនោះ។

មានថ្នាំងពីរនៅខាងក្នុង៖ និង - ពួកគេក្លាយជាថ្នាំងកូនរបស់ .

ទម្រង់ស្លាក ថ្នាំងធាតុ(ថ្នាំងធាតុ) ។ អត្ថបទបង្ហាញ ថ្នាំងអត្ថបទ(ថ្នាំងអត្ថបទ) ។ ទាំងពីរគឺជាថ្នាំងស្មើគ្នានៅក្នុងមែកធាង DOM ។

ឥឡូវ​នេះ​សូម​មើល​ទំព័រ​សំខាន់​ជាង​នេះ៖

អំពី moose ការពិតអំពី moose ។

ធាតុដើមនៃឋានានុក្រមគឺ html ។ គាត់មានកូនចៅពីរនាក់។ ទីមួយគឺក្បាល ទីពីរគឺរាងកាយ។ ហើយដូច្នេះនៅលើ ស្លាកនីមួយៗគឺជាកូននៃស្លាកខាងលើ៖

នៅក្នុងតួលេខនេះ ពណ៌ខៀវបង្ហាញពីធាតុថ្នាំង ពណ៌ខ្មៅបង្ហាញពីធាតុអត្ថបទ។

មែកធាងត្រូវបានបង្កើតឡើងដោយធាតុថ្នាំងពណ៌ខៀវ - ស្លាក HTML ។

ហើយនេះគឺជាអ្វីដែលដើមឈើមើលទៅប្រសិនបើអ្នកពណ៌នាវាដោយផ្ទាល់នៅលើទំព័រ HTML៖

ដោយវិធីនេះ មែកធាងនៅក្នុងតួលេខនេះមិនគិតពីអត្ថបទដែលមានតែតួអក្សរដកឃ្លាទេ។ ឧទាហរណ៍ ថ្នាំងអត្ថបទបែបនេះគួរតែមកភ្លាមៗបន្ទាប់ពី . DOM ដែលមិនមានថ្នាំង "ទទេ" បែបនេះត្រូវបានគេហៅថា "ធម្មតា".

សូមក្រឡេកមើលឯកសារស្មុគស្មាញបន្តិច។

ទិន្នន័យឯកសារ

• ដោយប្រុងប្រយ័ត្ន
• ព័ត៌មាន

ស្លាកកំពូលគឺ html វាមានក្បាល និងដងខ្លួនរបស់កុមារ។ល។ នេះ​ជា​លទ្ធផល​នៅ​ក្នុង​មែកធាង​ស្លាក:

គុណលក្ខណៈ

ក្នុងឧទាហរណ៍នេះ ថ្នាំងមានគុណលក្ខណៈដូចខាងក្រោម៖ រចនាប័ទ្ម ថ្នាក់ លេខសម្គាល់។ និយាយជាទូទៅ គុណលក្ខណៈក៏ត្រូវបានចាត់ទុកជាថ្នាំងនៅក្នុង DOM ដែលមេគឺជាធាតុ DOM ដែលពួកវាត្រូវបានបញ្ជាក់។

ទោះជាយ៉ាងណាក៏ដោយ នៅក្នុងការសរសេរកម្មវិធីតាមគេហទំព័រ ជាធម្មតាពួកគេមិនបានចូលទៅក្នុងព្រៃនេះទេ ហើយចាត់ទុកគុណលក្ខណៈជាលក្ខណសម្បត្តិធម្មតារបស់ថ្នាំង DOM ដែលដូចដែលយើងនឹងឃើញនៅពេលក្រោយ អាចកំណត់ និងផ្លាស់ប្តូរតាមការស្នើសុំរបស់អ្នកសរសេរកម្មវិធី។

តាមពិតនេះគឺជាការសម្ងាត់ ប៉ុន្តែ DOCTYPE ក៏ជាថ្នាំង DOM ផងដែរ ហើយមានទីតាំងនៅក្នុងមែកធាង DOM នៅខាងឆ្វេងនៃ HTML (ការពិតនេះត្រូវបានលាក់នៅក្នុងរូបភាព)។

P.S. វាជារឿងកំប្លែងអំពីអាថ៌កំបាំង ប៉ុន្តែមិនមែនគ្រប់គ្នាពិតជាដឹងអំពីវានោះទេ។ ពិបាក​គិត​ថា​តើ​ចំណេះ​ដឹង​បែប​នេះ​មាន​ប្រយោជន៍​ដល់​ណា...

នៅពេលញែក HTML Internet Explorer បង្កើតភ្លាមៗ ធម្មតា DOM ដែលថ្នាំងមិនត្រូវបានបង្កើតពីអត្ថបទទទេ។

Firefox មានមតិផ្សេងគ្នា វាបង្កើតធាតុ DOM ពីបំណែកអត្ថបទនីមួយៗ។
ដូច្នេះនៅក្នុង Firefox មែកធាងនៃឯកសារនេះមើលទៅដូចនេះ៖

នៅក្នុងរូបភាព សម្រាប់ភាពខ្លី ថ្នាំងអត្ថបទត្រូវបានចង្អុលបង្ហាញយ៉ាងសាមញ្ញដោយសញ្ញា។ រាងកាយមានកូន 7 នាក់ជំនួសឱ្យ 3 ។

ល្ខោនអូប៉េរ៉ាក៏មានអ្វីដែលត្រូវអួតផងដែរ។ នាង​អាច​បន្ថែម​ធាតុ​ទទេ​បន្ថែម "គ្រាន់តែ​ពី​ខ្លួន​នាង​ផ្ទាល់"។

ដើម្បីមើលវា សូមបើកឯកសារ។ វាត្រឡប់ចំនួនថ្នាំងកូនរបស់ document.body រួមទាំងថ្នាំងអត្ថបទ។

ខ្ញុំទទួលបាន 3 សម្រាប់ IE, 7 សម្រាប់ Firefox និង 8 (!?) សម្រាប់ Opera ។

នៅក្នុងការអនុវត្ត ភាពមិនឆបគ្នានេះមិនបង្កើតបញ្ហាធំនោះទេ ប៉ុន្តែអ្នកត្រូវដឹងអំពីវា។ ជាឧទាហរណ៍ ភាពខុសគ្នាអាចបង្ហាញដោយខ្លួនវានៅក្នុងករណីនៃការរាប់បញ្ចូលថ្នាំងមែកធាង។

ហេតុអ្វីបានជាក្រៅពីគំនូរដ៏ស្រស់ស្អាត តើយើងត្រូវការ DOM ឋានានុក្រមដែរឬទេ?

សាមញ្ញណាស់៖

ធាតុ DOM នីមួយៗគឺជាវត្ថុមួយ និងផ្តល់នូវលក្ខណៈសម្បត្តិសម្រាប់រៀបចំមាតិការបស់វា សម្រាប់ការចូលប្រើឪពុកម្តាយ និងកូន។

វត្ថុឯកសារត្រូវបានប្រើសម្រាប់ការរៀបចំ DOM ។
ដោយប្រើឯកសារ អ្នកអាចទទួលបានធាតុមែកធាងដែលចង់បាន និងផ្លាស់ប្តូរខ្លឹមសាររបស់វា។

ឧទាហរណ៍ កូដនេះយកធាតុទីមួយជាមួយស្លាក ol យកធាតុបញ្ជីពីរតាមលំដាប់លំដោយ ហើយបន្ទាប់មកបន្ថែមពួកវាតាមលំដាប់បញ្ច្រាស៖

Var ol = document.getElementsByTagName("ol") var hiter = ol.removeChild(ol.firstChild) var kovaren = ol.removeChild(ol.firstChild) ol.appendChild(kovaren) ol.appendChild(hiter)

សម្រាប់ឧទាហរណ៍អំពីរបៀបដែលស្គ្រីបនេះដំណើរការ សូមចុចលើអត្ថបទនៅលើទំព័រ moose

នៅក្នុងមេរៀនចាស់ និងស្គ្រីប អ្នកអាចឃើញការកែប្រែកូដ HTML នៃទំព័រមួយដោយផ្ទាល់ដោយហៅទៅកាន់ document.write ។

នៅក្នុងស្គ្រីបសម័យទំនើប វិធីសាស្រ្តនេះស្ទើរតែមិនដែលប្រើទេ ករណីនៃការប្រើប្រាស់ត្រឹមត្រូវរបស់វាអាចត្រូវបានរាប់នៅលើដៃមួយ។

ជៀសវាង document.write.. លើកលែងតែនៅពេលដែលអ្នកពិតជាដឹងពីអ្វីដែលអ្នកកំពុងធ្វើ (ហេតុអ្វីអ្នកកំពុងអានការបង្រៀនអញ្ចឹង - អ្នកគឺជាគ្រូម្នាក់រួចទៅហើយ)

សូមក្រឡេកមើលឱ្យកាន់តែដិតដល់នូវវិធីសាស្ត្រចូលប្រើ និងលក្ខណៈសម្បត្តិនៃធាតុ DOM ។

ការចូលប្រើ និងការកែប្រែ DOM ទាំងអស់មានប្រភពចេញពីវត្ថុឯកសារ។

ចូរចាប់ផ្តើមនៅលើកំពូលនៃដើមឈើ។

ស្លាកកំពូល។ ក្នុងករណីទំព័រ HTML ត្រឹមត្រូវ វានឹងជា .

ស្លាកប្រសិនបើមានវត្តមាននៅក្នុងឯកសារ (ត្រូវតែមាន) ។

ឧទាហរណ៍ខាងក្រោម នៅពេលដែលប៊ូតុងមួយត្រូវបានចុច វានឹងបង្កើតជាតំណាងអត្ថបទនៃវត្ថុ document.documentElement និង document.body ។ ខ្សែអក្សរខ្លួនឯងអាស្រ័យលើកម្មវិធីរុករក ទោះបីជាវត្ថុដូចគ្នានៅគ្រប់ទីកន្លែងក៏ដោយ។

មុខងារ go() ( alert(document.documentElement) alert(document.body))

ធាតុនីមួយៗនៅក្នុង DOM មានប្រភេទ។ លេខរបស់វាត្រូវបានរក្សាទុកក្នុងគុណលក្ខណៈ elem.nodeType

សរុបមក មានធាតុ 12 ប្រភេទនៅក្នុង DOM ។

ជាធម្មតាមានតែមួយប៉ុណ្ណោះដែលត្រូវបានប្រើប្រាស់៖ Node.ELEMENT_NODE ដែលលេខរបស់វាគឺ 1។ ធាតុនៃប្រភេទនេះត្រូវនឹងស្លាក HTML ។

ពេលខ្លះប្រភេទ Node.TEXT_NODE ក៏មានប្រយោជន៍ផងដែរ ដែលស្មើនឹង 3. ទាំងនេះគឺជាធាតុអត្ថបទ។

ប្រភេទផ្សេងទៀតមិនត្រូវបានប្រើក្នុងការសរសេរកម្មវិធី javascript ទេ។

ឧទាហរណ៍ខាងក្រោម នៅពេលចុចលើប៊ូតុងមួយ នឹងបោះពុម្ពប្រភេទ document.documentElement ហើយបន្ទាប់មកជាប្រភេទកូនចុងក្រោយនៃ node document.body។ នេះគឺជាថ្នាំងអត្ថបទ។

មុខងារ go() ( alert(document.documentElement.nodeType) alert(document.body.lastChild.nodeType) ) អត្ថបទ

ឧទាហរណ៍ នេះ​ជា​អ្វី​ដែល​ឯកសារ​ពី​ឧទាហរណ៍​ខាង​លើ​នឹង​មើល​ទៅ​ដូច​ជា​ក្នុង​កម្មវិធី​រុករក​ប្រសិន​បើ​ធាតុ​ដែល​មើល​ឃើញ​នីមួយៗ​ត្រូវ​បាន​ហ៊ុំ​ព័ទ្ធ​ដោយ​ស៊ុម​ដែល​មាន​លេខ nodeType នៅ​ជ្រុង​ខាង​លើ​ខាង​ស្ដាំ។

...ទិន្នន័យ

• ដោយប្រុងប្រយ័ត្ន
• ព័ត៌មាន

មានតែធាតុខាងក្នុងប៉ុណ្ណោះដែលត្រូវបានបង្ហាញនៅទីនេះ ព្រោះវាជាធាតុតែមួយគត់ដែលត្រូវបានបង្ហាញនៅលើទំព័រ។ សម្រាប់ធាតុនៃប្រភេទទី 1 (ស្លាក) ស្លាកដែលត្រូវគ្នាត្រូវបានចង្អុលបង្ហាញនៅក្នុងតង្កៀប;