იმისათვის, რომ სკრიპტმა იმუშაოს გვერდის ნებისმიერ ელემენტთან, ჯერ ეს ელემენტი უნდა იყოს ცნობილი. JavaScript-ის მუშაობის მრავალი გზა არსებობს. ნაპოვნი ელემენტი უნდა მიენიჭოს ცვალებადი სკრიპტს, შემდეგ კი, ამ ცვალებადი სკრიპტის საშუალებით, ის განვითარდება ელემენტზე და შეასრულებს გარკვეულ მოქმედებებს.

მოძებნეთ ID-ით

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

document.getElementById(id)

Პარამეტრები:

id – ელემენტის id, რომელიც უნდა იცოდეს. id - სერია, ამიტომ არის ბუტი თათებში.

მოდით შევქმნათ გვერდი, დავამატოთ მას ელემენტი და დავაყენოთ მისი ID და ვიპოვოთ ეს ელემენტი სკრიპტში:

HTML კოდი:

JavaScript:

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

ასე რომ, როგორ მოძებნოთ ID-ით არის უმარტივესი ხელით გზახშირად vikoristuyut yogo თავად. თუ რომელიმე ელემენტს სჭირდება სკრიპტში დამუშავება, მაშინ ამ ელემენტის გვერდის კოდში უნდა იყოს დაინსტალირებული id ატრიბუტი, რადგან ის ადრე არ იყო დაინსტალირებული. ელემენტი id-ით ვიცი.

მოძებნეთ კლასი

getElementsByClassName() მეთოდი საშუალებას გაძლევთ იპოვოთ ყველა ელემენტი, რომელიც ეკუთვნის კონკრეტულ კლასს.

document.getElementsByClassName(კლასი)

Პარამეტრები:

კლასი - ელემენტების კლასი, რომლებიც უნდა ვიცოდეთ

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

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

HTML კოდი:

JavaScript:

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

ძიება ტეგის მიხედვით

getElementsByTagName() მეთოდი პოულობს ყველა ელემენტს კონკრეტული ტეგით. ის ასევე აბრუნებს ფსევდო-მაივს მის მიერ აღმოჩენილ ელემენტებთან ერთად.

document.getElementsByTagName(ტეგი)

Პარამეტრები:

tag - ელემენტების ტეგი, რომელიც უნდა იცოდეთ

ჩვენ ვიცით ყველა p ტეგი, რომელიც არის გვერდზე:

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

მოძებნეთ ამომრჩეველი

გამოიყენეთ querySelector() და querySelectorAll() მეთოდები, რათა იპოვოთ ელემენტები, რომლებიც ემთხვევა სელექტორს. შემდეგ მოიძებნება ელემენტები, ნებისმიერ სტილამდე, თითქოს არ იყოს დავალებები ასეთ სელექტორზე. ამ შემთხვევაში, გვერდითი ზოლის სტილში ასეთი სელექტორის არსებობა საერთოდ არ არის სავალდებულო. ეს მეთოდები არ არის დაკავშირებული CSS-თან. querySelectorAll() მეთოდი პოულობს ყველა ელემენტს, რომელიც ემთხვევა სელექტორს. და querySelector() მეთოდმა იცის ერთი ელემენტი, რომელიც არის პირველი ელემენტი გვერდის კოდში. ამ მეთოდებს შეუძლიათ შეცვალონ ადრე განხილული ელემენტების ძიების ყველა მეთოდი, მათ შორის ამომრჩეველი id-ისთვის, სელექტორი ტეგისთვის და მრავალი სხვა.

document.querySelector(selector)

document.querySelectorAll(selector)

სელექტორები იწერება ისევე, როგორც CSS-ში, უბრალოდ არ დაგავიწყდეთ ღილაკების დადება.

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

HTML კოდი:

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

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

სასამართლო ელემენტები

ნაპოვნი ელემენტისთვის შესაძლებელია მისი სუფიქსების პოვნა. კანის ელემენტი, ობიექტი და ჭურჭლის ელემენტები შეიძლება ამოღებულ იქნეს ობიექტის ძალით. წინა ელემენტის ძმის ძალა არის წინა ელემენტის შეცვლა, ხოლო NextElement Sibling-ის ძალა არის წამყვანი ელემენტის შეცვლა.

