Takip Edin

JAVASCRIPT

Javascript’te DOM Uygulamaları

Javascript'te DOM Uygulamaları

Tekil Eleman Seçimi

// Selecting Elements

// Single Elements

// document.getElementById()
// let val;

// val = document.getElementById('header');
// val = document.getElementById('header').id;
// val = document.getElementById('header').className;

// val = val.id;
// val = val.className;

// val.style.fontSize = '50px';
// val.style.color = 'blue';
// val.style.fontWeight = 'bold';
// val.style.display = 'none';

// document.getElementById('header').innerText = 'ToDo Uygulamam';
// document.getElementById('header').innerHTML = '<i>ToDo Uygulamam</i>';

// console.log(val);

// document.querySelector()

console.log(document.querySelector('#header'));
console.log(document.querySelector('.card-header')); // Bulduğu ilk ".card-header" sınıfına sahip olan elemanı seçer.
console.log(document.querySelector('div')); // Bulduğu ilk "div" elemanını seçer.

document.querySelector('li').style.color = 'indigo';
document.querySelector('li:last-child').style.color = 'crimson';
document.querySelector('li:nth-child(2)').style.color = "teal";
document.querySelector('li:nth-child(3)').textContent = 'vihekasade';

document.querySelector('li').className = 'list-group-item list-group-item-success'; // Bulduğu ilk "li" elemanının var olan class'larını silip yerine yazdığımız class'ları ekler.
document.querySelector('li:nth-child(3)').classList.add('active'); // Var olan class'ların üzerine "active" class'ını ekler.

Çoklu Eleman Seçimi

// Multiple Elements

let val;

// val = document.getElementsByClassName('list-group-item');

// val = document.getElementsByClassName('list-group-item')[0];

// val = document.getElementsByClassName('list-group-item')[2];

// val = val[3];

// val[2].style.color = 'teal';
// val[2].style.fontSize = '27px';

// for(let i = 0; i < val.length; i++) {
//     console.log(val[i].style.color = 'blue');
//     console.log(val[i].textContent = 'vihekasade');
// }

val = document.getElementsByTagName('li');
// val = document.getElementById('task-list');
// val = val.getElementsByTagName('a'); // "task-list" id'sine sahip olan "ul" elemanının içerisinde bulunan "a" elemanlarını("x" işaretlerini) seçer.
val = document.getElementById('task-list').getElementsByTagName('a');

// document.querySelectorAll()

// val = document.querySelectorAll('li');

// val.forEach(function(item){
//     console.log(item); // val değişkenindeki tüm 'li' elemanları, console'a yazdırılır.
// });

// val.forEach(function(item,index){
//     item.textContent = `${index} - vihekasade`;
// });

val = document.querySelectorAll('li:nth-child(odd)'); 

val.forEach(function(item){
    item.style.background = '#3CD285'; // Tek index numarasına sahip 'li' elemanlarının arka plan rengini değiştirir.
})

console.log(val);

DOM Elemanları Üzerinde Gezinme

// Traversing the DOM

let val;

let list = document.querySelector('.list-group');

val = list;

val = list.childNodes; // NodeType
val = list.childNodes[0];
val = list.childNodes[0].nodeName;
val = list.childNodes[0].nodeType; // node tipi "text" olduğu için "3" değerini döndürür.
val = list.childNodes[1].nodeType; // node tipi "element" olduğu için "1" değerini döndürür.

val = list.children; // Html Collection
val = list.children[1];
val = list.children[3];

val = list.firstChild; // NodeType
val = list.firstElementChild; // Html Collection

val = list.lastChild;
val = list.lastElementChild;

val = list.childElementCount; // Ulaştığımız list elemanının kaç tane elemana sahip olduğunu gösterir.

val = list.parentNode;
val = list.parentElement;
val = list.parentElement.parentElement;

val = list.children[0].nextSibling;
val = list.children[0].nextElementSibling;

val = list.children[1].previousSibling;
val = list.children[1].previousElementSibling;

// console.log(val);

// for(let i = 0; i < list.children.length; i++) {
//     console.log(list.children[i]);
// }

// for(let i = 0; i < list.childNodes.length; i++) {
//     console.log(list.childNodes[i]);
// }

// for(let i = 0; i < list.childNodes.length; i++) {
//     if(list.childNodes[i].nodeType === 1){
//         console.log(list.childNodes[i]); // node tipi eleman olanları döndürür.
//     }    
// }

for(let i = 0; i < list.childNodes.length; i++) {
    if(list.childNodes[i].nodeType === 3){
        console.log(list.childNodes[i]); // node tipi text olanları döndürür.
    }    
}

Eleman Silme ve Güncelleme

const taskList = document.querySelector('#task-list');

// Removing Element

// taskList.remove();
// taskList.childNodes[1].remove();
// taskList.childNodes[7].remove();
// taskList.children[3].remove();
// Remove() ile ulaştığımız nesne, removeChild() ile ulaştığımız nesnenin alt elemanları silinir.
// taskList.removeChild(taskList.children[3]);

// Removing Attribute

// taskList.children[0].removeAttribute('class');

// for(let i = 0; i < taskList.children.length; i++) {
//     taskList.children[i].removeAttribute('class');
// }

 // console.log(taskList);

// Replacing Elements

// const cardHeader = document.querySelector('.card-header'); // .card-header sınıfına sahip olan ilk div'i seçer.

// create element

// const h3 = document.createElement('h3');
// h3.setAttribute('class','card-header');
// h3.appendChild(document.createTextNode('Vihekasade'));

// const parent = document.querySelector('.card');
// parent.replaceChild(h3,cardHeader);

// console.log(cardHeader);// 

// Classes

let val;

link = taskList.children[0].children[0];

// val = link.className;
// val = link.classList;
// val = link.classList[0];
// val = link.classList[1];

link.classList.add('new');
link.classList.remove('new');

// Attributes

val = link.getAttribute('href');
val = link.setAttribute('href','https://vihekasade.net');
val = link.hasAttribute('href'); // href özelliği olduğundan dolayı true döndürür.

console.log(val);

Eleman Oluşturma

// Creating Elements

// Create Element

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

// Add Class

li.className = 'list-group-item list-group-item-secondary';

// Attribute

li.setAttribute('title','vihekasade');

// Text Node

const text = document.createTextNode('vihekasade');
li.appendChild(text);

const a = document.createElement('a');
a.setAttribute('href','#');
a.className = 'delete-item float-right';
a.innerHTML = '<i class="fas fa-times"></i>';

// append a to li
li.appendChild(a);

// append li to ul
document.querySelector('#task-list').appendChild(li);

console.log(li);

Devamını oku

Popüler

error: Content is protected !!