15 Web Geliştiricileri için DOM Manipülasyonu için JavaScript Yöntemleri

var ele = document.querySelector (seçici);

ile seçilir querySelector () yöntem ve rengi kırmızı olarak değiştirilir.

 
birinci paragraf
 
ikinci paragraf
 
div bir
 
üçüncü fıkra
 
div iki
 

 var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'kırmızı'; 

Etkileşimli Demo

Test et querySelector () aşağıdaki interaktif demo yöntemi. Sadece mavi kutuların içinde bulabileceklerinizle eşleşen bir seçiciyi yazın (ör.. #üç) ve Seç düğmesini tıklayın. Eğer yazarsanız .blok, sadece ilk örneği seçilecek.

2. querySelectorAll ()

aksine querySelector () eşleşen tüm öğelerin yalnızca ilk örneğini döndüren, querySelectorAll () belirtilen CSS seçicisiyle eşleşen tüm öğeleri döndürür.

Eşleşen elemanlar bir NodeList Eşleşen öğe bulunmazsa boş bir nesne olacak nesne.

Sözdizimi

var eles = document.querySelectorAll (seçici);

• eles - bir NodeList özellik değerleri olarak eşleşen tüm öğelerin bulunduğu nesne. Eşleşme bulunmazsa nesne boştur.
• selektör - bir veya daha fazla CSS seçicisi, örneğin "#FooId", ".FooClassName", " .Class1.class2", veya ".class1, .class2"

Kod örneği

Aşağıdaki örnek öncekiyle aynı HTML'yi kullanıyor. Ancak, bu örnekte, tüm paragraflar ile seçilmiştir. querySelectorAll (), ve mavi renklidir.

 
birinci paragraf
 
ikinci paragraf
 
div bir
 
üçüncü fıkra
 
div iki
 

 var paragraflar = document.querySelectorAll ('p'); (paragrafların varyasyonu) için p.style.color = 'blue'; 

3. addEventListener ()

Olaylar JavaScript ile tepki verebileceğimiz tıklatma, odaklanma veya yükleme gibi bir HTML öğesine ne olduğuna bakın. JS işlevlerini atayabiliriz. dinlemek Bu olaylar için elementler ve olay gerçekleştiğinde bir şeyler yapın..

Yapabileceğin üç yol var. belirli bir olaya bir işlev atamak.

Eğer fan () özel bir işlevdir, kaydolabilirsiniz tıklama etkinliği dinleyicisi olarak (düğme öğesi tıklandığında arayın) üç yolla:

1.  Alarm

2.  var btn = document.querySelector ('düğme'); btn.onclick = FON;

3.  var btn = document.querySelector ('düğme'); btn.addEventListener ('klik', foo);

Yöntem addEventListener () (üçüncü çözüm) var bazı artılar; en son standarttır - birden fazla işlevin bir olaya olay dinleyicisi olarak atanmasına izin vermek - ve kullanışlı bir dizi seçenekle birlikte gelir.

Sözdizimi

ele.addEventListener (evt, dinleyici, [seçenekler]);

• ele - Etkinlik dinleyicisinin dinleyeceği HTML öğesi.
• evt - Hedeflenen etkinlik.
• dinleyici - Genellikle, bir JavaScript işlevi.
• seçenekleri - (isteğe bağlı) Bir dizi boole özelliği olan bir nesne (aşağıda listelenmiştir).

Seçenekler	Ayarlandığında ne olur? doğru?
ele geçirmek	Olay köpürmesini durdurur, yani, öğenin atalarındaki aynı olay türü için olay dinleyicilerinin çağrılmasını engeller. Bu özelliği kullanmak için 2 sözdizimi kullanabilirsiniz: ele.addEventListener (evt, dinleyici, gerçek) ele.addEventListener (evt, listener, capture: true);
bir Zamanlar	Dinleyici, yalnızca etkinlik ilk gerçekleştiğinde çağrılır, ardından etkinlikten otomatik olarak ayrılır ve artık tetiklenmez.
pasif	Olayın varsayılan eylemi, prevDefault () yöntemiyle durdurulamaz.

Kod örneği

Bu örnekte, adında bir tıklama etkinliği dinleyicisi ekliyoruz foo, -e HTML etiketi.

Beni tıkla

 var btn = document.querySelector ('düğme'); btn.addEventListener (foo 'tıklayın'); foo () işlevi alert ('hello'); 

Etkileşimli Demo

Ata fan () aşağıdaki üç olaydan birine olay dinleyicisi olarak özel işlev: giriş, tık veya mouseover Seçili olayı alt giriş alanına getirerek, tıklayarak veya yazarak tetikleyin..

4. removeEventListener ()

removeEventListener () yöntem olay dinleyicisini ayırır ile daha önce eklenmiş addEventListener () yöntem olaydan dinliyor.

Sözdizimi

ele.removeEventListener (evt, dinleyici, [seçenekler]);

Yukarıda belirtilenle aynı sözdizimini kullanır. addEventListener () yöntem (hariç bir Zamanlar hariç tutulan seçenek). Seçenekler, ayrılacak dinleyiciyi belirleme konusunda çok özeldir.

Kod örneği

Kullandığımız Kod Örneği sonrasında addEventListener (), burada adındaki click olay dinleyicisini kaldırıyoruz foo -den eleman.

 btn.removeEventListener (foo 'tıklayın');

5. createElement ()

createElement () yöntem yeni bir HTML öğesi oluşturur kullanmak HTML etiketinin adı oluşturulacak gibi 'S' veya 'Div'.

Daha sonra farklı öğeleri kullanarak bu sayfayı web sayfasına ekleyebilirsiniz. DOM ekleme yöntemleri, gibi AppendChild () (bu yayında daha sonra bakın).

Sözdizimi

document.createElement (tagName);

• etiket adı - Oluşturmak istediğiniz HTML etiketinin adı.

Kod örneği

Aşağıdaki örnekte yeni bir paragraf öğesi oluşturabilirsiniz:

var pEle = document.createElement ('p')

6. AppendChild ()

AppendChild () yöntem Son alt öğe olarak bir öğe ekler. Bu yöntemi çağıran HTML öğesine.

Eklenecek çocuk yeni oluşturulan eleman, veya bir zaten var. İkinci durumda, önceki konumundan son çocuğun konumuna taşınır..

Sözdizimi

ele.appendChild (childEle)

• ele - Hangi HTML öğesi childEle Son çocuğu olarak eklendi..
• childEle - Son öğesi olarak eklenen HTML öğesi ele.

Kod örneği

Bu örnekte, bir eleman bir çocuğu gibidir.

kullanarak eleman AppendChild () ve yukarıda belirtilen createElement () yöntemleri.

 var div = document.querySelector ('div'); var strong = document.createElement ('strong'); strong.textContent = 'Merhaba'; div.appendChild (güçlü);

Etkileşimli Demo

Aşağıdaki interaktif demoda, gelen mektuplar #a için #r çocuk unsurlarıdır # Ebeveyn-tek, # Ebeveyn-iki, ve # Ebeveyn-üç kimlik seçicileri.

Nasıl bir göz atın AppendChild () yöntem çalışır aşağıdaki giriş alanlarına bir ebeveyn ve bir alt seçici adı yazarak. Başka bir ebeveyne ait çocukları da seçebilirsiniz.

7. removeChild ()

removeChild () yöntem belirtilen alt öğeyi kaldırır bu yöntemi çağıran HTML öğesinden.

Sözdizimi

ele.removeChild (childEle)

• ele - Üst öğe childEle.
• childEle - Alt öğesi ele.

Kod örneği

Bu örnekte, biz kaldırıyoruz Çocuk olarak eklediğimiz unsur

önceki kod örneğinde etiketi AppendChild () yöntem.

div.removeChild (güçlü);

8. replaceChild ()

replaceChild () yöntem alt öğeyi başka biriyle değiştirir bu yöntemi çağıran ana öğeye ait.

Sözdizimi

ele.replaceChild (newChildEle, oldChileEle)

• ele - Çocuklarının değiştirileceği ana öğe.
• newChildEle - Alt öğesi ele bu yerini alacak oldChildEle.
• oldChildEle - Alt öğesi ele, bu değiştirilecek newChildEle.

Kod örneği

Bu örnekte alt öğe e ait

üst öğe yeni oluşturulan bir dosyayla değiştirildi etiket.

 
 Merhaba 

 var em = document.createElement ('em'); var strong = document.querySelector ('strong'); var div = document.querySelector ('div'); em.textContent = 'merhaba'; div.replaceChild (em, güçlü);

9. cloneNode ()

Olması gereken yeni bir öğe oluşturmanız gerektiğinde zaten var olan bir elemanla aynı web sayfasında, basitçe zaten var olan öğenin bir kopyasını oluştur kullanmak cloneNode () yöntem.

Sözdizimi

var dupeEle = ele.cloneNode ([derin])

• dupeEle - Kopyası ele eleman.
• ele - Kopyalanacak HTML öğesi.
• derin - (isteğe bağlı) Bir boolean değeri. Ayarlandıysa doğru, dupeEle tüm alt unsurlara sahip olacak ele ayarlanmışsa yanlış çocukları olmadan klonlanacak.

Kod örneği

Bu örnekte, eleman cloneNode (), sonra ekleriz

yukarıda bahsedilen bir alt öğe olarak etiketlemek AppendChild () yöntem.

Sonuç olarak,

iki içerecek öğeleriyle birlikte Merhaba içerik olarak string.

 
 Merhaba 

 var strong = document.querySelector ('strong'); var copy = strong.cloneNode (true); var div = document.querySelector ('div'); div.appendChild (kopya); 

10. insertBefore ()

insertBefore () yöntem başka bir alt öğenin önüne belirtilen alt öğeyi ekler. Bu yöntem ana öğe tarafından çağrılır..

Başvurulan alt öğe yoksa veya açıkça iletilirse boş yerine, eklenecek alt öğe eklendi ebeveynin son çocuğu olarak (benzer AppendChild ()).

Sözdizimi

ele.insertBefore (newEle, refEle);

• ele - Üst öğe.
• newEle - Eklenecek yeni HTML öğesi.
• refEle - Bir alt öğe ele ondan önce newEle eklenecek.

Kod örneği

Bu örnekte yeni bir tane yaratıyoruz içinde bir miktar metin bulunan öğeyi ekleyin ve ekleyin önce içindeki eleman

ana öğe.

 
 Merhaba 

 var em = document.createElement ('em'); var strong = document.querySelector ('strong'); var div = document.querySelector ('div'); em.textContent = 'merhaba'; div.insertÖnce (em, güçlü); 

Etkileşimli Demo

Bu etkileşimli demo, önceki demolarımıza benzer şekilde çalışır. AppendChild () yöntem. Burada sadece iki alt öğenin kimlik seçicisini yazmanız gerekir ( #a için #r) giriş kutularına ve nasıl insertBefore () yöntem ilk belirtilen çocuğu taşır önce ikinci.

11. createDocumentFragment ()

createDocumentFragment () yöntem, bu listedeki diğerleri kadar iyi tanınmamış olabilir, yine de, özellikle istiyorsanız, önemli bir yöntemdir. toplu olarak birden çok öğe ekleyin, bir tabloya birden çok satır eklemek gibi.

O oluşturur DocumentFragment nesne, esasen DOM ağacının bir parçası olmayan bir DOM düğümü. Bu, DOM ağacındaki istenen düğüme eklemeden önce, diğer öğeleri (örneğin çoklu satırlar) ekleyip saklayabileceğimiz bir tampon gibidir (örneğin, bir tabloya).

Neden öğeleri doğrudan DOM ağacına eklemiyoruz? Çünkü DOM ekleme düzen değişikliklerine neden olur, ve bu bir pahalı tarayıcı işlemi Birden çok sonuçta ortaya çıkan eleman ekleri daha fazla düzen değişikliğine neden olacağından.

Öte yandan, bir DocumentFragment nesne herhangi bir düzen değişikliğine neden olmaz, Böylece, DOM ağacına aktarmadan önce istediğiniz kadar öğe ekleyebilirsiniz, böylece yalnızca bu noktada düzen değişikliğine neden olabilirsiniz.

Sözdizimi

document.createDocumentFragment ()

Kod örneği

Bu örnekte, birden çok tablo satırı ve hücre oluşturuyoruz. createElement () yöntemi ekleyin, ardından bir DocumentFragment nesne, sonunda bir HTML'ye bu belge parçasını ekleyin

kullanmak AppendChild () yöntem.

Sonuç olarak, her biri içerik olarak 1-5 olan bir hücre içeren beş satır tablonun içine yerleştirilecektir..

 var table = document.querySelector ("table"); var df = document.createDocumentFragment (); (var i = 0; i<5; i++)  var td = document.createElement("td"); var tr = document.createElement("tr"); td.textContent = i; tr.appendChild(td) df.appendChild(tr);  table.appendChild(df); 

12. getComputedStyle ()

Bazen istersiniz CSS özellik değerlerini kontrol edin Herhangi bir değişiklik yapmadan önce bir elementin. Kullanabilirsiniz ele.style ancak aynısını yapma özelliği getComputedStyle () yöntem sadece bu amaç için yapılmıştır. salt okunur hesaplanan değerleri döndürür HTML öğesinin tüm CSS özelliklerinin listesi.

Sözdizimi

var style = getComputedStyle (ele, [pseudoEle])

• stil - bir CSSStyleDeclaration yöntem tarafından döndürülen nesne. Tüm CSS özelliklerini ve bunların değerlerini tutar. ele eleman.
• ele - CSS özellik değerlerinin alındığı HTML öğesi.
• pseudoEle - (isteğe bağlı) Sahte öğeyi temsil eden bir dize (örneğin, ':sonra'). Eğer bu belirtilirse, belirtilmiş sözde elemanın CSS özellikleri ile ilişkilendirilir. ele iade edilecek.

Kod örneği

Bu örnekte, hesaplananları alıp uyarıyoruz Genişlik değeri

eleman kullanarak getComputedStyle () yöntem.

 var style = getComputedStyle (document.querySelector ('div')); uyarı (style.width); 

13. setAttribute ()

setAttribute () yöntem ya yeni bir özellik ekler HTML öğesine, veya değeri günceller zaten var olan bir özniteliğin.

Sözdizimi

ele.setAttribute (ad, değer);

• ele - Bir özniteliğin eklendiği veya özniteliğinin güncellendiği HTML öğesi.
• isim - Özelliğin adı.
• değer - Özelliğin değeri.

Kod örneği

Bu örnekte, biz contenteditable özniteliği

yararlanarak setAttribute () içeriğini düzenlenebilir hale getirecek yöntem.

Merhaba

 var div = document.querySelector ('div'); div.setAttribute ( 'contenteditable', ") 

14. getAttribute ()

getAttribute () yöntem belirtilen bir özniteliğin değerini döndürür belirli bir HTML öğesine ait.

Sözdizimi

ele.getAttribute (ad);

• ele - Özelliğinin istendiği HTML öğesi.
• isim - Özelliğin adı.

Kod örneği

Bu örnekte, contenteditable aittir

yardımı ile eleman getAttribute () yöntem.

Merhaba

 var div = document.querySelector ('div'); alert (div.getAttribute ( 'contenteditable')) 

15. removeAttribute ()

removeAttribute () yöntem verilen bir niteliği kaldırır belirli bir HTML öğesinin.

Sözdizimi

ele.removeAttribute (ad);

• ele - Özelliğinin kaldırılacağı HTML öğesi.
• isim - Özelliğin adı.

Kod örneği

Bu örnekte, biz kaldırıyoruz contenteditable özniteliği

öğesi. Sonuç olarak,

daha fazla düzenlenebilir olmayacak.

Merhaba

 var div = document.querySelector ('div'); div.removeAttribute ( 'contenteditable'); 

15 Ders “Savaş Sanatı” Hayat Savaşlarını Kazanma Hakkında Size Öğretir

Mobil Duyarlılık için 15 Lightbox Kütüphanesi

Mükemmel Ayakta Masanızı Satın Almak veya İnşa etmek İçin 15 Fikir

Bir sonraki makale

Akıllı Yapışkan Öğeler Yapmak için 15 jQuery Eklentisi

Önceki makale

15 Girişimciler İçin İlham Verici Başlangıç ​​Sunum Videoları