დოკუმენტის ობიექტის მოდელი, ან "DOM", არის პროგრამირების ინტერფეისი ვებ გვერდის ელემენტებზე წვდომისთვის. Იდეაში, გვერდითი API, რომელიც საშუალებას გაძლევთ წაიკითხოთ და მანიპულიროთ გვერდის მოცულობაზე, სტრუქტურასა და სტილზე. მოდით გაერკვნენ, თუ როგორ კეთდება ეს და როგორ გამოიყენება.

როგორ იმუშავებს ვებ გვერდი?

გამომავალი HTML დოკუმენტის რენდერირებად, სტილისტურ და ინტერაქტიულ მხარედ გადაქცევის პროცესს ეწოდება "კრიტიკული რენდერის გზა". თუ მთელი პროცესი შეიძლება დაიყოს რამდენიმე ეტაპად, როგორც ეს აღვწერე სტატიაში „გაცნობა კრიტიკული გადაცემის გზაზე“, საფეხურები შეიძლება გონებრივად დაიყოს ორ ეტაპად. პირველ ბრაუზერში ხდება დოკუმენტის ანალიზი, რომელიც განსაზღვრავს, თუ რა იქნება ნაჩვენები გვერდით ბოლო ჩანთაში, ხოლო მეორე ბრაუზერში მოხდება მისი რენდერი.

პირველი ეტაპის შედეგია ის, რასაც "რენდერის ხე" ჰქვია. გაწევა ხე- HTML ელემენტების tse მანიფესტაციები, როგორც ისინი გამოჩნდება გვერდით, და მათთან დაკავშირებული სტილები. ხის გამოსაწვევად ბრაუზერს ორი სიტყვა სჭირდება:

1. CSSOM, ელემენტებთან დაკავშირებული სტილის განსაზღვრა
2. DOM, ელემენტის დეკლარაცია

რატომ არის შექმნილი DOM?

DOM არის გამომავალი HTML დოკუმენტის ობიექტი. Vіdmіnnostі deyakі vіdmіnnostі, yak Mо Bachimo ქვედა, ასევე არსებითად არის სტრუქტურის გარდაქმნა და HTML დოკუმენტის ობიექტურ მოდელში დაბინავება, შეგიძლიათ ბაჩიტი სხვადასხვა პროგრამებია.

DOM ობიექტების სტრუქტურა წარმოდგენილია იმით, რასაც ეწოდება "კვანძის ხე". მას ასე ეძახიან, ისე, რომ ის ჩანს, როგორც ხე ერთი ბატკივის ელემენტით, რომელიც როზგალუჟუეცია ქალიშვილების შპრიცზე, რომლის კანი შეიძლება იყოს დედა ფოთოლი. ამგვარად, ბატკივის „ელემენტი“ არის ძირეული ელემენტი, ქალიშვილი „ღრძილები“ ​​ელემენტების წვლილი, ხოლო „ფოთლები“ ​​იგივეა ელემენტების შუაში.

მოდით შევხედოთ ამ HTML დოკუმენტს, როგორც მაგალითი:

Გამარჯობა მსოფლიო!

Როგორ ხარ?

ეს დოკუმენტი შეიძლება წარმოდგენილი იყოს შეურაცხმყოფელი კვანძის ხის სახით:

• html
  • თავი
    • სათაური
      • ჩემი პირველი ვებ გვერდი
  • სხეული
    • h1
      • Გამარჯობა მსოფლიო!
    • გვ
      • Როგორ ხარ?

Chim DOM არა є

ჰოვერირებულ აპლიკაციას ეცნობა, რომ DOM არის გაანალიზებული გამომავალი HTML დოკუმენტის 1:1. თუმცა, როგორც უკვე ვთქვი, არსებობს დარწმუნება. იმისათვის, რომ გავიგოთ რა არის DOM, ჩვენ უნდა შევხედოთ მათ, ვინც არ არის.

DOM არ არის გამომავალი HTML-ის ასლი

თუ გსურთ DOM შემოქმედება HTML დოკუმენტიდან, ის ყოველთვის არ უნდა იყოს ზუსტად იგივე. არსებობს ორი გზა, რომლითაც DOM შეგიძლიათ ნახოთ გამომავალი HTML.

1. თუ HTML არის შურისძიება მარკირების შეწყალების გამო

DOM არის ინტერფეისი HTML დოკუმენტის რეალურ (რომელიც უკვე რენდერია) ელემენტებზე წვდომისთვის. DOM-ის შექმნის პროცესში, თავად ბრაუზერს შეუძლია შეასწოროს შეწყალება HTML კოდში.

მოდით შევხედოთ მას, როგორც HTML დოკუმენტის მაგალითი:

Გამარჯობა მსოფლიო!

დოკუმენტებს აქვს ყოველდღიური ელემენტები і , Რა არის obov'yazykovoy vymogoyu HTML-ისთვის. თუმცა, თუ გაგვიკვირდება, რა გამოვიდა DOM ხე, მაშინ ვნახოთ, რა დაფიქსირდა:

