코딩왕랄프👊🏻

[Javascript] HTML DOM 본문

카테고리 없음

[Javascript] HTML DOM

hyerm_2 2021. 7. 14. 09:47
반응형
SMALL
HTML DOM?

Document Object Model

웹 페이지가 로드될때, 브라우저가 DOM을 생성

접근하는 문서의 표준을 정의

 

 

 

#Method

DOM에서 모든 html 요소들은 object

Property 
=> get or set 할 수 있는 값
Method
=> action
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

/*
getElementById : element를 찾는데 사용되는 Method
innerHTML : HTML element
*/
innerHTML
=> HTML element를 얻거나 변경할때 사용

 

 

# DOM Document

 

HTML Element 찾기
document.getElementById(id) element id
document.getElementsByTagName(name) tag name
document.getElementsByClassName(name)  class name

 

HTML Element 변경

 

element.innerHTML =  new html content inner HTML 
element.attribute = new value attribute value 
element.style.property = new style the style of an HTML element
element.setAttribute(attribute, value)  attribute value 

 

Element 더하거나 빼기
document.createElement(element) Create 
document.removeChild(element) Remove
document.appendChild(element) Add
document.replaceChild(new, old) Replace 
document.write(text) Write 

 

Event Handler
document.getElementById(id).onclick = function(){code} Adding event handler code to an onclick event

 

 

# DOM forms

DOM Form
=>  Form field가 비어 있을 때, 메세지를 alert하고, false를 리턴
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>
</head>
<body>

<h2>JavaScript Validation</h2>

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

</body>
</html>

 

# DOM CSS

document.getElementById(id).style.property = new style
<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>

<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

</body>
</html>

 

 

# DOM Events

 

onclick()
onload() / onunload()
=>  사용자가 page에 들어가거나 떠날 때 trigger
onchange()
=> combination with validation of input fields에 주로 사용 됨.
onmouseover() , onmouseout()
=> 마우스를 위에 둘때
onmouseup(), onmousedown()
=> 마우스 클릭 후 이벤트

 

 

# Event Listener

 

element.addEventListener(event, function, useCapture);
addEventListener()
=> 다른 event handler를 오버라이팅 없이 event handler 사용

 

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to execute a function when a user clicks on a button.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}
</script>

</body>
</html>

 

 

# DOM Nodes

 

: DOM에 새로운 element 더하기 위해, element(node)를 만들어야 한다!

 

 

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

 

 

반응형
LIST