JavaScript DOM | Manipulating Elements Temelleri
Selamlar dostlar,
JavaScript Dom ile elementlere erişme ve değiştirme işlemleri için neler yaparız? Gerekli kısımlara değindim şimdiden iyi okumalar.
Dom Nedir ?
Document Object Model (DOM) , HTML ve XML için programlama arayüzüdür. Sayfayı temsil eder ve böylece program döküman yapısını, stilini ve içeriğini değiştirebilir. DOM dökümanı nodes(düğümler) ve objects(nesneler) şeklinde temsil eder. Bu sayede programlama dili sayfayla bağlantı kurabilir.
Web sayfası bir dökümandır. Bu döküman tarayıcı penceresinde ya da HTML kaynağı gibi görüntülenebilir. Ama her iki durumda da aynı belge vardır. DOM aynı belgeyi temsil eder bu yüzden değiştirilebilir. DOM web sayfasında nesne yönelimli temsilidir, ki javascript gibi script dilleri ile modifiye edilebilir.
Kaynak: https://developer.mozilla.org
Web sayfasındaki html elementlerine erişebilmek için belli başlı seçiciler ,metodlar var 5 ana seçici şu şekilde;
<>Tanımları okuduktan sonra kodları inceleyebilirsiniz </>
1. getElementById()
GetElementById () yöntemi, belirtilen değere sahip ID özniteliğine sahip öğeyi döndürür.
Bu yöntem, HTML DOM'daki en yaygın yöntemlerden biridir ve neredeyse belgenizdeki bir öğeyi değiştirmek veya ondan bilgi almak istediğiniz her seferde kullanılır.
Belirtilen kimliğe sahip hiçbir öğe yoksa null döndürür .
Bir kimlik, bir sayfa içinde benzersiz olmalıdır. Ancak, belirtilen kimliğe sahip birden fazla öğe varsa, getElementById () yöntemi kaynak koddaki ilk öğeyi döndürür.
2.GetElementsByClassName()
GetElementsByClassName () yöntemi, HTMLCollection nesnesi olarak, belirtilen sınıf adına sahip belgedeki tüm öğelerin bir koleksiyonunu döndürür .
HTMLCollection nesne düğüm topluluğunu temsil eder. Düğümlere dizin numaraları ile erişilebilir. Dizin 0'dan başlar.
İpucu: Belirli bir sınıf adına sahip öğelerin sayısını belirlemek için HTMLCollection nesnesinin length özelliğini kullanabilir , ardından tüm öğeler arasında döngü oluşturabilir ve istediğiniz bilgileri çıkarabilirsiniz.
3.GetElementsByTagName()
GetElementsByTagName () yöntemi, bir HTMLCollection nesnesi olarak belirtilen etiket adına sahip belgedeki tüm öğelerin bir koleksiyonunu döndürür .
HTMLCollection nesne düğüm topluluğunu temsil eder. Düğümlere dizin numaraları ile erişilebilir. Dizin 0'dan başlar.
İpucu: “*” parametresi belgedeki tüm öğeleri döndürür. Css gibi düşünün.
İpucu: Belirtilen etiket adına sahip öğelerin sayısını belirlemek için HTMLCollection nesnesinin length özelliğini kullanabilir , ardından tüm öğeler arasında döngü oluşturabilir ve istediğiniz bilgileri çıkarabilirsiniz.
4.QuerySelector()
QuerySelector () yöntemi , belgedeki belirtilen CSS seçicileriyle eşleşen ilk öğeyi döndürür .
Not: querySelector () yöntemi yalnızca belirtilen seçicilerle eşleşen ilk öğeyi döndürür. Tüm eşleşmeleri döndürmek için bunun yerine querySelectorAll () yöntemini kullanın.
Seçici, belgedeki birkaç kez kullanılan bir kimlikle eşleşirse (“id” nin bir sayfada benzersiz olması ve birden fazla kullanılmaması gerektiğini unutmayın), eşleşen ilk öğeyi döndürür.
5.QuerySelectorAll()
QuerySelectorAll () yöntemi, belgedeki belirtilen CSS seçicileriyle eşleşen tüm öğeleri statik bir NodeList nesnesi olarak döndürür.
NodeList nesnesi bir düğüm koleksiyonunu temsil eder. Düğümlere dizin numaraları ile erişilebilir. Dizin 0'dan başlar.
İpucu: Belirtilen seçici ile eşleşen öğe sayısını belirlemek için NodeList nesnesinin length özelliğini kullanabilir , ardından tüm öğeler arasında döngü oluşturabilir ve istediğiniz bilgileri çıkarabilirsiniz.
Peki, elementlere eriştik. Bir elemente eriştikten sonra neler yapabiliriz bir de ona bakalım.
Style
Style özelliği, bir öğenin style niteliğini temsil eden bir CSSStyleDeclaration nesnesi döndürür.
Style özelliği, farklı CSS özelliklerini kullanarak bir öğenin belirli bir stilini almak veya ayarlamak için kullanılır.
Not: style özelliğine bir dize atayarak stilleri ayarlamak mümkün değildir, örneğin element .style = “color: red;”. Bir öğenin stilini ayarlamak için, stile bir “CSS” özelliği ekleyin ve aşağıdaki gibi bir değer belirtin:
element.style.backgroundColor = “red”;
TextContent
TextContent özelliği, belirtilen düğümün metin içeriğini ve tüm alt öğelerini ayarlar veya döndürür .
Eğer varsa set textContent özelliği, herhangi bir çocuk düğümleri çıkarıldı ve belirtilen dizeyi içeren tek metin düğümü ile değiştirilir.
Not: Bu özellik, innerText özelliğine benzer , ancak bazı farklılıklar vardır:
- textContent, tüm öğelerin metin içeriğini döndürürken, innerText <script> ve <style> öğeleri hariç tüm öğelerin içeriğini döndürür .
- innerText, CSS ile gizlenen öğelerin metnini döndürmez (textContent döndürür).
İpucu: Bazen bu özellik nodeValue özelliği yerine kullanılabilir , ancak bu özelliğin tüm alt düğümlerin metnini de döndürdüğünü unutmayın.
İpucu: Bir öğenin HTML içeriğini ayarlamak veya döndürmek için, innerHTML özelliğini kullanın .
SetAttribute
SetAttribute () yöntemi, belirtilen özniteliği bir öğeye ekler ve ona belirtilen değeri verir.
Belirtilen öznitelik zaten mevcutsa, yalnızca değer ayarlanır / değiştirilir.
Not: Bu yöntemle bir öğeye bir değer içeren style niteliği eklemek mümkün olsa da, satır içi stil için bunun yerine Style nesnesinin özelliklerini kullanmanız önerilir , çünkü bu, içinde belirtilebilecek diğer CSS özelliklerinin üzerine yazmayacaktır. stil niteliği: ornek.style.color=’red’;
AddEventListener
AddEventListener () yöntemi, belirtilen öğeye bir olay işleyicisi ekler.
İpucu: addEventListener () yöntemiyle eklenmiş bir olay işleyicisini kaldırmak için removeEventListener () yöntemini kullanın.
İpucu: Belgeye bir olay işleyicisi eklemek için document.addEventListener () yöntemini kullanın.
CreateElement
HTML nesnesi oluşturmak için kullanılır.
CreateElement () yöntemi, belirtilen ada sahip bir Öğe Düğümü oluşturur.
İpucu: eleman oluşturulduktan sonra kullanmak eleman .appendChild () veya eleman .insertBefore () belgeye eklemek için yöntem.
AppendChild
AppendChild () yöntemi, bir düğümün son çocuğu olarak bir düğüm ekler.
İpucu: Metin içeren yeni bir paragraf oluşturmak istiyorsanız, metni paragrafa eklediğiniz bir Metin düğümü olarak oluşturmayı ve ardından paragrafı belgeye eklemeyi unutmayın.
Bu yöntemi, bir öğeyi bir öğeden diğerine taşımak için de kullanabilirsiniz (bkz. “Diğer Örnekler”).
İpucu: Belirtilen, var olan bir alt düğümden önce yeni bir alt düğüm eklemek için insertBefore () yöntemini kullanın.
İnnerHTML
innerHtml özellik, HTML belge üzerinde dinamik html yazmak için kullanılabilir.
Daha çok web sayfalarında kayıt formu, yorum formu, linkler vb. Dinamik html oluşturmak için kullanılır.
document.getElementById(“demo”).innerHTML = “Paragraph changed!”;
İnsertBefore
İnsertBefore () yöntemi, sizin belirttiğiniz mevcut bir alt öğenin hemen önüne alt öğe olarak bir düğüm ekler.
İpucu: Metin içeren yeni bir liste öğesi oluşturmak istiyorsanız, metni <li> öğesine ekleyeceğiniz Metin düğümü olarak oluşturmayı ve ardından listeye <li> eklemeyi unutmayın.
Mevcut bir öğeyi eklemek / taşımak için insertBefore yöntemini de kullanabilirsiniz.
var node = document.getElementById(“myList2”).lastChild;
var list = document.getElementById(“myList1”);
list.insertBefore(node, list.childNodes[0]);
temel olarak bilgi olması açısından göz gezdirmeniz ve belirtilen kaynaklardaki örnekleri kontrol ederek derinliklerine girmeniz faydalı olacaktır, iyi çalışmalar dilerim.
