기록과 정리의 공간

[JS] HTML DOM Elements 본문

언어/HTML&CSS&Javascript

[JS] HTML DOM Elements

딸기맛도나쓰 2020. 8. 2. 21:05

목표

  • (1~2번)Javascript로 HTML 엘리먼트를 조작하고자 할 때 사용할 수 있는 방법을 알아본다.
  • (3~5번) HTML DOM Elements - inner HTML / value property / input text value property를 알아본다.

1. Id로 HTML 엘리먼트 찾기 (단수의 값 구하기)

  • DOM에서 HTML엘리먼트를 찾는 가장 쉬운 방법은 엘리먼트 Id를 이용하는 것이다.

  • 예시 (전체 코드 링크)

    var myElement = document.getElementById("intro");

  • 엘리먼트를 찾으면 getElementById함수는 엘리먼트를 객체로서 리턴하고, 찾지 못하면 myElement는 null값을 갖는다.

2. Tag Name으로 엘리먼트 찾기 (복수의 값 구하기)

  • 다음은 모든 p 태그를 찾는 예시 코드이다. (전체 코드 링크)

    var x = document.getElementsByTagName("p")

  • 다음은 특정 id값을 가진 엘리먼트에서 특정 태그를 전부 찾기 위한 예시 코드이다. (전체 코드 링크)

    var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

  • y[0].innerHTML과 같은 형태로 사용할 수 있다.

3. HTML DOM innerHTML property

  • innerHTML property는 엘리먼트의 HTML content를 설정하거나 리턴한다.

  • 예시 : "demo"라는 id를 가진 엘리먼트의 HTML content를 변경한다. (전체 코드 링크)

    document.getElementById("demo").innerHTML = "Paragraph changed!";

4. HTML DOM value property

  • value property는 엘리먼트의 attribute(속성)값을 설정하거나 리턴한다.

  • 예시 : 다음은 첫 번째 button 엘리먼트의 첫 번째 attribute(속성)의 값을 얻는 코드이다. (전체 코드 링크)

    var x = document.getElementsByTagName("BUTTON")[0].attributes[0].value;

5. Input Text value Property

  • 텍스트 필드의 value attribute(value 속성)의 값을 설정하거나 리턴한다.

  • 예시 : "myText"라는 id를 가진 엘리먼트인 input의 value 속성의 값 "Mickey"를 "Johnny Bravo"로 변경함. (코드 링크)

    <!DOCTYPE html>
<html>
<body>

Name: <input type="text" id="myText" value="Mickey">

<p>Click the button to change the value of the text field.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("myText").value = "Johnny Bravo";
}
</script>

</body>
</html>
저작자표시 비영리

'언어 > HTML&CSS&Javascript' 카테고리의 다른 글

[HTML] form태그 enctype 속성 / input태그 multiple 속성  (0) 2021.01.11
[JQuery] ajax settings 일부 정리  (0) 2021.01.04
[JS] BOM / Window 객체 / location객체  (0) 2020.08.02
'언어/HTML&CSS&Javascript' Related Articles more
Comments