컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

다른 글에선 HTML에 컨텐츠를 추가하거나 읽어줄 때 다음과 같은 방법을 사용한다고 했다. 선택된 요소 노도의 텍스트 값 확인: 'textContent' 선택된 요소 노도의 텍스트 값 확인: 'innerText' 선택된 요소 노도의 텍스트+태그까지 확인: 'innerHTML' 이 중에서 'innerHTML'은 텍스트 뿐 아니라 태그는 따로 분류하여 처리한다. 만약에 자바스크립트를 통해 HTML 화면상에 무언가 문서를 추가로 넣고 싶다면 'innerHTML'을 쓴다. 다만 'innerHTML'은 보안상의 문제를 일으킬 수 있다. 그렇다면 어떻게 해야 상대적으로 안전하게 HTML 화면에 내용을 추가해줄 수 있을까? 그럴 때는 각종 노드를 만들고 다루는 메서드를 이용하면 된다. 우선 간단하게 보면 다음과 같다..

'DOM'에서 텍스트 노드에 접근하는 방법은 굉장히 다양하다. 예전 올린 글에선 'DOM'의 텍스트 노드에는 'nodevalue'를 이용한다고 했다. 위와 같은 내용의 'HTML' 문서가 있다고 가정해보자. 해당 'HTML'의 코드는 다음과 같다. 테스트입니다. 이때 텍스트 노드에 접근하기 위해선 다음과 같이 하면 된다. 어렵지 않게 텍스트 노드의 값을 구할 수 있지만 이런 경우 문제가 생긴다. 1. nodevalue의 문제점 위와 같은 'HTML' 화면이 있다고 가정해보자. 코드는 아래와 같다. 테스트1 테스트2 이때 위에서 한 것과 같이 태그의 내용을 선택해보자. 코드의 결과는 다음과 같다. 원하는 결과와 다른 결과가 나왔다. 'nodeValue'를 이용할 경우 'nodeValue'는 텍스트 노드만 ..

우리는 다른 게시글을 통해 속성 노드의 생성, 수정, 삭제를 배웠다. 요소 노드에 속성 노드를 추가하기 위해선 다음과 같은 메서드를 사용했다. 속성 노드 확인 : hasAttribute() 메서드, getAttribute() 메서드, 속성 노드 생성 : setAttribute() 메서드 속성 노드 삭제 : removeAttribute() 메서드 예를 들어서 아무 속성도 없는 요소 노드에 글자에 색상도 넣고 싶다면 다음과 같이 코드를 짜면 된다. 테스트 문장입니다. 위 코드를 실행하면 아래와 같이 변한다. 위 코드를 쓰면 한 번에 여러 속성값 전달할 수도 있다. 1. 속성 노드의 간략화 하지만 문제는 이렇다. 저렇게 쓸 경우 한 두개의 요소 노드 컨트롤은 어렵지 않다. 하지만 수백개의 요소 노드의 색상을 ..

HTML 조작시 어트리뷰트(attribute) 즉 속성값을 이용해야하는 경우가 존재한다. 단순히 텍스트만 수정한다면 굳이 속성값을 이용할 필요가 없을지 모른다. 하지만 HTML 컨텐츠에 색상을 입히거나 다양한 효과를 주고 싶다면 속성값을 이용하게 된다. 사실 속성값은 그 종류가 굉장히 다양하지만 몇 가지만 알면 충분히 활용이 가능하다. 1. 어트리뷰트 노드 접근하기 위와 같은 HTML의 태그가 있다고 생각해보자. 이 태그를 선택하기 위해선 아래처럼 'getElementsByTagName' 메서드를 이용하면 된다. 하지만 뭔가 조잡하다. 게다가 'getElementsByTagName'메서드는 태그의 내용이 바뀌면 선택 내용도 바뀐다. 그렇다면 해당 태그가 가진 'id' 속성값 또는 'class' 속성값을 ..