ელემენტი.previousElementSibling

ელემენტი.nextElementSibling

ჩვენ ვიცით ელემენტი, რომელიც მიიწევს ბლოკის უკან:

საბავშვო ელემენტები

ბავშვების ძალა ამოიღონ მასა მისი შვილობილი ელემენტებით.

ელემენტი.ბავშვები

ჩვენ ვიცით ბლოკის საბავშვო ელემენტები.

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

ჩვენ გვაქვს ყველა ელემენტი HTML, ინსტრუქციები სათითაოდ გაფართოვდა, გვინდა წავშალოთ და შემდეგ წავიკითხოთ მათში არსებული მონაცემები ან შევცვალოთ. ამ ტეგების გასარკვევად უამრავი გზა არსებობს, სუნის ფრაგმენტები ამოღებულია ხის მსგავსი სტრუქტურიდან. ამ სტატიაში თქვენ შეისწავლით თუ როგორ გამოიყენოთ ორი შეძენილი ფუნქცია JavaScript, უბრალოდ ასე querySelectorі querySelectorAllგასართობად htmlტეგები.

querySelector მეთოდი

მეთოდების ფუნქციონირების არსის გასაგებად querySelectorі querySelectorAllგაოცდით მომავალი HTML-ით:

რომლის გამოყენება ერთია დივიდენტიფიკატორით მთავარიდა რა შედის ახალ ელემენტში დივі imgრომლის კანი კლასისთვის მნიშვნელოვანია pic-კონტეინერიі პროფილის სურათიაშკარად. შემდეგ რამდენიმე განყოფილებას აქვს სტაგნაციური ფუნქციები querySelectorі querySelectorAllამაზე HTML კოდიდა ვნახოთ რა მოხდება.

querySelector

ფუნქცია querySelectorასრულებს შემდეგნაირად:

Var element = document.querySelector("< CSS selector >");

querySelector ფუნქციაიღებს არგუმენტს და ეს არგუმენტი არის CSS სელექტორიელემენტი, რომლის ცოდნაც გსურთ. ვინც იქცევა querySelector ფუნქციაპირველი ელემენტი, რომელიც უნდა იცოდეთ არის სხვა ელემენტების აღმოჩენა, რომლებიც შეიძლება იყოს ამ სელექტორის მსგავსი.

გაოცება HTMLჩვენი წინა კონდახიდან, თუ გვინდა უარვყოთ წვდომა დივრომლის იდენტიფიკატორიც არის მთავარი, პირდაპირ უნდა დაწეროთ:

Var element = document.querySelector("#main");

ოსკოლკი მთავარიє იდენტიფიკატორი, ამომრჩეველი სინტაქსი მისი შერჩევისთვის #მთავარი. ანალოგიურად, კლასის ამომრჩეველი pic-კონტეინერი :

Var element = document.querySelector(".pic-container");

პირველი ბლოკი ბრუნავს დივრომელი კლასის მნიშვნელობაა pic-კონტეინერი. სხვა ელემენტები დივ zi მნიშვნელოვანი კლასი pic-კონტეინერიუბრალოდ იგნორირებულია.

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

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

JavaScript-ს, ისევე როგორც CSS-ს, აქვს ფუნქციონირება, რომელიც საშუალებას გაძლევთ გაფართოვდეთ HTML ელემენტებზე, რათა გარდაქმნათ გვერდების შინაარსი. CSS-ში ეს არ არის სელექტორების ჩაწერის გზა. JavaScript-ს აქვს მრავალი გზა ამ ფუნქციის ორგანიზებისთვის და ერთ-ერთი მათგანია:

Var primarHeadings = document.getElementsByTagName("h1");

ეს კოდი იჭერს ყველა h1 სათაურს და, როგორც ჩანს, უხეშად აყენებს მათ პირველ ადგილზე. თუ გვერდზე არის რამდენიმე სათაური, მაშინ ყველა მათგანი განთავსდება მასივში.

