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

ჩავრთოთ ლოკალური ვებ-სერვერი
ჩვენ უკვე შეგვიძლია უკვე ავირჩიოთ / ამოვიღოთ სხვადასხვა ელემენტები ვებ-გვერდებიდან ტეგების მიხედვით, ასევე შეგვიძლია ელემენტების არჩევა / ამოღება id -ბის მიხედვით, ჩვენ შეგვიძლია დავამყაროთ კავშირი ნებისმიერი ელემენტის თვისებასთან, შეგვიძლია გავიგოთ სიგანე,  ფაილის მისამართი, სიმაღლე, ალტერნატიული ტექსტი და ა.შ. DOM ხის გამოყენებით შეგვიძლია გავიგოთ ნებისმიერი ელემენტის მშობელი, ძმა და ა.შ. node.
მაგრამ ჩვენ არ ვიციც თუ როგორ ამოვიღოთ ჩვენთვის სასურველი ტექსტი ჩვენთვის სასურველი node -დან, თუ რა თქმა უნდა ის ტექსტს შეიცავს.
მაგალითად, ჩვენი index.html კოდში გვაქვს სათაური h1, იდენთიფიკატორით main_h1, რომელშიც წერია ტექსტი:
კეთილი იყოს თქვენი მობრძანება საიტზე: 1800flowers.com

მოდით დავამყაროთ კავშირი ამ ელემენტთან მისი id -ის საშუალებით:



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

შედეგი firefox -ში:

ცარიელი შეტყობინების ფანჯარა, ანუ არ მუშაობს
შედეგი chrome -ში:

მუშაობს
შედეგი IE -ში:

მუშაობს
შედეგი Opera -ში:

მუშაობს
შედეგი safari -ში:

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



მუშაობს
მაგრამ თუ ამ თვისების მიხედვით დაწერილ კოდს შევამოწმებთ სხვა ბრაუზერებში იქ უკვე აღარ იმუშავებს.
შენიშვნა: გარდა ვებ-ბრაუზერი opera, მასში ორივე თვისება ჩაშენებულია.
ამ ან მსგავსი მაგალითის საფუძველზე თქვენთვის სასურველი შედეგი რომ მიიღოთ ნებისმიერ ბრაუზერში, მაშინ უნდა დაწეროთ პირობა რეგულარული გამოსახულებების შესახებ, უნდა გაიგოთ თუ რომელი სახეობის ვებ-ბრაუზერიდან შევიდა მომხმარებელი გვერდზე და შესაბამისი ბრაუზერის მიხედვით უნდა გამოიყენოთ ელემენტიდან ტექსტის ამოღების შესაბამისი თვისება. აქ უკვე ნათლად ჩანს რომ DOM ხესთან მუშაობის დროს გვიწევს ძალიან ვრცელი, მულტიფუნქციონალური კოდის / სკრიპტის წერა, სწორედ ამიტომ შემდეგ კურს გავივლით jquery -ში, რომელიც არის ყველა ვებ-ბრაუზერზე მორგებული javascript ბიბლიოთეკა, რომელშიც მოქცეულია ყველა ეს ფუნქციონალი თუ კომბინაცია. სწორედ jquery უმარტივებს დეველოპერს დასახული / დავალებული ამოცანების შესრულებას, თუმცა ჩვენ იმიტომ შევისწავლეთ javascript რომ მის გარეშე jquery -თან მუშაობა შეუძლებელია, ასევე არსებობს სხვა პირობაც javascript -ის სწავლისა, ერთ-ერთ ასეთ მაგალითად შეგვიძლია მოვიყვანოთ ის რომ, შესაძლებელია თქვენ მოგიწიოთ მხოლოდ javascript -ზე დაწერილი კოდის გარჩევა და თუ თქვენ არ გეცოდინებათ javascript -ი საფუძვლიანად მაშინ ვერ გაარჩევთ ან შეცვლით დავალებული ამოცანის მიხედვით კოდში არსებულ პირობას თუ ფუნქციას.
შემდეგი თვისება რომელიც უნდა განვიხილოთ ეს არის innerHTML , მაგალითისათვის მარტივად რომ გავათვითცნობიეროთ დაგვჭირდება ისეთი div ბლოკი რომელშიც ბევრი სხვა ელემენტია მოთავსებული, ჩვენი index.html ფაილში არსებული კოდის მიხედვით ერთ-ერთი ასეთია: div ბლოკი რომლის id არის : div_for_img :



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



შედეგი სწორია.