DOM을 이용해 HTML을 조작할 때 해당 요소 노드가 가진 자식 노드를 조작해야할 때가 있다. 즉 요소 노드 밑의 '텍스트 노드'를 다룰 때가 있다. 예시로 보자. 1번 2번 3번 위 HTML 코드를 실행하면 다음과 같은 결과가 나온다. 이때 1번 요소 텍스트에 접근하고 싶다면 어떻게 하면 될까? 참고로 각 노드가 가진 값 즉 value를 가져오는 프로퍼티는 'nodevalue'다. 그럼 이렇게 하면 되지 않을까? 답은 코드에도 썼듯이 'null'이다. 요소 노드의 값을 읽어오라고 'nodevalue' 프로퍼티를 썼는데 왜 못읽어올까? 바로 그 이유는 요소 노드와 텍스트 노드는 층위가 다르기 때문이다. 즉 텍스트 노드는 요소 노도의 하위 관계이므로 요소 노드의 값으로 바로 불러오는 것이 아니다. 요소 ..

DOM의 각 요소 노드에 접근하는 방법은 매우 다양하다. 기본 제공 메서드를 통해 'id', 'class', 'tagname'을 통해서 접근하는 방법이 가장 쉽다. 그리고 다음으로 많이 쓰이는 것은 노드의 관계를 이용한 접근 방법이다. 이게 무슨 이야기냐면 다음과 같다. DOM은 트리 요소로 객체들이 구조화되어 있다. 1번 2번 3번 4번 예를 들어 위의 코드의 요소 노드들의 상관 관계 구조도를 그리면 다음과 같다. HTML 문서 구조상 위아래 관계의 노드는 부모 자식 관계를 맺고 있다. 그리고 동등한 관계의 노드는 형제 관계를 맺고 있다. 결국 노드든 DOM Tree 구조상 다른 노드와 부모, 형제 관계를 맺는다. 그리고 이러한 관계를 이용해 접근해줄 수 있는 프로퍼티가 제공된다. 이름 설명 paren..

'DOM'은 'HTML' 문서의 요소와 내용들을 객체화시킨 것이다. 그리고 이러한 객체에 접근하여 컨트롤을 해줄 수 있다. 그리고 이때 접근하기 쉽게 메서드와 프로퍼티가 제공된다. 여기서는 문서의 요소(Element) 노드에 어떻게하면 접근할 수 있는지를 알아본다. 단일 요소에 접근하기 1. getElementById() 대략 해석해서 쓰자면 다음과 같다. '파라미터로 주어진 문자열과 동일한 id값를 통해 요소를 얻을 수 있게 한다.' 'getElementById()'에 제공한 문자열과 동일한 'id' 속성을 가진 요소를 HTML 문서에서 찾아준다. 그리고 이 'id' 속성을 가진 'Element' 객체를 반환한다. 즉 해당 요소를 이용할 수 있게 도와준다는 말이다. ID테스트입니다. 코드는 위와 같다...

DOM이란? 이미 블로그에서 여러 차례 정리했지만, 'DOM'이란 것이 중요하다보니 다시 다루고자 한다. 'DOM'은 'Document Object Model'의 약자로 풀이하자면 문서 객체 모델이다. 웹페이지를 만들 때 3요소라는 'HTML', 'CSS', '자바스크립트'는 사실 서로 다른 개념이다. 'HTML' 문서 내에서 보통 세 가지를 모두 쓰다보니 햇갈릴 수 있지만 셋은 다른 언어다. 물론 세 언어는 서로 이용적인 측면에선 밀접한 관계를 갖는다. 그러나 셋은 다른 언어고 서로를 컨트롤하기 위해선 필요한 것 중 하나가 'DOM'이다. 'DOM'은 웹페이지에서 문서의 구성과 내용을 맡은 'HTML' 요소들을 다루기 위해 만들어졌다. 자바스크립트는 'HTML' 문서를 다뤄야하는데 이때 'HTML' 문..