JavaScript - DOM: კვანძების ძიების მეთოდები. Javascript და Jquery სელექტორები. ელემენტის შერჩევა ავტორიტეტის id-ით და დოკუმენტის ობიექტის ატრიბუტებით JavaScript-ში

DOM სტანდარტი გადასცემს უამრავ ფუნქციას ელემენტის ძიებაში. ეს მეთოდები getElementById, getElementsByTagName და getElementsByName.

უფრო მოწინავე გზები JavaScript ბიბლიოთეკების შესასწავლად.

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

თავად ხელით გზაგაარკვიეთ ელემენტი DOM-ში - დაალაგეთ იგი id-ის მიხედვით. რისთვისაც არის ვიკი დააწკაპუნეთ document.getElementById (id)

მაგალითად, შემდეგი კოდი არის ტექსტის ფერის შეცვლა შავზე div "e with id =" dataKeeper ":

Document.getElementById("dataKeeper"). Style.color = "ლურჯი"

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

შეურაცხმყოფელი მეთოდი არის ყველა ელემენტის ამოღება სიმღერის ტეგი, და მათ შორის იპოვე საჭიროები. ამისათვის გამოიყენეთ document.getElementsByTagName (ტეგი). ვონი აბრუნებს ელემენტების მასივს ასეთი ტეგის შესაქმნელად.

მაგალითად, შეგიძლიათ აირჩიოთ სხვა ელემენტი (მაივიში ნუმერაცია იწყება ნულიდან) li tag-ის ქვეშ:

Document.getElementsByTagName("LI")

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

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

მაგალითად, შემდეგი დაწკაპუნებით დაიბრუნებს LI ელემენტების სიას, რომლებიც ნაპოვნია პირველი div ტეგის შუაში:

Document.getElementsByTagName ("DIV"). GetElementsByTagName ("LI")

ამოიღეთ ყველა ბალიშები

დააწკაპუნეთ elem.getElementsByTagName-ზე ("*"), რათა შეცვალოთ ელემენტის კვანძის ყველა შვილის სია მათი გვერდის ავლით.

მაგალითად, ამ DOM-ზე:

ეს კოდი:

Var div = document.getElementById("d1") var elems = div.getElementsByTagName("*") for (var i = 0; i

თქვენ შეგიძლიათ ნახოთ თანმიმდევრობა: ol1, li1, li2.

ძებნა სახელით: getElementsByName

document.getElementsByName (სახელი) მეთოდი აბრუნებს ყველა ელემენტს, რომელთა სახელები (სახელის ატრიბუტი) უფრო ძველია ვიდრე ეს.

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

document.getElementsByName მეთოდი არ მუშაობს სხვა ელემენტებთან, როგორიცაა div, p და ა.შ.

Სხვა საშუალებები

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

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

ხშირი რემისია დაკავშირებულია ყოველდღიურ ცხოვრებასთან ს getElementById მეთოდის სახელით, ხოლო სხვა მეთოდებში არის ასო є: getElement სᲡახელით.

აქ წესი მარტივია: ერთი ელემენტი - ელემენტი, ბევრი - ელემენტი ს. ყველა მეთოდი * ელემენტი ს* გადაატრიალეთ კვანძების სია.

ბოლო გაკვეთილზე ჩვენ გადავხედეთ getElementsByTagName მეთოდს, რომელიც აბრუნებს მასივს ( ჯგუფი) გვერდითი ელემენტები ტეგის სახელზე.

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

getElementById მეთოდი მსგავსია დოკუმენტის ობიექტის getElementsByTagName მეთოდის.

მეთოდის სახელი ითარგმნება სიტყვასიტყვით: იპოვნეთ ელემენტი ID-ით.

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

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

ცოტა მეტი ახსნა კოდის ფრაგმენტისთვის...

• img ტეგი ( გამოსახულებავ) id - პინგვინის იდენტიფიკატორი;
• დამატებითი მეთოდისთვის getElementById, თავად img ტეგი არჩეულია პინგვინის იდენტიფიკატორისთვის;
• ზამთარში უნიკალური გაიტაცესშეხვედრის ტეგზე;
• შემდეგ შეგიძლიათ ივაჭროთ ტეგით, როგორც ობიექტთან ერთად ცვლილების გზითუნიკალური, ისევე, როგორც ჩვენ ვმუშაობდით Date ობიექტთან საკმაოდ ცვლილებით.

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

ისე, ატრიბუტების მნიშვნელობა ასევე არის ძალაუფლების მნიშვნელობა.

განაგრძეთ ვარჯიში წინა კონდახით...

"მოჯადოებული პინგვინი">

კონდახის კოდის ახსნა...

• img ტეგი ( გამოსახულებავ) აქვს შემდეგი ატრიბუტები: src - ფაილის მისამართები, სიგანე და სიმაღლე - გამოსახულების სიგანე და სიმაღლე, alt - ალტერნატიული ტექსტი;
• ტეგზე წვდომის უარყოფით დამატებითი getElementById მეთოდის გამოყენებით, რაც შეეხება ობიექტს, ჩვენ უარვყოფთ ტეგის ატრიბუტებზე წვდომას, რამდენადაც ობიექტის ავტორიტეტები;
• ა ატრიბუტის მნიშვნელობებიახლა უკვე ხელისუფლების მნიშვნელობა;
• ჯავასკრიპტში, ობიექტის ავტორიტეტებზე წვდომა მიიღწევა წერტილის საშუალებით. შემდეგ გამოჩნდება alt - ეკრანზე გაფრთხილების მეთოდის გარდა img ტეგის ალტერნატიული ტექსტი.

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

img tag - ეს ობიექტი უნიკალურია;

ტეგის სიგანე და alt ატრიბუტები არის ობიექტის ძალა;

ატრიბუტების მნიშვნელობები "128" და "მოჯადოებული პინგვინი"- ავტორიტეტების მნიშვნელობა;

// ღერძი, როგორც ჩანს Javascript პოზიციიდან:

var უნიკალური = (

სიგანე: "128",

alt: "მოჯადოებული პინგვინი"

}

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

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

jQuery-ს აქვს სხვადასხვა ვარიანტები ვებ დოკუმენტში ელემენტების არჩევისთვის.

გარდა ამისა, ვებ გვერდებზე შეგიძლიათ აირჩიოთ ელემენტები მათი id-ით, ჩვენ ასევე შეგვიძლია შევარჩიოთ ელემენტები კლასის ატრიბუტით.

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

დავუშვათ, რომ გვერდზე გვაქვს შესაბამისი კოდი.

ამოცანა მარტივია, თქვენ უბრალოდ უნდა აირჩიოთ ელემენტი კლასის კლასით = "elem" და გააკეთოთ ყველაფერი, რაც შეგიძლიათ, Javascript-ის გამოყენებით.

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

ვარიანტი 1. გამოიყენეთ Javascript getElementsByClassName მეთოდი.

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

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

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

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

document.getElementsByClassName ("elem") კონსტრუქციის ბოლოს, თქვენ უნდა მიუთითოთ, რომ მასივის () null ელემენტი დაბრუნდება. რახუნოკი ჯავასკრიპტში ნულიდან იწყება და არა ერთიდან.

getElementsByClassName მეთოდის გამოყენების პრობლემა ის არის, რომ ეს მეთოდი არ არის მხარდაჭერილი ბრაუზერების ძველ ვერსიებში.

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

თუ (document.getElementsByClassName == განუსაზღვრელი) (document.getElementsByClassName = ფუნქცია (cl) (var retnode =; var myclass = new RegExp("\\b" + cl + "\\b"); var elem = this.getElementsByTagName ("*"); for (var i = 0; i< elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } };

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

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

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

აქ elem არის ელემენტისთვის მინიჭებული კლასის სახელი.

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

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

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