Var ou812 = document.getElementById("eddie");

ეს კოდი ირჩევს ელემენტს id = "eddie"-დან.

ვარ გიტარები = document.getElementsByClassName("axes");

ჩვენ ასევე შეგვიძლია შევარჩიოთ ელემენტები კლასის სახელის ქვეშ.

Dodamo troch Sizzle

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

ამ ბიბლიოთეკების განვითარებით, სელექტორების წერა მნიშვნელოვნად დაჩქარდა და შეიცვალა:

$("#dave").css()

ეს კოდი ცნობილია HTML ელემენტი id=”dave”-ით ის საშუალებას გაძლევთ იმუშაოთ თქვენს CSS სტილებთან.

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

ახალი რევანდი JavaScript

დესკტოპის ბევრმა დეველოპერმა ხშირად დაიწყო jQuery-ის გამოყენება, მაგრამ მათ ვერ შენიშნეს რაიმე მკვეთრი ცვლილება JavaScript-ში.

"JavaScript Selector API" არის HTML5 სპეციფიკაციის ოფიციალური ნაწილი და შეიძლება გამოყენებულ იქნას XHTML გვერდების დაწერისას. ახალი სინტაქსი კიდევ უფრო მარტივია:

Document.querySelector ("#eddie")

ეს კოდი აბსოლუტურად ექვივალენტურია document.getElementById("eddie"). არა მტრული? Რა მოხდა:

Document.querySelector ("#eddie h1 + p")

ახალი ფუნქციონალობა საშუალებას გაძლევთ მანიპულიროთ DOM, vikoryst და CSS განლაგებებით.

querySelector მეთოდი ირჩევს პირველ და ბოლო ელემენტს. ყველაფრის ასარჩევად, თქვენ უნდა სწრაფად გაუშვათ querySelectorAll:

Var hiFrets = document.querySelectorAll("table#frets tr:nth-child(3)")

ეს კოდი აშორებს მესამე რიგს ცხრილიდან id=”frets”-ით.

კიდევ რამდენიმე მნიშვნელოვანი მომენტი

როგორც მოგეხსენებათ, ბევრი განსხვავებაა, რადგან იყენებთ querySelector / All მეთოდს:

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

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

getElementsByTagName-ის კონტროლის ქვეშ, querySelectorAll მეთოდი აბრუნებს შერჩეული ელემენტების სტატიკური სიას, როგორც ისინი გამოჩნდება გვერდზე ნარაზისაათი. ეს ნიშნავს, რომ კოდში რაიმე დინამიური ცვლილების შეტანისას (ელემენტების დამატება ან წაშლა JavaScript-ის საშუალებით), დაგჭირდებათ querySelectorAll მეთოდის ხელახლა გაშვება.

სცადეთ ახალი ფუნქციონირება სხვადასხვა ბიბლიოთეკების შეძენის საჭიროების დასაძლევად.

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

ხეში კვანძის ან კვანძების შეგროვების შესაფერისი მეთოდები

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

getElementById() მეთოდი

getElementById(elementID) მეთოდი აბრუნებს ელემენტს დოკუმენტში, მიუთითებს იდენტიფიკატორზე (id="elementID"), როგორც Node ობიექტი. თუ ელემენტი დანიშნული იდენტიფიკატორით არ არსებობს, მაშინ დანიური მეთოდიაბრუნებს ნულოვანი მნიშვნელობებს.

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

document.getElementById(elementID)

ეს მეთოდი იღებს ერთ სავალდებულო პარამეტრს (elementID), რომელიც არის მწკრივი, რათა მოათავსოთ ელემენტის id ატრიბუტის მნიშვნელობა, რომლის წაშლა გსურთ.

მაგალითად, შეცვალეთ ელემენტის ტექსტის ფერი id="nameArticie"-ზე.

სტატისტიკის დასახელება

• 1 ქულა
• 2 ქულა
• 3 ქულა

getElementsByClassName() მეთოდი

