DOM,html제어,

//부트스트랩 설치
//js/main.js작성
//index 스크립트 호출

var header = document.getElementsByTagName("header"); //태그로 접근
var services = document.getElementById("services"); //아이디로 접근
var container = document.getElementsByClassName("container"); // 클래스로 접근

var serviceContainer = document.getElementById('services');
							   .getElementsByClassName("container");
                               
//querySelector 가장먼저 나온 요소만 가져오는 쿼리셀렉터                               
var header = document.querySelector('header');
var services = document.querySelector('#services');
var container = document.querySelector('.container');

var servicesContainer = document.querySelector("#services, .container");


-
var container = document.quertySelectorAll(".container");

for(Var i = 0; i<container.length; i++){
	container[i].style.backgroundColor = "yellow";
}
-
//innerHTML,outerHTML
var header = document.querySelector('.masthead');//
log(header.innerHTML) //.msthead 안의 내용
log(header.outerHTML) //.msthead 포함한 안의 내용

header.innerHTML = "<h1>fuck</hh1>"; //내용 초기화 html적용

//textContent
var heading = document.querySelector.('.masthead-heading');
heading.textContent = "Nice!!"; // html코드 자체도 문자열로 취급 삽임 

//innerText
var heading = document.querySelector.('.masthead-heading');
heading.innerText = "sweet!!"; // html코드 자체도 문자열로 취급 삽임 css끌어옴

-
var h3Test = document.creatElement("h3");
h3.test.textContent "hello world!!";

//appendChild()
var masthead = document.qeurySelector('masthead');

masthead.appendChild(h3Test); //뒤에서 삽입

var mastheadContainer = document.qeurySelector('mastheadContainer'); 
//마지막 자식에 삽입 

var subheading = document.querySelector.('.masthead-heading-sub');
var heading = document.querySelector.('.masthead-heading');
var btn = document.querySelector.('.masthead btn');  // 3요소가 형제라고 가정

subheading.appendChild(h3Test);
heading.appendChild(h3Test);
btn.appendChild(h3Test);	//형제에 모두 적용해도 마지막에만 효과

//insertAdjacentHTML();
var subheading = document.querySelector.('.masthead-heading-sub');
var txt="<h3>!!!</h3>";

subheading.insertAdjacentHTML('beforeend',txt); //위치 지정삽입


//removeChild(), remove()
var subheading = document.querySelector.('.masthead .container);//부모라고 가정
var heading = document.querySelector.('.masthead-heading-sub');

subheading.removeChild(); //자식 삭제
===heading.parentElement.removeChild(heading);

heading.remove();


var subheading = document.querySelector.('.masthead .container);
log(subheading.firstElementChild);//first-child,last-child

var heading = document.querySelector.('.masthead-heading-heading');

//style
heading.style.color = "red"; //자바에서 css 적용

//cssText
heading.style.cssText = "color: red; background-color: pink; font-size: 25px";
//css방식식 그대로 쓰기

//setAttrubyte
heading.setAttrubyte("id","test"); //id추가
heading.setAttrubyte("style",color: red; background-color: pink; font-size: 25px"); //스타일 추가

heading.setAttrubyte("id","test"); 
document.qeurySelector(#test").style.backgroundColor="black";

---
//className, classList
var heading = document.querySelector(".masthead-heading");
var headingClass = heading.className;
var HeadingArr = headingClass.split(" ");// split " " 기준으로 배열생성

log(headingClass);
log(headingArr[1]);

heading.className = "test sad"; //이전 클래스 제거후 test, sad클래스 생성
-
var heading = document.querySelector(".masthead-heading");
var headingClass = heading.classList;//배열형식으로 바로 가져옴

heading.classList.add("test");//기존 클래스 유지 추가
heading.classList.remove("test");//삭제

heading.classList.toggle("test");// test가 없으면 add작업, 있으면 remove작업.
---

var heading = document.querySelector(".masthead-heading");
heading.addEventListener('click',function(){
log("txt"); //click
})

var heading = document.querySelector(".masthead-heading");
heading.addEventListener('click',function(){
log("txt"); //click
})
---
heading.addEventListener('click',test);

heading.removeEventListener('click',test);
//작동
-
heading.addEventListener('click', function test(){//(1)
};

heading.removeEventListener('click', function test(){//(2)
};// 함수형태 는 같으나 다른 함수임으로 지워봐야 처음 함수가 지워지지 않는다. (1)(2)
-

//preventDefault

var btn = document.querySelector("#btn");
btn.addEventListener("click",fumction(e_{
e.preventDefault();//a 디폴트 기능 제거
})