#js html olustutma | Explore Tumblr posts and blogs

caylakyazilimci · 6 years ago

Text

Javascript dom yöntemleri

Sorgu Seçicileri

element .querySelector ( selector), seçicinin ilk eşleşmesine referans verir

element .querySelectorAll ( selectors ), seçicilerin tüm eşleşmelerine referanslar içeren bir " nodelist " döndürür * Potansiyel (marjinal) performans avantajları sunan birkaç tane daha spesifik sorgu var, ancak bunların üzerinden geçmeyeceğiz .

QuerySelectorAll kullanılırken, dönüş değerinin bir dizi olmadığını not etmek önemlidir . Bir diziye benziyor ve biraz da bir dizi gibi davranıyor, ancak bu gerçekten bir “nodelist”. Büyük fark, birkaç dizi yönteminin nodelistlerden eksik olmasıdır. Sorun ortaya çıkarsa, bir çözüm, nodelist'i bir diziye dönüştürmektir. Bunu Array.from () veya speread operatörüyle yapabirisiniz.

js ile html yaratmak , öğ oluşturmak

document.createElement (tagName [, options]) tagName etiket türünde yeni bir öğe oluşturur.[options]Bu durumda, işleve bazı isteğe bağlı parametreler ekleyebileceğiniz anlamına gelir. Bu konuda bu konuda endişelenme.

const div = document.createElement('div');

Bu fonksiyon yeni elementinizi DOM içine koymuyor - basitçe onu bellekte yaratıyor. Bu, sayfaya yerleştirmeden önce öğeyi (stiller, sınıflar, kimlikleri, metinleri vb. Ekleyerek) değiştirebilmeniz içindir. Öğeyi DOM'ye aşağıdaki yöntemlerden biriyle yerleştirebilirsiniz.

Öğeleri Ekle

parentNode .appendChild ( childNode ) ekler childNode son çocuğu olarak parentNode

parentNode .insertBefore ( newNode , referenceNode ) ekler newNode içine parentNode önce referenceNode

Öğeleri Kaldır

parentNode .removeChild ( alt ) kaldırır çocuk gelen parentNode DOM ve referans verir çocuk

Elemanları Değiştirme

Bir elemana referansınız olduğunda, bu referansı elementin kendi özelliklerini değiştirmek için kullanabilirsiniz. Bu, özellikler ekleme / kaldırma ve değiştirme, sınıfları değiştirme, satır içi stil bilgisi ekleme ve daha fazlası gibi birçok faydalı değişiklik yapmanızı sağlar.

const div = document.createElement('div'); // create a new div referenced in the variable 'div'

Satır içi stil ekleme

div.style.color = 'blue'; // adds the indicated style rule div.style.cssText = 'color: blue; background: white'; // adds several style rules div.setAttribute('style', 'color: blue; background: white'); // adds several style rules

Öznitelikleri Düzenleme

div.setAttribute('id', 'theDiv'); // if id exists update it to 'theDiv' else create an id // with value "theDiv" div.getAttribute('id'); // returns value of specified attribute, in this case // "theDiv" div.removeAttribute('id'); // removes specified attribute

Kullanılabilir özellikler hakkında daha fazla bilgi için HTML Öznitelikleri bölümündeki MDN'ler bölümüne bakın .

Sınıflarla çalışmak

div.classList.add('new'); // adds class "new" to your new div div.classList.remove('new'); // remove "new" class from div div.classList.toggle('active'); // if div doesn't have class "active" then add it, or if // it does, then remove it

Satır içi CSS ekleme ve kaldırma yerine bir CSS stilini değiştirmek genellikle standarttır (ve daha temizdir).

Metin içeriği ekleme

div.textContent = 'Hello World!' // creates a text node containing "Hello World!" and // inserts it in div

HTML içeriği ekleme

div.innerHTML = '<span>Hello World!</span>'; // renders the html inside div

* Metin eklemek için textContent'in tercih edildiğini ve yanlış kullanıldığında güvenlik riskleri oluşturabileceği için innerHTML'nin kullanılması gerektiğini unutmayın.

Neyi ele aldığımızı gözden geçirmek ve devam etmeden önce bu şeyleri pratik etmek için size bir şans verelim. Bir DOM öğesi oluşturma ve web sayfasına ekleme bu örneğe bakın.

// your html file: <body> <h1> THE TITLE OF YOUR WEBPAGE </h1> <div id="container"></div> </body>

// your javascript file const container = document.querySelector('#container'); const content = document.createElement('div'); content.classList.add('content'); content.textContent = 'This is the glorious text-content!'; container.appendChild(content);

JavaScript dosyasında, öncelikle containerHTML’imizde zaten bulunan div’den bir referans alırız. Sonra yeni bir div oluşturur ve onu değişkende saklarız content. Div'e bir sınıf ve bir miktar metin ekleriz contentve sonunda bu div'i ekleriz container. Sonuçta bu basit bir işlem. JavaScript kodu çalıştırıldıktan sonra DOM ağacımız şöyle görünecektir:

// The DOM <body> <h1> THE TITLE OF YOUR WEBPAGE </h1> <div id="container"> <div class="content"> This is the glorious text-content! </div> </div> </body>

JavaScript gelmez unutmayın değil HTML değiştirmez, ancak DOM - HTML dosyası aynı bakacağız, ancak JavaScript tarayıcı kılan en değiştirir.

Önemli not: JavaScript'iniz, çoğunlukla, JS dosyası çalıştırıldığında veya HTML'de kod etiketi ile karşılaşıldığında çalıştırılır. JavaScript'inizi dosyanın üstüne ekliyorsanız, bu DOM manipülasyon yöntemlerinin çoğu çalışmaz çünkü JS kodu düğümler DOM'da oluşturulmadan önce çalıştırılır . Bunu düzeltmenin en basit yolu, JavaScript'inizi HTML dosyanızın altına eklemektir; böylece DOM düğümleri ayrıştırıldıktan ve oluşturulduktan sonra çalıştırılabilir.

#js html olustutma #js ile html içerik ekleme #Metin içeriği ekleme #HTML içeriği ekleme #Sınıflarla çalışmak

1 note · View note