document<\/code> nesnesidir ve t\u00fcm di\u011fer elemanlar bu nesnenin alt\u0131ndad\u0131r. DOM, web geli\u015ftiricilerine JavaScript arac\u0131l\u0131\u011f\u0131yla bu d\u00fc\u011f\u00fcmlere eri\u015fme, onlar\u0131 de\u011fi\u015ftirme, yeni d\u00fc\u011f\u00fcmler olu\u015fturma ve mevcut d\u00fc\u011f\u00fcmleri silme yetene\u011fi sunar. Bu sayede, kullan\u0131c\u0131 etkile\u015fimlerine yan\u0131t veren, verileri dinamik olarak y\u00fckleyen veya sayfa i\u00e7eri\u011fini an\u0131nda g\u00fcncelleyen web uygulamalar\u0131 geli\u015ftirmek m\u00fcmk\u00fcn hale gelir.<\/p>\nDOM’un Yap\u0131s\u0131: A\u011fa\u00e7 Modeli<\/h4>\n
DOM, bir a\u011fa\u00e7 yap\u0131s\u0131 olarak g\u00f6rselle\u015ftirilebilir. Bu yap\u0131n\u0131n en tepesinde document<\/code> nesnesi bulunur. document<\/code> nesnesinin alt\u0131nda, <\/code> etiketiyle temsil edilen k\u00f6k eleman yer al\u0131r. <\/code> eleman\u0131n\u0131n alt\u0131nda ise <\/code> ve <\/code> gibi elemanlar bulunur. Her eleman, kendi i\u00e7inde ba\u015fka elemanlar\u0131 (\u00e7ocuklar\u0131) bar\u0131nd\u0131rabilir ve ayn\u0131 seviyede ba\u015fka elemanlarla (karde\u015fleri) birlikte bulunabilir. \u00d6rne\u011fin, bir <\/p>\n<\/code> eleman\u0131n\u0131n i\u00e7inde birden fazla <\/p>\n<\/code> etiketi olabilir ve bu <\/p>\n<\/code> etiketleri birbirinin karde\u015fi olurken, <\/p>\n<\/code> etiketi de onlar\u0131n ebeveyni olur. Bu hiyerar\u015fik yap\u0131, JavaScript’in belirli bir eleman\u0131 hedeflemesini, onun \u00e7ocuklar\u0131na veya ebeveynine ula\u015fmas\u0131n\u0131 ve b\u00f6ylece sayfan\u0131n herhangi bir b\u00f6l\u00fcm\u00fcn\u00fc manip\u00fcle etmesini kolayla\u015ft\u0131r\u0131r.<\/p>\nWeb Geli\u015ftirmedeki Rol\u00fc<\/h4>\n
DOM, modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir. Kullan\u0131c\u0131 etkile\u015fimlerini y\u00f6netmek (t\u0131klamalar, form g\u00f6nderimleri, klavye giri\u015fleri), sunucudan gelen verileri sayfaya yans\u0131tmak, animasyonlar ve g\u00f6rsel efektler olu\u015fturmak, form do\u011frulama yapmak ve genel olarak web sayfalar\u0131n\u0131 statik olmaktan \u00e7\u0131kar\u0131p dinamik ve etkile\u015fimli hale getirmek i\u00e7in DOM manip\u00fclasyonu ka\u00e7\u0131n\u0131lmazd\u0131r. JavaScript, bu manip\u00fclasyonlar\u0131 ger\u00e7ekle\u015ftirmek i\u00e7in taray\u0131c\u0131 taraf\u0131ndan sa\u011flanan DOM API’lerini kullan\u0131r. Bu makale, JavaScript kullanarak DOM \u00fczerinde nas\u0131l de\u011fi\u015fiklikler yap\u0131laca\u011f\u0131n\u0131, elemanlara nas\u0131l eri\u015filece\u011fini, yeni elemanlar\u0131n nas\u0131l olu\u015fturulup eklenece\u011fini, mevcut elemanlar\u0131n nas\u0131l g\u00fcncellenip silinece\u011fini ve olay dinleyicileriyle nas\u0131l etkile\u015fim kurulaca\u011f\u0131n\u0131 detayl\u0131 bir \u015fekilde a\u00e7\u0131klayacakt\u0131r.<\/p>\n
DOM Elemanlar\u0131na Eri\u015fme Y\u00f6ntemleri<\/h3>\n
DOM \u00fczerinde herhangi bir de\u011fi\u015fiklik yapmadan \u00f6nce, hedef elemana eri\u015fmemiz gerekir. JavaScript, bu ama\u00e7la \u00e7e\u015fitli y\u00f6ntemler sunar. Do\u011fru y\u00f6ntemi se\u00e7mek, performans ve kod okunabilirli\u011fi a\u00e7\u0131s\u0131ndan \u00f6nemlidir.<\/p>\n
ID ile Eri\u015fme: getElementById()<\/code><\/h4>\ndocument.getElementById()<\/code> y\u00f6ntemi, bir HTML eleman\u0131na benzersiz id<\/code> niteli\u011fi arac\u0131l\u0131\u011f\u0131yla eri\u015fmenin en h\u0131zl\u0131 ve en do\u011frudan yoludur. Her id<\/code> de\u011feri belgede yaln\u0131zca bir kez kullan\u0131lmal\u0131d\u0131r. E\u011fer belirtilen id<\/code>‘ye sahip bir eleman bulunamazsa, y\u00f6ntem null<\/code> d\u00f6nd\u00fcr\u00fcr.<\/p>\n\/\/ HTML: Merhaba D\u00fcnya<\/div>\nconst myDiv = document.getElementById('myDiv');\nconsole.log(myDiv.textContent); \/\/ \"Merhaba D\u00fcnya\"<\/code><\/pre>\nS\u0131n\u0131f Ad\u0131 ile Eri\u015fme: getElementsByClassName()<\/code><\/h4>\ndocument.getElementsByClassName()<\/code> y\u00f6ntemi, belirli bir s\u0131n\u0131f ad\u0131na sahip t\u00fcm elemanlar\u0131 i\u00e7eren canl\u0131 bir HTMLCollection<\/code> d\u00f6nd\u00fcr\u00fcr. “Canl\u0131” olmas\u0131, DOM’da yap\u0131lan de\u011fi\u015fikliklerin bu koleksiyonu otomatik olarak g\u00fcncellemesi anlam\u0131na gelir. E\u011fer e\u015fle\u015fen eleman bulunamazsa bo\u015f bir koleksiyon d\u00f6nd\u00fcr\u00fcl\u00fcr.<\/p>\n\/\/ HTML: Paragraf 1<\/p>
Paragraf 2<\/p>\nconst paragraphs = document.getElementsByClassName('myClass');\nconsole.log(paragraphs.length); \/\/ 2\nconsole.log(paragraphs[0].textContent); \/\/ \"Paragraf 1\"<\/code><\/pre>\n
Etiket Ad\u0131 ile Eri\u015fme: getElementsByTagName()<\/code><\/h4>\ndocument.getElementsByTagName()<\/code> y\u00f6ntemi, belirtilen etiket ad\u0131na (\u00f6rne\u011fin, p<\/code>, div<\/code>, a<\/code>) sahip t\u00fcm elemanlar\u0131 i\u00e7eren canl\u0131 bir HTMLCollection<\/code> d\u00f6nd\u00fcr\u00fcr. T\u0131pk\u0131 getElementsByClassName()<\/code> gibi, bu da canl\u0131 bir koleksiyondur.<\/p>\n\/\/ HTML: - \u00d6\u011fe 1<\/li>
- \u00d6\u011fe 2<\/li><\/ul>\nconst listItems = document.getElementsByTagName('li');\nconsole.log(listItems.length); \/\/ 2\nconsole.log(listItems[1].textContent); \/\/ \"\u00d6\u011fe 2\"<\/code><\/pre>\n
CSS Se\u00e7iciler ile Eri\u015fme: querySelector()<\/code> ve querySelectorAll()<\/code><\/h4>\nBu iki y\u00f6ntem, modern web geli\u015ftirmenin en g\u00fc\u00e7l\u00fc ve esnek eleman eri\u015fim ara\u00e7lar\u0131d\u0131r. CSS se\u00e7icilerini kullanarak elemanlara eri\u015fmenizi sa\u011flarlar.<\/p>\n
* document.querySelector()<\/code>:<\/strong> Belirtilen CSS se\u00e7iciyle e\u015fle\u015fen ilk eleman\u0131 d\u00f6nd\u00fcr\u00fcr. E\u011fer e\u015fle\u015fen bir eleman bulunamazsa null<\/code> d\u00f6nd\u00fcr\u00fcr. Tek bir elemana ihtiyac\u0131n\u0131z oldu\u011funda idealdir.<\/p>\n\/\/ HTML: \u0130lk metin<\/p>
\u0130kinci metin<\/p><\/div>\n const firstParagraph = document.querySelector('#container .text');\n console.log(firstParagraph.textContent); \/\/ \"\u0130lk metin\"<\/code><\/pre>\n
* document.querySelectorAll()<\/code>:<\/strong> Belirtilen CSS se\u00e7iciyle e\u015fle\u015fen t\u00fcm elemanlar\u0131 i\u00e7eren statik bir NodeList<\/code> d\u00f6nd\u00fcr\u00fcr. “Statik” olmas\u0131, DOM’da yap\u0131lan de\u011fi\u015fikliklerin bu listeyi otomatik olarak g\u00fcncellemedi\u011fi anlam\u0131na gelir. E\u011fer e\u015fle\u015fen eleman bulunamazsa bo\u015f bir NodeList<\/code> d\u00f6nd\u00fcr\u00fcl\u00fcr.<\/p>\nconst allParagraphs = document.querySelectorAll('.text');\n console.log(allParagraphs.length); \/\/ 2\n allParagraphs.forEach(p => console.log(p.textContent));\n \/\/ \u00c7\u0131kt\u0131: \"\u0130lk metin\", \"\u0130kinci metin\"<\/code><\/pre>\nquerySelector<\/code> ve querySelectorAll<\/code>, ID, s\u0131n\u0131f, etiket, nitelik se\u00e7icileri ve bunlar\u0131n kombinasyonlar\u0131 dahil olmak \u00fczere herhangi bir ge\u00e7erli CSS se\u00e7icisini kullanabilir. Bu, onlar\u0131 elemanlara eri\u015fim i\u00e7in son derece esnek k\u0131lar.<\/p>\nTraversal Y\u00f6ntemleri: Ebeveyn, \u00c7ocuk, Karde\u015f Elemanlara Eri\u015fim<\/h4>\n
Bazen do\u011frudan bir se\u00e7ici kullanmak yerine, zaten eri\u015fti\u011fimiz bir elemandan yola \u00e7\u0131karak di\u011fer elemanlara (ebeveyn, \u00e7ocuk veya karde\u015f) ula\u015fmak isteyebiliriz. Bu, DOM’un a\u011fa\u00e7 yap\u0131s\u0131ndan faydalanarak yap\u0131l\u0131r.<\/p>\n
* parentNode<\/code>:<\/strong> Bir eleman\u0131n do\u011frudan ebeveyn d\u00fc\u011f\u00fcm\u00fcn\u00fc d\u00f6nd\u00fcr\u00fcr.<\/p>\n\/\/ HTML: Ben \u00e7ocu\u011fum<\/p><\/div>\n const child = document.getElementById('child');\n const parent = child.parentNode;\n console.log(parent.id); \/\/ \"parent\"<\/code><\/pre>\n
* children<\/code>:<\/strong> Bir eleman\u0131n t\u00fcm \u00e7ocuk elemanlar\u0131n\u0131 (yaln\u0131zca eleman d\u00fc\u011f\u00fcmleri, metin d\u00fc\u011f\u00fcmleri de\u011fil) i\u00e7eren canl\u0131 bir HTMLCollection<\/code> d\u00f6nd\u00fcr\u00fcr.<\/p>\n\/\/ HTML: - \u00d6\u011fe 1<\/li>
- \u00d6\u011fe 2<\/li><\/ul>\n const myList = document.getElementById('myList');\n const children = myList.children;\n console.log(children.length); \/\/ 2<\/code><\/pre>\n
* firstChild<\/code> \/ lastChild<\/code>:<\/strong> Bir eleman\u0131n ilk\/son \u00e7ocuk d\u00fc\u011f\u00fcm\u00fcn\u00fc (metin veya yorum d\u00fc\u011f\u00fcmleri dahil) d\u00f6nd\u00fcr\u00fcr.
\n firstElementChild<\/code> \/ lastElementChild<\/code>:<\/strong> Bir eleman\u0131n ilk\/son \u00e7ocuk <\/em>eleman* d\u00fc\u011f\u00fcm\u00fcn\u00fc d\u00f6nd\u00fcr\u00fcr. Genellikle bu ikisi tercih edilir, \u00e7\u00fcnk\u00fc metin d\u00fc\u011f\u00fcmlerini g\u00f6z ard\u0131 ederler.<\/p>\n\/\/ HTML: \u0130lk metin Span<\/span> Son metin <\/div>\n const container = document.getElementById('container');\n console.log(container.firstChild); \/\/ Metin d\u00fc\u011f\u00fcm\u00fc\n console.log(container.firstElementChild.tagName); \/\/ \"SPAN\"<\/code><\/pre>\n nextElementSibling<\/code> \/ previousElementSibling<\/code>:<\/strong> Bir eleman\u0131n DOM a\u011fac\u0131ndaki bir sonraki\/\u00f6nceki karde\u015f <\/em>eleman* d\u00fc\u011f\u00fcm\u00fcn\u00fc d\u00f6nd\u00fcr\u00fcr.<\/p>\n\/\/ HTML: Paragraf 1<\/p>
Paragraf 2<\/p>\n const p1 = document.getElementById('p1');\n const p2 = p1.nextElementSibling;\n console.log(p2.id); \/\/ \"p2\"<\/code><\/pre>\n
Bu y\u00f6ntemler, belirli bir eleman\u0131n konumuna g\u00f6re di\u011fer elemanlara eri\u015fmek i\u00e7in son derece kullan\u0131\u015fl\u0131d\u0131r ve karma\u015f\u0131k DOM yap\u0131lar\u0131nda gezinmeyi sa\u011flar.<\/p>\n
Yeni DOM Elemanlar\u0131 Olu\u015fturma ve Ekleme<\/h3>\n
Web sayfalar\u0131na dinamik olarak i\u00e7erik eklemek, DOM manip\u00fclasyonunun en yayg\u0131n kullan\u0131mlar\u0131ndan biridir. JavaScript, yeni HTML elemanlar\u0131 olu\u015fturup bunlar\u0131 mevcut DOM’a eklemek i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar.<\/p>\n
Eleman Olu\u015fturma: createElement()<\/code><\/h4>\ndocument.createElement()<\/code> y\u00f6ntemi, belirtilen etiket ad\u0131na sahip yeni bir HTML eleman\u0131 olu\u015fturur. Bu eleman, hen\u00fcz DOM’a eklenmemi\u015ftir; sadece haf\u0131zada bir nesne olarak var olur.<\/p>\nconst newDiv = document.createElement('div'); \/\/ Yeni bir eleman\u0131 olu\u015fturur\nconst newParagraph = document.createElement('p'); \/\/ Yeni bir eleman\u0131 olu\u015fturur<\/code><\/pre>\n
Metin D\u00fc\u011f\u00fcm\u00fc Olu\u015fturma: createTextNode()<\/code><\/h4>\nBir eleman\u0131n i\u00e7ine metin eklemek i\u00e7in textContent<\/code> veya innerHTML<\/code> kullan\u0131labilece\u011fi gibi, do\u011frudan bir metin d\u00fc\u011f\u00fcm\u00fc de olu\u015fturulabilir. document.createTextNode()<\/code> y\u00f6ntemi, belirtilen metin i\u00e7eri\u011fine sahip yeni bir metin d\u00fc\u011f\u00fcm\u00fc olu\u015fturur.<\/p>\nconst textNode = document.createTextNode('Bu yeni bir metin.');<\/code><\/pre>\nBu metin d\u00fc\u011f\u00fcm\u00fc daha sonra bir elemana appendChild()<\/code> ile eklenebilir.<\/p>\nElemanlar\u0131 Ekleme: appendChild()<\/code>, insertBefore()<\/code><\/h4>\nOlu\u015fturulan elemanlar\u0131 veya metin d\u00fc\u011f\u00fcmlerini DOM’a eklemek i\u00e7in \u00e7e\u015fitli y\u00f6ntemler bulunur:<\/p>\n
* parentNode.appendChild(childNode)<\/code>:<\/strong> Belirtilen childNode<\/code>‘u, parentNode<\/code>‘un son \u00e7ocu\u011fu olarak ekler.<\/p>\nconst container = document.getElementById('container'); \/\/ Mevcut bir eleman\n const newDiv = document.createElement('div');\n newDiv.textContent = 'Yeni Div \u0130\u00e7eri\u011fi';\n container.appendChild(newDiv); \/\/ container i\u00e7ine newDiv'i ekler<\/code><\/pre>\n* parentNode.insertBefore(newNode, referenceNode)<\/code>:<\/strong> newNode<\/code>‘u, parentNode<\/code>‘un \u00e7ocuklar\u0131 aras\u0131na, referenceNode<\/code>‘dan hemen \u00f6nce ekler.<\/p>\nconst list = document.getElementById('myList'); \/\/ Mevcut bir \n const newItem = document.createElement('li');\n newItem.textContent = 'Yeni \u00d6\u011fe';\n const firstItem = list.firstElementChild; \/\/ Listenin ilk \u00f6\u011fesi\n list.insertBefore(newItem, firstItem); \/\/ Yeni \u00f6\u011feyi ilk \u00f6\u011feden \u00f6nce ekler<\/code><\/pre>\n* element.append()<\/code> ve element.prepend()<\/code>:<\/strong> Bu modern y\u00f6ntemler, bir eleman\u0131n i\u00e7ine birden fazla d\u00fc\u011f\u00fcm veya metin eklemeye olanak tan\u0131r. append()<\/code> sona, prepend()<\/code> ba\u015fa ekler.<\/p>\nconst container = document.getElementById('container');\n const p1 = document.createElement('p');\n p1.textContent = 'Paragraf 1';\n const p2 = document.createElement('p');\n p2.textContent = 'Paragraf 2';\n container.append(p1, p2, 'Metin de ekleyebiliriz.'); \/\/ Birden fazla eleman ve metin ekler<\/code><\/pre>\n* element.before()<\/code> ve element.after()<\/code>:<\/strong> Bir eleman\u0131n kendisinden \u00f6nce veya sonra karde\u015f eleman olarak eklemeye yarar.<\/p>\nconst existingElement = document.getElementById('existing');\n const newSibling = document.createElement('span');\n newSibling.textContent = 'Yeni Karde\u015f';\n existingElement.before(newSibling); \/\/ existingElement'ten \u00f6nce ekler<\/code><\/pre>\n\u00d6rnek Senaryo: Dinamik Liste Olu\u015fturma<\/h4>\n
Bir JavaScript dizisinden dinamik olarak bir liste (ul\/li) olu\u015fturma:<\/p>\n
\/\/ HTML: <\/ul>\nconst data = ['Elma', 'Armut', 'Muz', '\u00c7ilek'];\nconst dynamicList = document.getElementById('dynamicList');\n\ndata.forEach(itemText => {\n const listItem = document.createElement('li'); \/\/ Yeni - olu\u015ftur\n listItem.textContent = itemText; \/\/ Metin i\u00e7eri\u011fini ayarla\n dynamicList.appendChild(listItem); \/\/
'ye - 'yi ekle\n});\n\/\/ Sonu\u00e7:
- Elma<\/li>
- Armut<\/li>
- Muz<\/li>
- \u00c7ilek<\/li><\/ul><\/code><\/pre>\n
Mevcut DOM Elemanlar\u0131n\u0131 G\u00fcncelleme<\/h3>\n
Var olan elemanlar\u0131n i\u00e7eri\u011fini, niteliklerini veya stilini de\u011fi\u015ftirmek, DOM manip\u00fclasyonunun en s\u0131k kar\u015f\u0131la\u015f\u0131lan g\u00f6revlerinden biridir.<\/p>\n
Metin \u0130\u00e7eri\u011fini De\u011fi\u015ftirme: textContent<\/code> ve innerHTML<\/code><\/h4>\n* element.textContent<\/code>:<\/strong> Bir eleman\u0131n ve onun t\u00fcm alt elemanlar\u0131n\u0131n sadece metin i\u00e7eri\u011fini al\u0131r veya ayarlar. HTML etiketlerini metin olarak ele al\u0131r ve g\u00fcvenlik a\u00e7\u0131s\u0131ndan daha g\u00fcvenlidir.<\/p>\n\/\/ HTML: Eski Metin<\/p>\n const myParagraph = document.getElementById('myParagraph');\n myParagraph.textContent = 'Yeni Metin'; \/\/
Yeni Metin<\/p>\n myParagraph.textContent = 'Kal\u0131n Metin<\/b>'; \/\/
<b>Kal\u0131n Metin<\/b><\/p><\/code><\/pre>\n
* element.innerHTML<\/code>:<\/strong> Bir eleman\u0131n HTML i\u00e7eri\u011fini al\u0131r veya ayarlar. Bu, sadece metin de\u011fil, ayn\u0131 zamanda HTML etiketlerini de eklemenize olanak tan\u0131r. Ancak, kullan\u0131c\u0131dan gelen verilerle kullan\u0131ld\u0131\u011f\u0131nda XSS (Cross-Site Scripting) g\u00fcvenlik a\u00e7\u0131klar\u0131na yol a\u00e7abilir.<\/p>\n\/\/ HTML: <\/div>\n const myDiv = document.getElementById('myDiv');\n myDiv.innerHTML = 'Ba\u015fl\u0131k<\/h2>
Yeni \u0130\u00e7erik<\/p>';\n \/\/ Sonu\u00e7:
Ba\u015fl\u0131k<\/h2>
Yeni \u0130\u00e7erik<\/p><\/div>\n\n \/\/ G\u00fcvenlik Notu:\n \/\/ myDiv.innerHTML = userInput; \/\/ E\u011fer userInput k\u00f6t\u00fc niyetli script i\u00e7eriyorsa tehlikeli olabilir.<\/code><\/pre>\n
Genel olarak, sadece metin i\u00e7eri\u011fini de\u011fi\u015ftirecekseniz textContent<\/code>‘\u0131 tercih edin. HTML yap\u0131s\u0131n\u0131 de\u011fi\u015ftirmek gerekiyorsa innerHTML<\/code>‘i dikkatli kullan\u0131n veya document.createElement()<\/code> gibi y\u00f6ntemlerle elemanlar\u0131 programatik olarak olu\u015fturup ekleyin.<\/p>\nNitelikleri (Attribute) De\u011fi\u015ftirme: setAttribute()<\/code>, getAttribute()<\/code>, removeAttribute()<\/code><\/h4>\nHTML elemanlar\u0131n\u0131n nitelikleri (\u00f6rne\u011fin, src<\/code>, href<\/code>, class<\/code>, id<\/code>) JavaScript ile okunabilir, de\u011fi\u015ftirilebilir veya kald\u0131r\u0131labilir.<\/p>\n* element.setAttribute(name, value)<\/code>:<\/strong> Bir eleman\u0131n belirtilen niteli\u011fini ayarlar veya g\u00fcnceller.<\/p>\n\/\/ HTML: ![\"Eski](\"old.jpg\")
\n const myImage = document.getElementById('myImage');\n myImage.setAttribute('src', 'new.jpg');\n myImage.setAttribute('alt', 'Yeni Resim');\n myImage.setAttribute('width', '200'); \/\/ Yeni bir nitelik ekler<\/code><\/pre>\n* element.getAttribute(name)<\/code>:<\/strong> Bir eleman\u0131n belirtilen niteli\u011finin de\u011ferini d\u00f6nd\u00fcr\u00fcr.<\/p>\nconsole.log(myImage.getAttribute('src')); \/\/ \"new.jpg\"<\/code><\/pre>\n* element.removeAttribute(name)<\/code>:<\/strong> Bir eleman\u0131n belirtilen niteli\u011fini kald\u0131r\u0131r.<\/p>\nmyImage.removeAttribute('width'); \/\/ width niteli\u011fini kald\u0131r\u0131r<\/code><\/pre>\nBaz\u0131 yayg\u0131n nitelikler (id, className, href, src vb.) do\u011frudan eleman\u0131n bir \u00f6zelli\u011fi olarak da eri\u015filebilir ve de\u011fi\u015ftirilebilir:<\/p>\n
myImage.src = 'another.jpg'; \/\/ Daha k\u0131sa ve yayg\u0131n kullan\u0131m\nconsole.log(myImage.id);<\/code><\/pre>\nStil De\u011fi\u015fiklikleri: style<\/code> Nesnesi ve classList<\/code> API<\/h4>\nElemanlar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirmek i\u00e7in CSS stilleri manip\u00fcle edilebilir.<\/p>\n
* Inline Stiller: element.style<\/code> Nesnesi:<\/strong> Her HTML eleman\u0131n\u0131n bir style<\/code> \u00f6zelli\u011fi vard\u0131r. Bu \u00f6zellik, eleman\u0131n inline CSS stillerini i\u00e7eren bir CSSStyleDeclaration nesnesidir. JavaScript ile bu nesnenin \u00f6zelliklerini ayarlayarak do\u011frudan inline stil uygulayabilirsiniz. CSS \u00f6zellik adlar\u0131 camelCase format\u0131nda yaz\u0131l\u0131r (\u00f6rne\u011fin, background-color<\/code> yerine backgroundColor<\/code>).<\/p>\nconst myDiv = document.getElementById('myDiv');\n myDiv.style.backgroundColor = 'blue';\n myDiv.style.color = 'white';\n myDiv.style.fontSize = '18px';<\/code><\/pre>\n Bu y\u00f6ntem, tekil stil de\u011fi\u015fiklikleri i\u00e7in uygundur ancak karma\u015f\u0131k stil y\u00f6netimi i\u00e7in \u00f6nerilmez. Inline stiller, CSS \u00f6ncelik s\u0131ralamas\u0131nda y\u00fcksek bir yere sahiptir ve genellikle daha az esneklik sa\u011flar.<\/p>\n
* CSS S\u0131n\u0131flar\u0131 ile Y\u00f6netim: element.classList<\/code> API:<\/strong> Elemanlar\u0131n stillerini y\u00f6netmenin en iyi yolu, CSS s\u0131n\u0131flar\u0131n\u0131 kullanmakt\u0131r. classList<\/code> API’si, bir eleman\u0131n s\u0131n\u0131f listesini kolayca y\u00f6netmenizi sa\u011flar.<\/p>\n * element.classList.add(className)<\/code>:<\/strong> Bir veya daha fazla s\u0131n\u0131f ekler.
\n * element.classList.remove(className)<\/code>:<\/strong> Bir veya daha fazla s\u0131n\u0131f\u0131 kald\u0131r\u0131r.
\n * element.classList.toggle(className)<\/code>:<\/strong> S\u0131n\u0131f varsa kald\u0131r\u0131r, yoksa ekler.
\n * element.classList.contains(className)<\/code>:<\/strong> Belirtilen s\u0131n\u0131f\u0131n eleman \u00fczerinde olup olmad\u0131\u011f\u0131n\u0131 kontrol eder (true<\/code>\/false<\/code> d\u00f6nd\u00fcr\u00fcr).<\/p>\n\/\/ CSS: .highlight { background-color: yellow; } .active { color: red; }\n const myButton = document.getElementById('myButton');\n\n myButton.classList.add('highlight'); \/\/ highlight s\u0131n\u0131f\u0131n\u0131 ekler\n console.log(myButton.classList.contains('highlight')); \/\/ true\n\n myButton.classList.remove('highlight'); \/\/ highlight s\u0131n\u0131f\u0131n\u0131 kald\u0131r\u0131r\n console.log(myButton.classList.contains('highlight')); \/\/ false\n\n myButton.classList.toggle('active'); \/\/ active s\u0131n\u0131f\u0131n\u0131 ekler\n \/\/ Kullan\u0131c\u0131 bir daha t\u0131klad\u0131\u011f\u0131nda:\n myButton.classList.toggle('active'); \/\/ active s\u0131n\u0131f\u0131n\u0131 kald\u0131r\u0131r<\/code><\/pre>\n classList<\/code> API’si, stil de\u011fi\u015fikliklerini daha mod\u00fcler ve y\u00f6netilebilir hale getirir, \u00e7\u00fcnk\u00fc t\u00fcm stil tan\u0131mlamalar\u0131 CSS dosyalar\u0131nda kal\u0131r.<\/p>\nDOM Elemanlar\u0131n\u0131 Silme ve Kald\u0131rma<\/h3>\n
Dinamik web sayfalar\u0131nda, art\u0131k ihtiya\u00e7 duyulmayan elemanlar\u0131 DOM’dan kald\u0131rmak da \u00f6nemlidir. Bu, sayfa performans\u0131n\u0131 art\u0131rabilir ve gereksiz bellek kullan\u0131m\u0131n\u0131 \u00f6nleyebilir.<\/p>\n
Eleman Silme: parentNode.removeChild(childNode)<\/code><\/h4>\nBir eleman\u0131 kald\u0131rmak i\u00e7in, onun ebeveynine eri\u015fip removeChild()<\/code> y\u00f6ntemini \u00e7a\u011f\u0131rman\u0131z gerekir. Bu y\u00f6ntem, belirtilen \u00e7ocuk d\u00fc\u011f\u00fcm\u00fcn\u00fc DOM’dan kald\u0131r\u0131r.<\/p>\n\/\/ HTML: Beni kald\u0131r!<\/p><\/div>\nconst container = document.getElementById('container');\nconst removableParagraph = document.getElementById('removable');\n\nif (removableParagraph) {\n container.removeChild(removableParagraph); \/\/ Paragraf\u0131 container'dan kald\u0131r\u0131r\n}<\/code><\/pre>\n
Bu y\u00f6ntem, kald\u0131r\u0131lacak eleman\u0131n ebeveynini bilmeyi gerektirir.<\/p>\n
Kendini Silme: element.remove()<\/code><\/h4>\nModern taray\u0131c\u0131larda (IE hari\u00e7), bir eleman\u0131 kendi \u00fczerinden remove()<\/code> y\u00f6ntemiyle kald\u0131rmak \u00e7ok daha kolayd\u0131r. Bu y\u00f6ntem, eleman\u0131 do\u011frudan DOM’dan kald\u0131r\u0131r ve ebeveynini bilme gereksinimini ortadan kald\u0131r\u0131r.<\/p>\n\/\/ HTML: Beni kald\u0131r!<\/p><\/div>\nconst removableParagraph = document.getElementById('removable');\n\nif (removableParagraph) {\n removableParagraph.remove(); \/\/ Paragraf\u0131 do\u011frudan kald\u0131r\u0131r\n}<\/code><\/pre>\n
remove()<\/code> y\u00f6ntemi, removeChild()<\/code>‘a g\u00f6re daha sezgisel ve kullan\u0131m\u0131 kolayd\u0131r.<\/p>\n\u00d6rnek Senaryo: Dinamik Eleman Silme<\/h4>\n
Bir “Sil” d\u00fc\u011fmesi t\u0131kland\u0131\u011f\u0131nda, ilgili liste \u00f6\u011fesini kald\u0131rma:<\/p>\n
\/\/ HTML:\n\/\/ \n\/\/