Element메소드를 알아보자

요소를 접근하기

get + element,elements + By+Id,Name,TagName,ClassName
Id는 중복이 불가능해서 element 나머지는 중복이 가능해서 elements를 쓰고 배열로 저장이된다(한개만있어도 배열로 저장)

속성 가져오기 속성설정하기

getAttribute(속성)
요소의 속성을 가지고 올수있다

let div = document.getElementById('layout');
let sty = div.getAttribute('style');
console.log(sty); // border : 1px solid red;

setAttridute(속성)
요소의 속성을 설정할수있다

function fun(){
alert('hi');
}
let div = document.getElementById('layout');
div.setAttribute('onclick','fun();');

자식요소 가져 오기

.childNodes
문자열,공백 엔터등 전부 검색이된다

let div = document.getElementById('layout');
let ck = div.childNodes; //7
console.log(ck);
//[text, p, text, p, text, p, text]

.children
자식 요소만 검색이된다

let div = document.getElementById('layout');
let ck = div.children; //7
console.log(ck);
//[p, p, p]

요소만들기

.createElement(요소)
해당요소를 만든다

let pelement = document.createElement('p');

텍스트노드만들기

createTextNode(문자)
요소의 텍스트를 만든다

let textNode = document.createTextNode('안녕하세요');

자식 추가하기

appendChild

let div = document.getElementById('layout');	
let node = document.createElement('p');
let textNode = document.createTextNode('안녕하세요');
node.appendChild(textNode);
div.appendChild(node);