«
»

JavaScript WTF Vol. 4 – DOM ელემენტების იტერაცია

Sep 27 2007

ამასწინათ David Flanagan – ის შესანიშნავ წიგნში JavaScript The Definitive Guide წავაწყდი კოდის ფრაგმენტს რომელმაც ჯერ დამაბნია ხოლო შემდეგ აღტაცება მომგვარა, რადგან მსგავსი რამ არც მომსვლია თავში აზრად არასოდეს და არც არსად მინახავს…

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

მოგეხსენებათ რომ DOM ობიექტების იტერაცია შესაძლოა ხშირად დაგვჭირდეს გარკვეული ამოცანების გადასაჭრელად, მათ შორის ერთერთი მნიშვნელოვანი არის კონკრეტული DOM ობიექტის მომდევნო ან წინა ელემენტის მიღება. ამისათვის არსებობს DOM ობიექტის შესაბამისი თვისებები რომლებიც მიუთითებენ ასეთ ელემენტებზე: nextSibling მომდევნო ელემენტისათვის და previousSibling შესაბამისად წინა ელემენტისათვის. თუმცა პირადად ჩემთვის დიდ სარგებლობას ეს თვისებები არ წარმოადგენენ რადგან ხშირად (X)HTML კოდში ელემენტის წინ/შემდეგ შესაძლოა ტექსტური ელემენტი(textNode) იყოს განთავსებული რომელიც უმეტეს შემთხვევაში არაფერში არ არის გამოსადეგი… ასევე უფრო ხშირად საჭიროა მაგალითად კონკრეტული span ელემენტის წინ არსებული div ელემენტის მოპოვება, ხოლო ამ span – სა და div – ს შორის შესაძლოა განთავსებული იყოს სხვა ელემენტები… გამომდინარე აქედან დაწერილი მაქვს შესაბამისი მეთოდები რომლებიც ამ პრობლემას მიგვარებენ… თუმცა აღნიშნული ფაქტის მერე ეს მეთოდები გადავწერე რომლებსაც აქ განვიხილავ მაგალითის სახით.

კოდი:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var Util = {
 
  dom: {
   
    /**
     * param obj ობიექტი რომლის შემდეგი ელემენტის მოპოვებაც არის საჭირო
     * param tagName ელემენტის ტეგის სახელი ზუსტი ფილტრაციისათვის
     */
    getNextSibling: function(obj, tagName) {
      if (obj.nextSibling) {
        for (var o = obj.nextSibling; o; o = o.nextSibling) {
          if (o.tagName && o.tagName.toLowerCase() == tagName) {
            return o;
          }
        }
      }
    },
   
    /**
     * param obj ობიექტი რომლის წინა ელემენტის მოპოვებაც არის საჭირო
     * param tagName ელემენტის ტეგის სახელი ზუსტი ფილტრაციისათვის
     */
    getPrevSibling: function(obj, tagName) {
      if (obj.previousSibling) {
        for (var o = obj.previousSibling; o; o = o.previousSibling) {
          if (o.tagName && o.tagName.toLowerCase() == tagName) {
            return o;
          }
        }
      }
    }
 
  }
 
};

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

1
2
3
var el = document.getElementById('elemID');
var nextSibling = Util.dom.getNextSibling(el, 'p'); //დააბრუნებს ელემენტის შემდგომ არსებულ პირველსავე p ელემენტს
var nextSibling = Util.dom.getPrevSibling(el, 'div'); //დააბრუნებს ელემენტის წინ არსებულ პირველსავე div ელემენტს

მეთოდები საკმარისად მარტივია, იმ შემთხვევაში თუ მეთოდის პირველი პარამეტრის nextSibling/previousSibling თვისებები მიუთითებენ კონკრეტულ DOM ელემენტებს აქვს აზრი ელმენტების იტერაციას, if პირობაში მოწმდება გააჩნია თუ არა ელემენტს tagName თვისება რადგან textNode ტიპის ელემენტებს მსგავსი არაფერი გააჩნია, ხოლო თუ ეს თვისება არსებობს და მას აქვს მნიშვნელობა ხდება შედარება მეთოდის მეორე პარამეტრად გადაცემულ მნიშვნელობასთან. თუ ორი მნიშვნელობა უდრის ერთმანეთს მეთოდი დააბრუნებს მიმდინარე ობიექტს და შეწყვეტს მუშაობას.

თუმცა ეს არ არის საინტერესო… საინტერესოა სწორედ for ციკლი, კერძოდ კი შემდეგი ფრაგმენტი:

for (var o = obj.previousSibling; o; o = o.previousSibling)

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

1) კონსტრუქციის პირველ ნაწილში ხდება o ცვლადის ინიციალიზაცია და მას ენიჭება საწყისი მნიშვნელობა ანუ obj.previousSibling;
2) კონსტრუქციის მეორე ნაწილში მოწმდება პირობა, ანუ o ობიექტი არ უნდა იყოს null, ზუსტად ეს განაპირობებს ციკლის შესრულება გაგრძელდება თუ არა;
3) კონსტრუქციის მესამე ნაწილში ყოველ შემდეგ იტერაციაზე o ობიექტს ენიჭება იერარქიაში მის წინ მყოფი ელემენტი;

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

შესაძლოა ეს ძალიან მარტივად მოგეჩვენოთ თუმცა ჩემთვის პირადად ძალიან სასიამოვნო დეტალი იყო რადგან ობიექტების იტერაციის მსგავსი მეთოდი არ მინახავს და არც გამომიყენებია :)

მარტივი მაგრამ ჩემის აზრით ძალიან სასარგებლო დეტალი ენისა რომელის დეტალებიც დღემდე მართლა ბნელით არის მოცული :)

ტეგები: ,

4 Responses to “JavaScript WTF Vol. 4 – DOM ელემენტების იტერაცია”

  1. ოთო says:
    September 27, 2007 at 4:18 am

    ძალიან მოყვანილი და მარტივი რაღაც არის!
    მაგარია!
    ისე, ეგ წიგნი თითქმის ბოლომდე გადავქექე, და რატომ არ შემხვდა… ;)

  2. იოსები says:
    September 27, 2007 at 4:19 am

    უყურადღებოდ კითხულობ და იმიტომ :D

  3. ოთო says:
    September 27, 2007 at 4:22 am

    ბოლომდე არ წამიკითხია და მაგიტომ :P

  4. იოსები says:
    September 27, 2007 at 4:23 am

    კარგი მაშინ დაასრულე წიგნი და ეგება წააწყდე :P

დატოვე კომენტარი:

ქართული კლავიატურა, ჩართვა/გამორთვა კლავიშით "~"