• html
  • თავი
  • სხეული
    • Გამარჯობა მსოფლიო!

  2. როდესაც DOM იცვლება Javascript კოდით

  გარდა ამისა, DOM არის ინტერფეისი თავად HTML დოკუმენტის ხელახლა მოსანახულებლად, მაგრამ ის ასევე შეიძლება შეიცვალოს.

  ჩვენ შეგვიძლია, მაგალითად, შევქმნათ დამატებითი კვანძები DOM-ისთვის Javascript-ის გამოყენებით.

  var newParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("მე" ახალი ვარ!");newParagraph.appendChild(paragraphContent);document.body.appendChild(newParagraph);

  შეცვალეთ ეს კოდი DOM-ზე, წინააღმდეგ შემთხვევაში შეცვალეთ ის ისე, რომ არ იყოს ნაჩვენები HTML დოკუმენტები.

  DOM - არა ის, რომელსაც აწარმოებთ ბრაუზერში (ეს არის რენდერის ხე)

  ბრაუზერის მიმოხილვის ბოლოს, თქვენ გაქვთ რენდერის ხე, როგორიცაა, როგორც ადრე ვთქვი, DOM-ისა და CSSOM-ის კომბინაცია. როგორ გამოიყურება DOM რენდერის ხეს, ასე რომ, ის, რაც რჩება, არის მხოლოდ ისინი, რომლებიც გამოჩნდება ეკრანზე ბოლო ჩანთაში.

  რენდერის ხე შეიძლება შეიცვალოს მხოლოდ მის გაფორმებამდე, მაგრამ ის გამორიცხავს ელემენტებს, რომლებიც ვიზუალურად არის მიმაგრებული. მაგალითად, ელემენტები, ზოგიერთი є სტილისთვის z ჩვენება: არცერთი.

  Გამარჯობა მსოფლიო!

  Როგორ ხარ?

  DOM შეიცავს ელემენტს

  • html
    • თავი
    • სხეული
      • h1
        • Გამარჯობა მსოფლიო!
      • გვ
        • Როგორ ხარ?

  თუმცა, რენდერის ხე და, მაშასადამე, ის, რაც მომდევნო მიმოხილვაში ჩანს, არ შედის მთელ ელემენტში.

  • html
    • სხეული
      • h1
        • Გამარჯობა მსოფლიო!

  DOM - არა ის, რაც ნაჩვენებია DevTools-ში

  ეს განსხვავება სამჯერ უფრო მცირეა, ამიტომ DevTools Element Inspector უზრუნველყოფს DOM-თან უფრო ახლოს სიახლოვეს, როგორც ეს შეგვიძლია ბრაუზერში. თუმცა, DevTools ინსპექტორი მოიძიებს დამატებით ინფორმაციას, რომელიც არ არის DOM-ში.

  ამის მოკლე მაგალითია CSS ფსევდოელემენტები. ფსევდოელემენტები, შექმნილი ცვლადის სელექტორებისგან :: ადრეі :: შემდეგ, CSSOM-ისა და რენდერის ხის ნაწილი, მაგრამ ტექნიკურად არა DOM-ის ნაწილი. ეს გამოწვეულია იმით, რომ DOM იქმნება მხოლოდ გამომავალი HTML დოკუმენტიდან, ელემენტზე მიმაგრებული სტილის გარეშე.

  მიუხედავად იმ ფსევდოელემენტებისა, რომლებიც არ არის DOM-ის ნაწილი, სურნელებაა ჩვენს ელემენტის ინსპექტორის დევტოოლებში.

  
  

  შემაჯამებელი

  DOM არის HTML დოკუმენტის ინტერფეისი. Vіn vikoristovuєtsya ბრაუზერების მიერ, როგორც პირველი ნაკაწრი აღნიშვნისთვის, თუ რა უნდა ვიზუალურად ვიზუალურად შეიცვალოს შემდეგ მიმოხილვაში, და Javascript კოდი შეიცვალოს ადგილზე, სტრუქტურა ან სტილი გვერდი.

DOM-ს ხშირად მოიხსენიებენ როგორც DOM ხეს, ხოლო ნაწილები შედგება ობიექტების ხისგან, რომელსაც ეწოდება კვანძები. თქვენ გაიგეთ, რომ Document Object Model (DOM) იძლევა წვდომას დოკუმენტის ობიექტზე და ცვლის მის ავტორიტეტს დახმარების კონსოლზე, ასევე განსხვავებას HTML და DOM კოდებს შორის.

ამ სახელმძღვანელოში თქვენ გეცოდინებათ HTML-ის ტერმინოლოგია, რომელიც აუცილებელია JavaScript-თან და DOM-თან მუშაობისთვის, თქვენ გეცოდინებათ რა არის DOM ხე და კვანძები და გაიგებთ, თუ როგორ უნდა განსაზღვროთ ყველაზე ფართო ტიპის კვანძები. თქვენ ასევე შეგიძლიათ შექმნათ JavaScript პროგრამა კონსოლში DOM-ის ინტერაქტიულად რედაქტირებისთვის.

ტერმინოლოგია HTML

HTML და JavaScript ტერმინების გაგება მნიშვნელოვანია DOM-თან მუშაობისთვის. მოკლედ მიმოვიხილოთ ძირითადი ტერმინები.

შეხედეთ მოცემულ HTML ელემენტს:

მთავარი

ახალ წამყვანს აქვს ყოფნა, რომელიც იგზავნება index.html-ზე.

• a - ტეგი
• href - ატრიბუტი
• html - ატრიბუტის მნიშვნელობა
• მთავარი - ტექსტი.

ყველაფერი, რაც შეიძლება მოიძებნოს ტეგებს შორის და დაიხუროს ტეგებით, ხდება HTML ელემენტი.

მოდით მივმართოთ index.html ფაილს წინა სახელმძღვანელოდან:

დოკუმენტის ობიექტის მოდელი

JavaScript-ში ელემენტზე წვდომის უმარტივესი გზა არის id ატრიბუტი. მოდით დავამატოთ ახალი ჩანაწერი index.html ფაილში id = "nav".

...

დოკუმენტის ობიექტის მოდელი

მთავარი

...

მიიღეთ (ან განაახლეთ) ბრაუზერის ფანჯრის მხარე და შეხედეთ DOM-ს, რათა გადახედოთ რა არის განახლების კოდი.

შემდეგ შეცვალეთ getElementById() მეთოდი მთელ ელემენტზე წვდომისთვის. კონსოლში შეიყვანეთ შემდეგი:

document.getElementById("nav");
მთავარი

getElementById() მეთოდი იღებს მთელ ელემენტს. ახლა ამ ობიექტისა და კანის მეთოდის ერთხელ შეყვანის ნაცვლად, თუ თქვენ გჭირდებათ წვდომა nav ფაილზე, შეგიძლიათ ელემენტის ჩასმა ცვლილებაში, რათა გაგიადვილოთ მასთან მუშაობა.

მოდით navLink = document.getElementById("nav");

Minliva navLink შურისძიების წამყვანი. აქ შეგიძლიათ მარტივად შეცვალოთ ამ მნიშვნელობის ატრიბუტები. მაგალითად, შეტყობინების დანიშნულების შესაცვლელად, შეცვალეთ href ატრიბუტი:

navLink.href = "https://www.wikipedia.org";

თქვენ ასევე შეგიძლიათ შეცვალოთ ტექსტი, გადაანაწილოთ ტექსტის კონტენტის ძალა:

navLink.textContent = "ნავიგაცია ვიკიპედიაში";

ახლა, როდესაც შეხედეთ ამ ელემენტს კონსოლში, ან დააკვირდით Elements ტეგს, ხედავთ, რომ ის განახლებულია.

ნავილინკი;
გადადით ვიკიპედიაში

ცვლილება გარეგნულად და წინა მხარეს.

განაახლეთ გვერდის მხარე ყველა გამომავალი მნიშვნელობის გადასაქცევად.

ნებისმიერ ეტაპზე, თქვენ უნდა გესმოდეთ, როგორ შეცვალოთ დოკუმენტის მეთოდი ელემენტზე წვდომისთვის, როგორ შეიტანოთ ელემენტი და როგორ შეცვალოთ ელემენტის სიმძლავრე და მნიშვნელობა.

ხე და კვანძები DOM

DOM-ში ყველა ელემენტი გამოსახულია კვანძებად. გამოიყენეთ კვანძების უპიროვნო ტიპები, მაგრამ არსებობს სამი ძირითადი, რომლებთანაც ყველაზე ხშირად იმუშავებთ:

1. ვუზოლის ელემენტი
2. ტექსტი wuzol
3. ვუზოლის კომენტარი

როდესაც HTML ელემენტი არის ელემენტი DOM-ში, მას ეწოდება ელემენტის კვანძი. იყავით ერთი ტექსტური pos ელემენტი є ტექსტის კვანძი და HTML კომენტარი- კომენტარის კვანძი. არსებობს სამი სახის კვანძი, თავად დოკუმენტის ობიექტი არის დოკუმენტის კვანძი, რომელიც არის ყველა სხვა კვანძის ძირეული კვანძი.

DOM შედგება ჩადგმული კვანძების ხის სტრუქტურისგან, რომელსაც ხშირად უწოდებენ DOM ხეს. თქვენ ნამდვილად იცით, რა არის გენეალოგიური ხე - ის უფრო სქემატურად ვლინდება ოჯახური კავშირებით, როგორც მამებისგან, შვილებისგან და უახლოესი ნათესავებისგან. DOM-ის კვანძებს ასევე უწოდებენ მამისა და ქალიშვილის კვანძებს ისევე, როგორც სხვა კვანძებს.

მაგალითად, შექმენით nodes.html ფაილი. დაამატეთ ტექსტური კვანძი ახალ კვანძში, ასევე კომენტარის კვანძი და ელემენტის კვანძი.

ელემენტის კვანძი

ტექსტის კვანძი.

html ელემენტის ვუზოლი არის batkivsky. თავი და სხეული - html ბავშვის კვანძები. სხეული სამი ბავშვის კვანძის ჩანაცვლებისთვის და ყველა მათგანი ერთ დონეზეა - კვანძის ტიპი არ ჯდება ბუდის ხაზში.

შენიშვნა: DOM-თან მუშაობისას, HTML-ის გენერირების შემდეგ, თქვენ გასასვლელი კოდი HTML ქმნის უამრავ ცარიელ ტექსტურ კვანძს, რომლებიც არ იქნება ხილული DevTools Elements ჩანართზე. დაწვრილებით ცე-ს შესახებ კითხვისთვის.

დანიშნული კვანძის ტიპი

დოკუმენტში კანის ვუზოლი შეიძლება იყოს ტიპის, რომლის წვდომა კონტროლდება nodeType-ის სიმძლავრის მეშვეობით. Mozilla Developer Network-მა განაახლა მიმდინარე კვანძის ტიპის მუდმივების სია. ქვემოთ მოცემულია ყველაზე დიდი ტიპის კვანძების ცხრილი.

დეველოპერის ხელსაწყოების ელემენტების ჩანართში შეგიძლიათ გაითვალისწინოთ, რომ როდესაც დააწკაპუნებთ და ხედავთ რომელიმე სტრიქონს DOM-ში, მას ენიჭება მნიშვნელობა == $0. ხელით გზა otrimati წვდომა ნაკადის აქტიურ ელემენტზე.

node.html კონსოლში დააწკაპუნეთ სხეულის პირველ ელემენტზე (h1).

კონსოლის დასახმარებლად, გაარკვიეთ შებრუნებული კვანძის ტიპი nodeType ავტორიტეტის დახმარებით.

$0.nodeType;
1

h1 ელემენტის არჩევისას თქვენ აირჩევთ 1-ს, როგორც ულვაშს, რომელიც აიყვანება ELEMENT_NODE-მდე. იმუშავეთ იგივე სხვა კვანძებთან ერთად და გადაუხვიეთ 3 და 8 ვოდპოვიდნო.

იმის ცოდნა, თუ როგორ უნდა შეხვიდეთ ელემენტზე, შეგიძლიათ დაადგინოთ კვანძის ტიპი DOM-ში ელემენტის ნახვის გარეშე.

document.body.nodeType;
1

გარდა nodeType-ისა, თქვენ ასევე შეგიძლიათ შეცვალოთ nodeValue-ის ძალა ტექსტური კვანძის ან კომენტარის კვანძის მნიშვნელობის მისაღებად და nodeName-ს ელემენტის ტეგის მისაღებად.

შეცვალეთ DOM დახმარებისთვის

აქამდე თქვენ ცდილობდით როგორ შეცვალოთ DOM კონსოლში და ასევე შეცვალოთ, როგორც იცით, timchas; კანი ერთხელ, თუ მხარე განახლებულია, მხედველობაში მიიღება ყველა ცვლილება. თქვენ შეცვალეთ კონსოლში გვერდის ფონის ფერი. შეეცადეთ დააკავშიროთ ის, რაც ისწავლეთ თქვენს სახელმძღვანელოში, შემდეგ უკვე იცით როგორ შექმნათ ინტერაქტიული ღილაკი, Yak შეცვლის ფონის ფერს.

დაუბრუნდით index.html ფაილს და დაამატეთ ღილაკის ელემენტი ID-ით. ასევე აუცილებელია მოთხოვნის დამატება ახალი ფაილიახალ js დირექტორიაში js/scripts.js.

დოკუმენტის ობიექტის მოდელი

ფონის ფერის შეცვლა

Podiya JavaScript-ში - tse diya, yak vykonuє koristuvach. Koristuvach მიუთითეთ მაუსის მაჩვენებელი ელემენტზე, დააჭირეთ ახალს ან კლავიატურაზე ერთ კლავიშს - იგივე. ამ კონკრეტულად, ღილაკი დამნაშავეა ვიკონატი დიუში, თუ მასზე კორისტუვაჩი დააჭერთ. ვისთვისაც აუცილებელია სმენის აპარატის დამატება. შექმენით scripts.js ფაილი და შეინახეთ ის ახალ js დირექტორიაში. აუცილებელია ფაილს ღილაკის ელემენტის მინიჭება და ცვლილების ელემენტის დამატება.

addEventListener() მეთოდის გამოყენებით, ღილაკი მოისმენს დაწკაპუნებებს და გამოიძახებს მის ფუნქციას დაწკაპუნების შემდეგ.

...
button.addEventListener("დაწკაპუნება", () => (
// მოქმედება წავა აქ
});

ფუნქციის შუაში, თქვენ უნდა დააყენოთ კოდი წინა სახელმძღვანელოდან, რომ შეცვალოთ ფონის ფერი ფუქსიაზე.

...

ასე გამოიყურება სცენარი:

let button = document.getElementById("changeBackground");
button.addEventListener("დაწკაპუნება", () => (
document.body.style.backgroundColor = "ფუქსია";
});

შეინახეთ და დახურეთ ფაილი. ბრაუზერში index.html მხარის განახლება. Დააკლიკეთ ახალი ღილაკი, ვცვლი გვერდის ფონის ფერს.

ტეგები:,

ნებისმიერ ეტაპზე ჩვენ ვხედავთ როგორი DOM არის საჭირო, ასევე როგორი ღვინო იქნება.

რა არის DOM?

ბრაუზერი, თუ ის სთხოვს მხარეს და იღებს მას სერვერის შეყვანიდან და გამოსცემს HTML კოდს, ამ ანალიზში დამნაშავეა. HTML კოდის ანალიზისა და ანალიზის პროცესში ბრაუზერი დაფუძნებული იქნება DOM ხეზე.

vikonannya tsієї dії і რიგი სხვათა შემდეგ, ბრაუზერი აგრძელებს გვერდის რენდერირებას. ამ პროცესმა, ცხადია, უკვე შექმნა მისთვის DOM ხე და არა გამომავალი HTML კოდი.

DOM - დოკუმენტის tse ობიექტის მოდელი, რომელსაც ბრაუზერი ქმნის კომპიუტერის მეხსიერებაში მისგან სერვერის სახით აღებული HTML კოდის საფუძველზე.

მარტივად რომ ვთქვათ, HTML კოდი არის გვერდის ტექსტი, ხოლო DOM არის ბრაუზერის მიერ შექმნილი მონათესავე ობიექტების ნაკრები ტექსტის ანალიზისას.

Chrome-ისთვის გამომავალი გვერდითი კოდი, რომელსაც ბრაუზერი იღებს, შეგიძლიათ იხილოთ „წყარო“ ჩანართში „ვებ საცალო ინსტრუმენტების“ პანელში.

Chrome-ს არ აქვს ინსტრუმენტი, რომელიც დაგეხმარებათ გაოცდეთ DOM ხის შექმნით. და მაინც, DOM ხის გარეგნობა ჰგავს HTML კოდს, მაგრამ ის არის "Elements" ჩანართზე. ვებ საცალო ვაჭრობისთვის ასეთი DOM წარდგენით, აშკარად უფრო მოსახერხებელია მუშაობა. არ არსებობს ისეთი ინსტრუმენტი, რომელიც წარმოადგენს DOM-ს ხეზე.

ობიექტები ამ მოდელში პრაქტიკულად იგივეა, რაც HTML-ში (ტეგები, ტექსტის შინაარსი, კომენტარები და ა.შ.), თავად დოკუმენტის ჩათვლით. მოდელში ამ ობიექტებს შორის კავშირები იქმნება საფუძველზე HTML ელემენტები დალაგებულია კოდებში სათითაოდ.

დოკუმენტის თითოეული DOM-ით, ყოველი ფორმატირების შემდეგ შეიძლება შეიცვალოს. DOM-ის შეცვლისას ბრაუზერი პრაქტიკულად შეცვლის გამოსახულების მხარეს. შედეგად გვაქვს DOM-ის მხარის დახატვა.

DOM-ის პროგრამულად წასაკითხად და შესაცვლელად ბრაუზერი გვაძლევს DOM API-ს ან სხვა სიტყვებით რომ ვთქვათ პროგრამის ინტერფეისს. მარტივი გზით, DOM API არის დიდი რაოდენობის სხვადასხვა ობიექტების, მათი შესაძლებლობებისა და მეთოდების შეგროვების ფასი, რომლის მოგებაც შეგვიძლია. DOM-ის კითხვა და შეცვლა.

DOM-თან მუშაობისთვის JavaScript ძირითადად არის მხარდაჭერილი, ასე რომ, დღეს მხოლოდ ერთი ენის პროგრამირებაა, სკრიპტები, რომლებზედაც შეიძლება ნახოთ ბრაუზერში.

რატომ გვჭირდება DOM API?ჩვენ გვჭირდება ღვინო, რათა JavaScript-ის საშუალებით შევცვალოთ მხარე „liota“-ზე, რათა დინამიურად და ინტერაქტიულად ვიმუშაოთ.

DOM API გვაძლევს (საცალო მოვაჭრეებს) უპიროვნო გზებს, რომელთა დახმარებით ჩვენ შეგვიძლია შევცვალოთ ყველაფერი გვერდით, ასევე ვიმოქმედოთ ბირთვთან. ამრიგად, პროგრამის ეს ინტერფეისი საშუალებას გვაძლევს შევქმნათ დასაკეცი ინტერფეისები, ჩამოვაყალიბოთ, შევცვალოთ diy koristuvachiv-ის დამუშავება, დავამატოთ და ვიზუალიზოთ სხვადასხვა ელემენტები გვერდით, შევცვალოთ მათი ზომა, სიმძლავრე (ატრიბუტები) და უხვად სხვა.

ამავდროულად, ინტერნეტში პრაქტიკულად არ არსებობს საიტები DOM-დან ასეთი ბულა ყოველდღიური რობოტის სცენარებში.

რატომ იქმნება გვერდითი ზოლის HTML კოდი?

სანამ დოკუმენტის ობიექტის მოდელის შემუშავებაზე გადავიდოდეთ, საჭიროა ცოტა გამოიცნოთ როგორია ვებგვერდის (HTML დოკუმენტი) გამომავალი კოდი.

ვებ გვერდის გამომავალი კოდი შედგება ტეგებისგან, ატრიბუტებისაგან, კომენტარებისა და ტექსტისგან. ტეგები HTML-ის ძირითადი სინტაქსია. უმეტესობა ბიჭები არიან. ამგვარად, ერთი მათგანი მრუდია, მეორე კი მოხრილი. ტეგების ერთი ასეთი წყვილი აყალიბებს HTML ელემენტს. HTML ელემენტები შეიძლება იყოს mati დამატებითი პარამეტრები- ატრიბუტები.

სიმღერის განლაგების შესაქმნელად დოკუმენტებს აქვთ გარკვეული ელემენტები სხვების შუაში. შედეგად, HTML დოკუმენტი შეიძლება იყოს წარმოდგენილი, როგორც ერთი HTML ელემენტის უღიმღამო ბუდე.

როგორც კონდახით, ჩვენ ვუყურებთ შემდეგ HTML კოდს:

სტატიის სახელი

ამ კოდისთვის, root ელემენტია html. ახალ დანართს აქვს თავისა და სხეულის ელემენტები. მთავარი ელემენტია სათაური, ხოლო ძირითადი ნაწილი არის h1 და div. div ელემენტი უნდა შეიცვალოს h2 და p.

ახლა ვნახოთ, როგორ შეხედავს ბრაუზერი DOM ხეს HTML კოდის საფუძველზე.

როგორი იქნება დოკუმენტის DOM ხე?

როგორც უკვე აღვნიშნეთ, ბრაუზერი იქნება ხე, რომელიც დაფუძნებულია HTML ელემენტებზე და გვერდითი კოდის სხვა ერთეულებზე. როდესაც vikonannі tsgogo protsess vіn vrakhovuє vladіvі elementіv ერთი v ერთი.

შედეგად, ბრაუზერმა ამოიღო DOM ხე არა მხოლოდ საკუთარ ნამუშევარში, არამედ გვაძლევს API-ს მასზე ხელით მუშაობისთვის JavaScript-ის საშუალებით.

როდესაც DOM გამოიყენება, ბრაუზერი ქმნის HTML ელემენტებს, ტექსტს, კომენტარებს და სხვა ერთეულებს, ასევე ობიექტებს (DOM ხის კვანძები).

ვებ ბრაუზერების უმეტესობისთვის დააწკაპუნეთ მხოლოდ HTML ელემენტებისგან შექმნილ ობიექტებზე (კვანძებზე).

ამ შემთხვევაში, ბრაუზერი არა მხოლოდ ქმნის ობიექტებს HTML ელემენტებიდან, არამედ ასახავს მათ ერთმანეთთან სიმღერის სიმღერების შეცდომით, იმისდა მიხედვით, თუ როგორ ეწერება ისინი კოდში სხვებს.

ელემენტები, yakі znahodyatsya შუამავლის გარეშე in deyakomu elementі є on vіdnosnennia ახალ ბავშვებს. კანის მოვლის ვინი კი მამაა. Krym tsyogo, ყველა tsі ელემენტი ურთიერთობის მიხედვით ერთი є ძმა (ძმები).

თუ ასეა, HTML-ში, არის თუ არა გარკვეული ელემენტი, ყოველთვის შეიძლება გქონდეთ ერთ-ერთი მამა (HTML ელემენტი, ამ შემთხვევაში არ არის ურთიერთგაცვლა). HTML-ში ელემენტს არ შეიძლება ჰქონდეს Sprite. Vignatok გახდეს მხოლოდ html ელემენტი. მას მამა არ ჰყავს.

იმისათვის, რომ DOM ხე გამოიყურებოდეს, როგორც ეს იქნება ბრაუზერი, თქვენ უბრალოდ უნდა "ვიბრიროთ" ყველა ელემენტი სათადარიგოში, სათითაოდ.

DOM ხის შექმნა ქვევით არის გადაჭრილი.

ამ შემთხვევაში, DOM ხის ფესვი არის თავად დოკუმენტი (დოკუმენტი wuz). დალი ხე იქნება ნაკვეთში HTML სტრუქტურებიკოდი.

მაგალითად, HTML კოდი, რომელიც ჩვენ გადავხედეთ DOM ხის შემდეგ საფეხურს:

ამ ხის თავზე არის wuz დოკუმენტი. Dany vuzol pov'yazany z html, vіn є yogo ბავშვი. Wuzol html თავს არიდებს html ელემენტი (...). ვუზლის თავი ( ...) მე სხეული ( ...) Mayut batkivsku zv'yazok s html. დანიშვნით, ის, ვისი და-ძმის სუნი ასდის, მას შეუძლია ერთი მამა გახადოს. Wuzol-ის თავი ურტყამს z სათაურს (lt; სათაური> ...), Vіn є yogo ბავშვი. Wuzli h1 და div დაკავშირებულია სხეულთან, მათთვის ღვინო მამაა. Wuzol div მოხვდა h2 (

...

) І p (), სუნი є იოგო ბავშვები.

ხე რემონტდება, რადგან ის უკვე მინიჭებულია ობიექტის (კვანძის) დოკუმენტზე. Vіn თავის ხაზში შეიძლება ჰქონდეს ერთი შვილი vuzol, utvereniya ელემენტი html ( ...). ხელმძღვანელი ელემენტი ( ...) მე სხეული ( ...) გვხვდება html і, otzhe, є yogo ბავშვები. დალი ვუზოლის თავი є batkivsky ტიტულისთვის (lt; სათაური> ...). h1 და div ელემენტები მოთავსებულია სხეულში, რაც ნიშნავს, რომ სუნი მხოლოდ ბავშვია. div-ს აქვს შემთხვევით დაწყობილი h2 ელემენტები (

...

) მე p (). ცე ნიშნავს, რომ მათ კანისთვის ვუზოლი დივი არის ბატკვსკი.

ღერძი ძალიან მარტივია ბრაუზერში DOM ხის აშენება HTML კოდის საფუძველზე.

უნდა იცოდეთ როგორი იქნება DOM ხე?პირველ რიგში, ეს შუა ადგილზეა, ამ შემთხვევაში თქვენ გსურთ მისი შეცვლა. სხვაგვარად, DOM-თან მუშაობის უმეტესი ნაწილი მიდის საჭირო ელემენტების ძიებაზე (შერჩევაზე). არ ვიცი, როგორ არის DOM-ხის დაკავშირება და კვანძებს შორის კავშირი არის იმის ცოდნა, თუ რომელი სიმღერის ელემენტი იქნება ახალში მნიშვნელოვანი.

მენეჯერი

ესკიზით წარმოდგენილი DOM ხის საფუძველზე შექმენით HTML კოდი.

თემა ფაქტობრივად რთულია. ელე, როგორც ჩანს, ისეთი საშინელი ეშმაკი არ არის, როგორიც იოგოა დახატული. ღერძი აქ არის ძალიან mіtsnіy gorіshok ჩემთვის ხელმისაწვდომია: ასეთი შეკვეთა "დახატვა" მსუბუქად ბალახის უნარის მიხედვით, მაგრამ არა zovsіm პრიმიტიულად. აქამდე ყველა მასალა, რაც წავიკითხე, მძიმეა ან აბსურდულობამდე, ან პრიმიტიულამდე.

რა არის DOM

აბრევიატურა DOMგაშიფრული მოსწონს დოკუმენტის ობიექტის მოდელი(დოკუმენტის ობიექტის მოდელი).

DOM- ყველა პროგრამის ინტერფეისი HTML, XHTML და XML დოკუმენტებზე წვდომისთვის, ამიტომ ტეგები გამოცხადებულია და HTML ატრიბუტები, XHTML და XML, ასევე CSS სტილებიობიექტების პროგრამირების დანახვაზე. ამ მოდელისთვის ის მუშაობს JavaScript-ის მსგავსად და სხვა ვებ პროგრამირების ენებთან.

სამი ამბავი

Ісnuє 4 rіvnya DOM(0, 1, 2 და 3).

რივენ 0(1996) მოდელების ჩათვლით DOM, ეს გამოიყენებოდა ტოლი 1-ის გამოჩენამდე. კოლექციის ძირითადი მიზნებია: document.images, document.forms, document.layers და document.all. Qi მოდელები ოფიციალურად არ არის მითითებული DOM, პუბლიკაციები W3C. სჯობს წარმოვადგინოთ ინფორმაცია მათ შესახებ, ვინც თავიდანვე დაიწყო სტანდარტიზაციის პროცესი.

მოჭრილი 1(1997) მათ შორის ასევე ძირითადი ფუნქციონირება XML-დოკუმენტების დამუშავება: სხვა კვანძებთან მუშაობის რიცხვითი მეთოდები, XML დამუშავების ინსტრუქციებით მუშაობა და ა.შ.

ამის კრემი DOMთანაბრად 1, არის რამდენიმე სპეციალური ინტერფეისი, რომელსაც შეუძლია HTML ელემენტების დამუშავება. მაგალითად, შეგიძლიათ ივარჯიშოთ HTML ცხრილები, ფორმები, ასარჩევი სიები და ა.შ.

IN DOM უდრის 2-ს(2002) დაამატა რამდენიმე ახალი შესაძლებლობა.

იაკშოში DOM eve 1 bula day pidtrimka ფართები სახელები, მაშინ ინტერფეისი DOMუდრის 2-ს, რათა განისაზღვროს სიმბოლოებთან ასოცირებული სახელების არეალის მართვის მეთოდები ამ XML დოკუმენტების დაწერამდე.

ოკრიმ რა, DOMტოლია 2 pіdtremuє podії.

Riven 2 - მიმდინარე სპეციფიკაციები DOM, პროტე W3Cრეკომენდაციას უწევს და დიაკონებმა დაყვეს მე-3 დონის სპეციფიკაციები.

DOM უდრის 3- სპეციფიკაციის სამუშაო პროექტი, როგორც ფუნქციონირების გაფართოების საშუალება DOMტოლია 2. სპეციფიკაციის ამ ვერსიის ერთ-ერთი ყველაზე მნიშვნელოვანი მახასიათებელია რიცხვითი გაფართოებებით მუშაობის შესაძლებლობა. DOM.

რას ნიშნავს "პროგრამული ინტერფეისი"?

ინგლისური სიტყვა ინტერფეისიშეიძლება ითარგმნოს როგორც "საკონტაქტო ზონა". კომპიუტერი, რომელიც უხეშად გამოიყურება, ესმის მხოლოდ ორი სიტყვა: ცარიელი და სრული. Mova, რომელზედაც კომპიუტერი „ლაპარაკობს“, შეიძლება გამოვავლინოთ ნულებისა და ერთეულების ამოუწურავი დაბალი, რომელიც იძლევა სხვადასხვა კომბინაციების ამოუწურავ რაოდენობას.

ბე-იაკი პროგრამის კოდი- tse zrozumіlu პროგრამისტისთვის іnpretatsіya tsikh "ნული і ერთი", ერთად yak pratsyuє kom'yuter. ასეთ რანგში, იქნება ეს ენის პროგრამირება - ინტერფეისი ადამიანსა და მანქანას შორის.

ბრაუზერები მუშაობს ისევე, როგორც სხვა კომპიუტერული პროგრამები. პონგის ინტერპრეტაცია "ნულში და ერთში" html კოდირება, XML, CSS, JavaScript სკრიპტები, PHP, Perl და ა.შ. რობოტული მუშაობისთვის საჭიროა ცალკე პლატფორმა. პლატფორმა DOM- სპეციფიკაცია, ისე, რომ არ მოტყუება კონკრეტული ფილმის პროგრამირებაში ან განლაგებაში. ეს არის ინტერფეისი, რომელიც შეიძლება გამოყენებულ იქნას მრავალ პოპულარულ პროგრამირების ენაში, რომელიც დაკავშირებულია ვებ-გვერდების შექმნასთან და ობიექტების გაგებისა და ინტერპრეტაციით. DOM.

DOM და ბრაუზერები

DOM და JavaScript

JavaScript-ში, ობიექტის იერარქიის ზედა ნაწილი DOM, როგორც ერთგვარი "გამომძიებელი" მთელ ინტერფეისში, რომელიც ემსახურება როგორც ობიექტს დოკუმენტი, და ობიექტები DOMგახდეს იოგოს სამფლობელოები, იოგოს სამფლობელოების დომინანტები და ა.შ. Їx ასევე ე.წ DOM კვანძები.

Wuzley DOM

IN DOMუდრის 2 - 12 ტიპის კვანძს. კანის ტიპის კვანძის უკან DOMფიქსირებული მუდმივი უნიკალური სახელებით. შეხვედრების მეტი კვანძი რობოტებისთვის XML. არჩევანი HTML - JavaScript, რომელშიც ჩვენ ვართ დაკავებული, შეგიძლიათ მოიგოთ მხოლოდ 5 ტიპი. ალე და ცია "აისბერგის მწვერვალი" - ხავერდოვანი "როზლოგას ხე", ერთ ან ორ პროფესიაში საკმარისად ვერ მიიღებთ.

კვანძის ტიპის მუდმივების ახალი ნაკრები, ახალი სპეციფიკაციაში W3C DOM(Blakitnym pіdvіchenі vuzli ხელმისაწვდომია HTML - JavaScript):

მე მუდმივები	მნიშვნელობა	აღწერა
კვანძი.ELEMENT_NODE		ელემენტი vuzol (აქცევს დოკუმენტის ძირეულ ელემენტს, HTML დოკუმენტებისთვის მთელ HTML ელემენტად)
კვანძი.ATTRIBUTE_NODE		ატრიბუტი wuzole (აქცევს XML- ან HTML-დოკუმენტის ელემენტის ატრიბუტს)
		ტექსტი vuzol (#ტექსტი)
Node.CDATA_SECTION_NODE		Vuzol განყოფილება CDATA (XML: ალტერნატიული სინტაქსი სიმბოლოების მონაცემების ჩვენებისთვის)
კვანძი.ENTITY_REFERENCE_NODE
კვანძი.ENTITY_NODE		ვუზოლ როზდილა
კვანძი.PROCESSING_INSTRUCTION_NODE		Wuzol XML დირექტივა
კვანძი.COMMENT_NODE		ვუზოლის კომენტარი
კვანძი.DOCUMENT_NODE		ვუზოლის დოკუმენტი
კვანძი.DOCUMENT_TYPE_NODE		Vuzol დოკუმენტის ტიპი (გადაატრიალეთ მოცემული დოკუმენტის ტიპი, შემდეგ DOCTYPE ტეგის მნიშვნელობა)
კვანძი.DOCUMENT_FRAGMENT_NODE		დოკუმენტის ფრაგმენტის Vuzol (დოკუმენტის ხის ნაწილის დახატვა, დოკუმენტის ახალი ფრაგმენტის შექმნა, ფრაგმენტის ჩასმა, როგორც ნებისმიერი კვანძის ელემენტი და ა.შ.)
Node.NOTATION_NODE		ვუზოლის აღნიშვნა *

* აღნიშვნები - სახელები, რომლებიც განსაზღვრავს გაუხსნელი განყოფილებების ფორმატს, ელემენტების ფორმატს, რომელიც შეიძლება იყოს ნოტაციის ატრიბუტი ან აპლიკაციის პროგრამა, რომელსაც მიმართავს დირექტივა.(ვერ გაიგე? მე ჯერ კიდევ არ ვიცი.)

დოკუმენტის სტრუქტურა DOM-ში

დოკუმენტის ყველა ობიექტი არის DOM კვანძი. მოდით შევხედოთ ელემენტარულ დოკუმენტს:

< title>DOM

"ცენტრი" > თემა

აბზაცის ტექსტი

იოგო DOM ხის ღერძის სქემა:

კანის ვუზოლი შეიძლება იყოს ქალიშვილის ვუზლის დედა (დიაგრამაში ისრები მათკენ მიდის). დოკუმენტის ობიექტი- დოკუმენტის ხის სუბსტავა - იგივე ვუზოლი, მაგრამ ახალს არ აქვს ბატკივ ვოზლა და რიგი ავტორიტეტები და მეთოდები, რომლებსაც სხვა ვუზლოვი იყენებს. Vіn maє ერთი ბავშვის vuzol: ელემენტი .

ელემენტზე ორი ბავშვის კვანძი: і ასეთი ქალიშვილებისთვის შურისძიების ყველა ელემენტი დნება.

პატივისცემა!

"ელემენტი" და "ტეგი" არ არის სინონიმები. ტეგი არის მარკირების ნიშანი: - ეს არის ორი განსხვავებული ტეგი. ელემენტი არის ობიექტი, მნიშვნელობა ტეგებით:

აბზაცის ტექსტი

.

ელემენტები