Code.ge Blog

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

innerHTML შეიქმნა Microsoft – ის მიერ Internet Explorer – ისთვის, თუმცა მოგვიანებით სხვა ბროუზერების მწარმოებლებმაც ჩადეს ელემენტის ეს თვისება თავის პროდუქტებში, ასე რომ არსებული(თუმცა მცირე) პრობლემების მიუხედავად საჭიროების შემთხვევაში არ უნდა ავარიდოთ თავი მის გამოყენებას.

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

Microsoft:

Sets or retrieves the HTML between the start and end tags of the object.

Mozilla:

innerHTML sets or gets all of the markup and content within a given element.

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

როგორც ოფიციალურ დოკუმენტაციაშია ნაჩვენები ამ თვისების გამოყენება ძალიან მარტივია, თუმცა გარდა HTML კოდის პირდაპირ კოპირებისა ან ჩასმისა ელემენტიდან ელემენტში(რაც ამ თვისების პირდაპირი დანიშნულებაა) მისი გამოყენება ასევე შეიძლება HTML კოდის ჩვეულებრივ ტექსტად გარდაქმნისათვის(მაგ. მსგავსი რამ PHP-ში შესაძლებელია htmlspecialchars ფუნქციის გამოყენებით).

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

Click to copy text | Click to copy HTML

ლინკებზე(Click to copy text და Click to copy HTML) ისრის დაწკაპუნებისას პირველი კონტეინერის შემადგენელი HTML კოდი და ტექსტი კოპირდება მეორე კონტეინერში ან პირდაპირ როგორს სტრიქონი(ამ შემთხვევაში HTML კოდის გადაყვანა ხდება სტრიქონში) ან როგორც HTML კოდი.

innerHTML – ს პირდაპირი და მთავარი დანიშნულებაა რომ ელემენტიდან ამოვიღოთ ან მასში ჩავსვათ HTML და ეს პროცედურა დამატებით ახსნას არ საჭიროებს. თუმცა ისეთ შემთხვევაში თუ გვინდა რომ HTML ვაქციოთ უბრალო სტრიქონად საჭიროა შესაბამისი ფუნქციის რეალიზაცია.

ქვემოთ მოყვანილია მაგალითში გამოყენებული HTML და JavaScript კოდი შესაბამისი განხილვით:

[html]Copy Text
 | 
Copy HTML

[/html]

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

1. html-container – რომელიც შეიცავს სხვა ელემენტებსა და ტექსტს
2. text-container – რომელშიც უნდა მოხდეს html-container ელემენეტში არსებული კოდის კოპირება

[javascript]
/**
*param string
*/
function htmlspecialchars(text) {
//create temporary div element
var div = document.createElement(“div”);
//create and append text node to div element
div.appendChild(document.createTextNode(text));
//return transofrmed string
return div.innerHTML;
}

/**
*param boolean
*/
function copyContent(copyText) {
//get html container
var htmlContainer = document.getElementById(“html-container”);
//get text container
var textContainer = document.getElementById(“text-container”);
if (copyText) {
//if copyText parameter was set to true escape contents of htmlContainer object
textContainer.innerHTML = htmlspecialchars(htmlContainer.innerHTML);
} else {
//just copy HTML from one container to other
textContainer.innerHTML = htmlContainer.innerHTML;
}
return false;
}
[/javascript]

ზემოთ აღნიშნული ოპერაციების განსახორციელებლად გამოიყენება ორი ფუნქცია, copyContent რომელიც ღებულობს ერთ პარამეტრს და ამ პარამეტრის შესაბამისად ან უბრალოდ სვავს text-container ელემენტში html-container ელემენტის შიგნით არსებულ HTML კოდს, ან იძახებს htmlspecialchars ფუნქციას რათა მოხდეს კოდის გადაყვანა ჩვეულებრივ სტრიქონში და text-container ელემენტში სვავს უბრალოდ სტრიქონს.

საინტერესო ამ კოდში არის სწორედ htmlspecialchars ფუნქცია რომლის გამოყენება(და დანიშნულება) ანალოგიურია PHP – ს იგივე დასახელების მქონე ფუნქციისა. იგი პარამეტრად ღებულობს HTML კოდს(რომლის გადაყვანაც უნდა მოხდეს ჩვეულებრივ სტრიქონში) და აბრუნებს ჩვეულებრივ სტრიქონს. ეს ყველაფერი მიიღწევა DOM მეთოდების გამოყენებით:

1. document.createElement(“div”) – კოდი ქმნის დროებით div ელემენტს
2. div.appendChild(document.createTextNode(text)) – კოდში createTextNode მეთოდის გამოყენებით ვქმნით ტექსტურ ელემენტს რომელსაც პარამეტრად გადავცემთ text ცვლადს(აქ მნიშვნელოვანია სწორედ createTextNode მეთოდი რომლის მეშვეობითაც ხდება HTML კოდის ჩვეულებრივ სტრიქონად გარდაქმნა) და ვამატებთ ამ ელემენტს წინასწარ შექმნილ div ელემენტში.
3. return div.innerHTML – div ელემენტის innerHTML თვისება უკვე შეიცავს სტრიქონს ნაცვლად HTML კოდისა.

ამ მაგალითში ნაჩვენები იყო თუ როგორ შეიძლება უფრო სასარგებლოდ გამოვიყენოთ ელემენტის innerHTML თვისება და რამდენად სასარგებლო შეიძლება იყოს იგი რიგ შემთხვევებში.

P.S.
მაგალითში გამოყენებულია ლათინური ტექსტი(Lorem ipsum… და ა.შ.) რის შესახებაც ინფორმაცია შეგიძლიათ იხილოთ შესაბამის რესურსზე.

ტეგები: JavaScript, JavaScript DOM