🏃♀️ Do it !/TIL
Element / event
버터감자
2022. 8. 17. 10:47
728x90
2022 / 8 / 17 수
- Element
- Event
✔️Element
// 1. 새로운 element를 만들어라.
const h1elem = document.createElement('h1');
// 2. 만든 h1태그에 hello 텍스트를 넣어라 / element를 설정한다.
h1elem.textContent = 'hello world';
// 3. body에 appendChild로 붙여넣어준다.
document.body.appendChild(h1elem);
//-------------------------------------------------------------
// <h1>welcome</h1> 을 없애버리자.
// const target = document.querySelector('h1'); // welcome을 가져옴
// parentNode는 부모객체 removeChild 자식객체를 지워라.
// target.parentNode.removeChild(target);
// 2초후에 welcome을 지워라.
setTimeout(()=>{
const target = document.querySelector('h1');
target.parentNode.removeChild(target);
},2000);
✔️Event
keyup 이벤트 사용방식
<body onkeyup ="OnKeyupProc(event)">
<script>
// 방법 1 ) body에도 적용시킬 수 있음. (es5 이전 방식)
function OnKeyupProc(event)
{
console.log("키업 메시지가 생겼다!")
};
// 방법 2 ) es6 방식 / ddEventListener로 등록하여 호출
const OnKeyupProc = function(event)
{
console.log("키업 메시지가 생겼다!")
}
// addEventListener 어떤 메시지가 퉁하고 날라오면 이함수를 호출해주세요하는것
document.body.addEventListener('keyup', OnKeyupProc);
// 방법 3 ) es5 시절 방식.
document.body.onkeyup = function(event){
console.log("키업 메시지가 생겼다!")
};
</script>
</body>