innerText -ისა და innerHTML -ის თვისება – JS

ჩავრთოთ ლოკალური ვებ-სერვერი
ჩვენ უკვე შეგვიძლია უკვე ავირჩიოთ / ამოვიღოთ სხვადასხვა ელემენტები ვებ-გვერდებიდან ტეგების მიხედვით, ასევე შეგვიძლია ელემენტების არჩევა / ამოღება id -ბის მიხედვით, ჩვენ შეგვიძლია დავამყაროთ კავშირი ნებისმიერი ელემენტის თვისებასთან, შეგვიძლია გავიგოთ სიგანე,  ფაილის მისამართი, სიმაღლე, ალტერნატიული ტექსტი და ა.შ. DOM ხის გამოყენებით შეგვიძლია გავიგოთ ნებისმიერი ელემენტის მშობელი, ძმა და ა.შ. node.
მაგრამ ჩვენ არ ვიციც თუ როგორ ამოვიღოთ ჩვენთვის სასურველი ტექსტი ჩვენთვის სასურველი node -დან, თუ რა თქმა უნდა ის ტექსტს შეიცავს.
მაგალითად, ჩვენი index.html კოდში გვაქვს სათაური h1, იდენთიფიკატორით main_h1, რომელშიც წერია ტექსტი:
კეთილი იყოს თქვენი მობრძანება საიტზე: 1800flowers.com
innerText -ისა და innerHTML -ის თვისებები - JS
მოდით დავამყაროთ კავშირი ამ ელემენტთან მისი id -ის საშუალებით:
innerText -ისა და innerHTML -ის თვისებები - JS
ელემენტების არჩევა მეთოდით getElementsByTagName() - JS
innerText -ისა და innerHTML -ის თვისებები - JS
როგორც ხედავთ შედეგად მივიღეთ პასუხი რომ აქ არის ობიექტი, რაც სწორია.
თუმცა ჩვენ არ ამოგვიღია ტექსტი ამ node -დან, არსებობს სპეციალური თვისება რომლის საშუალებითაც შეგვიძლია ამ ობიექტში არსებული ტექსტის ამოღება, ის შემუშავებული იქნა ვებ-ბრაუზერების დეველოპერების მიერ და მას ჰქვია innerText ანუ შიდა ტექსტი, აუცილებელია იცოდეთ რომ თვისება innerText არ მუშაობს ყველა ბრაუზერში:
innerText -ისა და innerHTML -ის თვისებები - JS
შედეგი firefox -ში:
innerText -ისა და innerHTML -ის თვისებები - JS
ცარიელი შეტყობინების ფანჯარა, ანუ არ მუშაობს
შედეგი chrome -ში:
innerText -ისა და innerHTML -ის თვისებები - JS
მუშაობს
შედეგი IE -ში:
innerText -ისა და innerHTML -ის თვისებები - JS
მუშაობს
შედეგი Opera -ში:
innerText -ისა და innerHTML -ის თვისებები - JS
მუშაობს
შედეგი safari -ში:
innerText -ისა და innerHTML -ის თვისებები - JS
მუშაობს
პრობლემა იმაშია რომ, firefox -მა არ იცის / არ ესმის ეს თვისება, ჩანს რომ მისმა შემქმნელებმა დანარჩენი სხვა ბრაუზერის შემქმნელებთან ვერ შეთანხმდნენ, მათ წავიდნენ საკუთარი გზით.
ამიტომ firefox ვებ-ბრაუზერს ესმის / იცის სხვა ანალოგიური შესაძლებლობის მქონე თვისება ანუ textContent :
innerText -ისა და innerHTML -ის თვისებები - JS
ელემენტების არჩევა მეთოდით getElementsByTagName() - JS
innerText -ისა და innerHTML -ის თვისებები - JS
მუშაობს
მაგრამ თუ ამ თვისების მიხედვით დაწერილ კოდს შევამოწმებთ სხვა ბრაუზერებში იქ უკვე აღარ იმუშავებს.
შენიშვნა: გარდა ვებ-ბრაუზერი opera, მასში ორივე თვისება ჩაშენებულია.
ამ ან მსგავსი მაგალითის საფუძველზე თქვენთვის სასურველი შედეგი რომ მიიღოთ ნებისმიერ ბრაუზერში, მაშინ უნდა დაწეროთ პირობა რეგულარული გამოსახულებების შესახებ, უნდა გაიგოთ თუ რომელი სახეობის ვებ-ბრაუზერიდან შევიდა მომხმარებელი გვერდზე და შესაბამისი ბრაუზერის მიხედვით უნდა გამოიყენოთ ელემენტიდან ტექსტის ამოღების შესაბამისი თვისება. აქ უკვე ნათლად ჩანს რომ DOM ხესთან მუშაობის დროს გვიწევს ძალიან ვრცელი, მულტიფუნქციონალური კოდის / სკრიპტის წერა, სწორედ ამიტომ შემდეგ კურს გავივლით jquery -ში, რომელიც არის ყველა ვებ-ბრაუზერზე მორგებული javascript ბიბლიოთეკა, რომელშიც მოქცეულია ყველა ეს ფუნქციონალი თუ კომბინაცია. სწორედ jquery უმარტივებს დეველოპერს დასახული / დავალებული ამოცანების შესრულებას, თუმცა ჩვენ იმიტომ შევისწავლეთ javascript რომ მის გარეშე jquery -თან მუშაობა შეუძლებელია, ასევე არსებობს სხვა პირობაც javascript -ის სწავლისა, ერთ-ერთ ასეთ მაგალითად შეგვიძლია მოვიყვანოთ ის რომ, შესაძლებელია თქვენ მოგიწიოთ მხოლოდ javascript -ზე დაწერილი კოდის გარჩევა და თუ თქვენ არ გეცოდინებათ javascript -ი საფუძვლიანად მაშინ ვერ გაარჩევთ ან შეცვლით დავალებული ამოცანის მიხედვით კოდში არსებულ პირობას თუ ფუნქციას.
შემდეგი თვისება რომელიც უნდა განვიხილოთ ეს არის innerHTML , მაგალითისათვის მარტივად რომ გავათვითცნობიეროთ დაგვჭირდება ისეთი div ბლოკი რომელშიც ბევრი სხვა ელემენტია მოთავსებული, ჩვენი index.html ფაილში არსებული კოდის მიხედვით ერთ-ერთი ასეთია: div ბლოკი რომლის id არის : div_for_img :
innerText -ისა და innerHTML -ის თვისებები - JS
ელემენტების არჩევა მეთოდით getElementsByTagName() - JS
innerText -ისა და innerHTML -ის თვისებები - JS
შედეგი სწორია.
ეხლა კი შედეგის სახით მიღებული HTML კოდი შევცვალოთ რაიმე ტექსტით, მაგალითად ყველა ამ სურათის ადგილზე index.html გვერდში გამოვიტანოთ ჩვენთვის სასურველი აბზაცი მუქი / მსხვილი ტექსტით:
ეს სურათების HTML კოდის ჩანაცვლებული აბზაცია.
innerText -ისა და innerHTML -ის თვისებები - JS
ელემენტების არჩევა მეთოდით getElementsByTagName() - JS
innerText -ისა და innerHTML -ის თვისებები - JS
შედეგი სწორია.

Advertisements

One thought on “innerText -ისა და innerHTML -ის თვისება – JS

  1. alert(mainHeader.innerHTML.replace(/]*>/g,”));
    იმუშავებს ყველა ბრაუზერში. პრობლემა ექნება თუ გამოვიყენებთ არატექსტურ ნოუდზე.
    მაგალითად: helloworld
    თუ myTable-ზე გამოვიყენებთ, დააბრუნებს “helloworld”-ს და არა “hello world”-ს, თუმცა ამ შემთხვევაში textContent-საც იგივე პრობლემა აქვს.
    P.S. textContent სტანდარტია, შესაბამისად მისი მხარდაჭერა ყველა თანამედროვე ბრაუზერს აქვს, Chrome-სა და IE-ს ჩათვლით

კომენტარის დატოვება

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / შეცვლა )

Twitter picture

You are commenting using your Twitter account. Log Out / შეცვლა )

Facebook photo

You are commenting using your Facebook account. Log Out / შეცვლა )

Google+ photo

You are commenting using your Google+ account. Log Out / შეცვლა )

Connecting to %s