DOM-1

0. examining the document type

// examining the document type

let val;

val = document;
val = document.all;
val = document.all[2];
val = document.all.length;
val = document.head;
val = document.doctype;
val = document.domain;
val = document.URL;
val = document.characterSet;
val = document.contentType;

val =  document.forms;
val =  document.forms[0].id;
val =  document.forms[0].action;
val =  document.forms[0].method;

val =  document.links;
val =  document.links[0];
val =  document.links[0].id;
val =  document.links[0].className;
val =  document.links[0].classList;
val =  document.links[0].classList[0];

val = document.images;

val = document.scripts;
val = document.scripts[2].getAttribute('src');

let scripts = document.scripts;

let scriptsArr = Array.from(scripts);

scriptsArr.forEach(function(script) {
  console.log(script);
});


console.log(val);

---

1. dom selector for single elements

document.getElementById('id이름');

console.log(document.getElementById('task-title'));

// get things from the element
console.log(document.getElementById('task-title').id);
console.log(document.getElementById('task-title').className);

// change styling
document.getElementById('task-title').style.background = 'darkgray';
document.getElementById('task-title').style.color = 'white';
document.getElementById('task-title').style.padding = '10px';
// document.getElementById('task-title').style.display = 'none';

//change content : getElementById('대상').textContent = '바꿀내용';
document.getElementById('task-title').textContent = 'task haha';
document.getElementById('task-title').innerText = 'my tasks';
document.getElementById('task-title').innerHTML = '<span style = "color :red">task in red</span>';

-> 중복되는 내용을 없애기
=> document.getElementById('task-title') 이 반복됨을 알 수 있다.
변수를 지정해 간단히만든다.

const taskTitle = document.getElementById('task-title');

결과적으로

const taskTitle = document.getElementById('task-title');

//change styling
taskTitle.style.background = 'darkgray';
taskTitle.style.color = 'white';
taskTitle.style.padding = '10px';
// document.getElementById('task-title').style.display = 'none';

//change content : getElementById('대상').textContent = '바꿀내용';
taskTitle.textContent = 'task haha';
taskTitle.innerText = 'my tasks';
taskTitle.innerHTML = '<span style = "color :red">task in red</span>';

---

2. querySelector()

console.log(document.querySelector('#task-title'));
console.log(document.querySelector('.card-title'));
console.log(document.querySelector('h5'));

document.querySelector('li').style.color = 'red';  // 첫번째에 있는 것만 적용된다
document.querySelector('li:last-child').style.color = 'blue';  // li:last-child
document.querySelector('li:nth-child(3)').style.color = 'green'; // nth-child(몇번째)
document.querySelector('li:nth-child(4)').textContent = 'hello world';

//(odd / even)
document.querySelector('li:nth-child(odd)').style.background = 'gray';       //첫번째 odd에만 적용된다
document.querySelector('li:nth-child(even)').style.background = 'lightgray';   //마찬가지로 첫번째 even에만 적용된다

---

3. dom selector for multiple elements

- document.getElementsByClassName( )

const items = document.getElementsByClassName('collection-item');
console.log(items);
console.log(items[0]);

items[0].style.color = 'red';
items[3].textContent= 'hello';

const listitems = document.querySelector('ul').getElementsByClassName('collection-item');

console.log(listitems);

- document.getElmentsByTagName( )

//document.getElmentsByTagName
const lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
lis[0].style.color = 'red';
lis[3].textContent = 'Hello';

 

- convert HTML collection into array

let lis = document.getElementsByTagName('li');
lis = Array.from(lis);
lis.forEach(function(li,index){
  console.log(li.className);
  li.textContent = `${index}: hello`;
});

console.log(lis);

 

- document.querySelectorAll

const items = document.querySelectorAll('ul.collection li.collection-item');

items.forEach(function(item,index){
    item.textContent = `${index}: hello`;
  });

 

- 첫번째만이 아닌, 모든 홀/짝값에 적용시키기

const liodd = document.querySelectorAll('li:nth-child(odd)');
const lieven = document.querySelectorAll('li:nth-child(even)');

liodd.forEach(function(li,index){
  li.style.background = 'gray';
});                                    //forEach를 이용해 liodd에 해당하는 모든 것에 적용됨

for(let i=0; i<lieven.length; i++){
  lieven[i].style.background = 'darkgray';
}                          //for loop을 이용해 lieven에 해당하는 모든 것에 darkgray 적용함.

console.log(items);