getElementsByClassName(className) მეთოდი აბრუნებს ყველა ნაპოვნი ელემენტს დოკუმენტში (დოკუმენტისთვის) ან შვილობილ კვანძებს შორის (კვანძისთვის), რომლებიც არიან მითითებულია სახელიკლასი (class="className"), როგორც NodeList ობიექტი (კვანძების კოლექცია). ეს მეთოდი აბრუნებს NodeList ობიექტს, რომელიც წარმოადგენს ელემენტების (კვანძების) კრებულს, რომელიც შეიძლება დაზუსტდეს კლასის სახელის ამ მეთოდის პარამეტრებში.

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

Var elementList = document.getElementsByClassName("list"); for (var i=0; i

document.getElementByClassName(className);
კვანძი(vuzol).getElementByClassName(className);

ეს მეთოდი იღებს ერთ სავალდებულო პარამეტრს (className), რომელიც არის ელემენტების კლასის სახელთან, რომლის დაბრუნებაც გსურთ. თუ გსურთ ამოიღოთ ელემენტები, რომლებიც წარმოადგენენ უამრავ მნიშვნელოვან კლასს, ისინი უნდა გამოიყოს ამ მეთოდის პარამეტრებში სხვა სივრცის უკან. მაგალითად, აირჩიეთ კვანძების კოლექცია, რომლებიც არის classl და class2:

Document.getElementsByClassName("classl class2");

მაგალითად, შეცვალეთ ელემენტების ფონის ფერი, როგორიცაა სიის კლასი:

სტატისტიკის დასახელება

• 1 ქულა
• 2 ქულა
• 3 ქულა

• 1 ქულა
• 2 ქულა

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

//ელემენტების კოლექციის მოძიება, რომელიც წარმოადგენს კლასის სიას var elementList = document.getElementsByClassName("list"); //2 ელემენტის ამოღება კოლექციიდან var secondList = elementList; //ელემენტის ფერის შეცვლა secondList.style.backgroundColor = "წითელი";

getElementsByTagName() მეთოდი

getElementsByTagName(tagname) მეთოდი აბრუნებს ყველა ნაპოვნი ელემენტს დოკუმენტში (დოკუმენტისთვის) ან შვილობილ კვანძებს შორის (კვანძისთვის), რომელიც წარმოადგენს ტეგს, როგორც NodeList ობიექტს (კვანძების კრებული). შეგროვების კვანძის შერჩევა ეფუძნება ინდექსს. ელემენტების (კვანძების) რაოდენობა კოლექციაში იწყება 0-დან.

document.getElementsByTagName(tagname);
node(vuzol).getElementsByTagName(tagname);

ეს მეთოდი იღებს ერთ სავალდებულო პარამეტრს (tagname), რომელიც არის ტეგის სახელთან, როგორც ამას დიდი მწერლები მიუთითებენ. თუ პარამეტრის ველში მიუთითებთ მწკრივს, რომელიც შეიცავს ვარსკვლავს ("*"), ჩვენ შევარჩევთ დოკუმენტში არსებულ ყველა ელემენტს (დოკუმენტის ობიექტისთვის) ან კვანძის ყველა შვილო ელემენტს (კვანძის ობიექტისთვის).

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

Var elementList = document.getElementsByTagName("LI"); for (var i=0; i

მაგალითად, შეცვალეთ LI ელემენტების ფონის ფერი:

სტატისტიკის დასახელება

• 1 ქულა
• 2 ქულა
• 3 ქულა

მაგალითად, აირჩიეთ UL ელემენტების კოლექცია. მერე კოლექციიდან აიღეთ 1 ვუზოლი, მერე. უნივერსიტეტი, რომლის ინდექსი არის 0. შემდეგი, აირჩიეთ ამ კვანძისთვის ბავშვის LI კვანძების კოლექცია. და ბოლოს, შეცვალეთ კანის ელემენტის შრიფტის ზომა ამ კოლექციაში.

//UL ელემენტების კოლექციის მოძიება var elementsUL = document.getElementsByTagName("UL"); //ამ კოლექციიდან 1 ელემენტის ამოღება var elementUL = elementsUL; //LI კვანძის ელემენტის Child ელემენტების კოლექციის მოძიებაUL var elementLI = elementUL.getElementsByTagName("LI"); //გაატარეთ კოლექციის ყველა ელემენტი (var i = 0; i

getElementsByName() მეთოდი

getElementsByName(name) მეთოდი აბრუნებს დოკუმენტში ნაპოვნი ყველა ელემენტს, რომელსაც აქვს მითითებული სახელი (სახელის ატრიბუტის მნიშვნელობა), როგორც NodeList ობიექტი (კვანძების კრებული).

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

Var elementList = document.getElementsByName("ტელეფონი"); for (var i=0; i

შენიშვნა: HTML5 სახელის ატრიბუტი მოძველებული იქნება და ელემენტების უმეტესობისთვის შეიცვლება id ატრიბუტით.

document.getElementsByName(სახელი)

ეს მეთოდი იღებს ერთ სავალდებულო პარამეტრს (სახელს) მის გვერდით, რათა მოათავსოს სახელის ატრიბუტის მნიშვნელობა.

მაგალითად, შეცვალეთ ელემენტების ფერი ისე, რომ სახელის ატრიბუტი გამოჩნდეს ტელეფონის მნიშვნელობებით (სახელი = "ტელეფონი"):

ტელეფონი: სხვა ტელეფონები:

querySelector() მეთოდი

querySelector() მეთოდი აბრუნებს დოკუმენტში ნაპოვნი პირველ ელემენტს (დოკუმენტისთვის) ან ბავშვის კვანძების შუაში (კვანძისთვის), რაც შეესაბამება ამ მეთოდის პარამეტრად მითითებულ CSS სელექტორს. თუ ელემენტი ემთხვევა CSS სელექტორს, ეს მეთოდი დააბრუნებს null-ს.

document.querySelector(cssSelector)
node.querySelector(cssSelector)

ეს მეთოდი იღებს ერთ სავალდებულო პარამეტრს (cssSelector), რომლის გვერდით განთავსდება CSS სელექტორი, იმისდა მიხედვით, თუ რომელი ელემენტია არჩეული.

მაგალითად, შეცვალეთ პირველი ნაპოვნი ელემენტის ტექსტის ფერი, რომელიც შეესაბამება #main p სელექტორს:

მაგალითად, აირჩიეთ DIV ელემენტების კოლექცია დოკუმენტიდან. მერე კოლექციიდან აიღეთ 1 ვუზოლი, მერე. კვანძი, რომელსაც აქვს ინდექსი 0. რომელი კვანძისთვის იპოვეთ მისი შვილობილი კვანძების შუა, პირველი ელემენტი, რომელიც შეესაბამება CSS სელექტორს h1 + p. შემდეგ შეცვალეთ ამ ელემენტის შრიფტის ზომა.

//DIV ელემენტების კრებულის მოძიება var elementDIV = document.getElementsByTagName("DIV"); //ამ კოლექციიდან 1 ელემენტის ამოღება var elementDIV = elementDIV; // ამოიღეთ კვანძი p, ამოიღეთ დაუყოვნებლივ h1 კვანძის შემდეგ //მოძებნეთ კვანძი კვანძის შვილობილი კვანძების შუა ნაწილიდან, რომელიც შენახულია ცვლადში elementDIV var elementP = elementDIV.querySelector("h1+p"); //ელემენტის შრიფტის ზომის შეცვლა elementP.style.fontSize = "30px";

querySelectorAll() მეთოდი

Queryselectorall (c). კოლექციის კვანძებში ნავიგაცია მიჰყვება ინდექსს. ელემენტების (კვანძების) რაოდენობა კოლექციაში იწყება 0-დან.

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

Var elementList = document.querySelectorAll("#main p"); for (var i=0; i

document.querySelectorAll(cssSelector);
node(vuzol).querySelectorAll(cssSelector);

ეს მეთოდი იღებს ერთ სავალდებულო პარამეტრს (cssSelector), რომელიც გამოიყენება CSS სელექტორის დასაყენებლად, იმისდა მიხედვით, თუ რომელი ელემენტებია არჩეული. მეთოდის პარამეტრებში მრავალი სელექტორის ჩასართავად, ისინი ერთმანეთისგან კომის გზით უნდა გამოიყოს.

მაგალითად, შეცვალეთ ტექსტის ელემენტების ფერი, რომელიც შეესაბამება #main p სელექტორს:

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

//ამოღება ელემენტს (vuzol), რომელიც არის id="sidebar" var sidebar = document.getElementById("sidebar"); //აირჩიეთ კვანძების კოლექცია, რომელიც ემთხვევა ამომრჩეველს "p" var elementListP = sidebar.querySelectorAll("p"); //გაატარეთ კოლექციის ყველა ელემენტი (var i = 0; i

ზავდანნია

ჩაწერეთ კოდი Movi JavaScript-ში getElementById() , getElementsByClassName() , getElementsByTagName() , querySelector() , querySelectorAll() მეთოდების გამოყენებით შემდეგი ამოცანებისთვის:

1. ამოიღეთ ყველა ელემენტი p ბლოკის ძირითადიდან;
2. ამოიღეთ გვერდითი ბლოკი კონტეინერის დივიდან;
3. აირჩიეთ ქვედა კოლონტიტულის ბლოკი და დაამატეთ ელემენტები სხეულის კონტეინერში.

კანის მოვლის მიღწევა შესაძლებელია ერთზე მეტი გზით.

პრობლემა, რომელიც უკვე ხშირად აწყდება javascript დეველოპერებს, არის ელემენტის შერჩევა ვებ გვერდზე მისი id ატრიბუტისთვის.

მისაღებია, რომ ჩვენ გვაქვს კოდი გვერდზე.

როგორ შევარჩიო ელემენტი id=”elem”-ით და შევქმნა მოქმედებების სერია?

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

ვარიანტი 1. დააჩქარეთ Javascript getElementById მეთოდი.

ეს არის გზა, რომ მიიღოთ ელემენტი მისი id-ისთვის "სუფთა" JavaScript-ის გამოყენებით, მესამე მხარის ბიბლიოთეკების გარეშე. ეს მეთოდი მსგავსია ggetElementById("element_id") მეთოდის. ამ გზით, ჩვენ ვასრულებთ ელემენტს, რომელიც გვჭირდება ჩვენი ID-სთვის.

ვნახოთ, როგორ მუშაობს მარტივი მაგალითი.

გთხოვთ გაითვალისწინოთ, რომ კოდის (სკრიპტის) ეს სერია მდებარეობს თავად ელემენტის ქვემოთ. Tse obov'yazkova umova tsyogo სკრიპტი, რადგან. Javascript კოდი გამოჩნდება გვერდზე დაწკაპუნებისას. როგორც კი კოდს კიდევ გავაფართოვებთ, ჩვენ დავუბრუნდებით გვერდის ელემენტს, რომელიც ჯერ კიდევ წინ არის. yogo კოდში, სკრიპტის გამოშვების დროს ის ჯერ არ იარსებებს. Є გზები, რომლითაც შეგიძლიათ იყოთ უნიკალური, მაგრამ არ გასცდეთ ამ სტატისტიკის საზღვრებს.

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

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

ვარიანტი 2. გამოიყენეთ Jquery ბიბლიოთეკა.

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

ელემენტზე მისი id-ით ნავიგაციისთვის, თქვენ უნდა გამოიყენოთ შემდეგი კონსტრუქცია:

$ ("#elem")

აქ elem არის სახელი, რომელიც შედის id ატრიბუტში.

იმიტომ რომ ჩვენ გამოვიყენებთ მესამე მხარის Javascript ბიბლიოთეკას სახელწოდებით Jquery, მაშინ ეს ბიბლიოთეკა დაუყოვნებლივ უნდა იყოს დაკავშირებული.

ხელმისაწვდომია განყოფილებიდან , ამის გაკეთების ერთ-ერთი გზაა კოდის შემდეგი რიგის დამატება:

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

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

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