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

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은 Document Object Model의 약자로 HTML, XML 문서의 프로그래밍 interface다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍언어(흔히 자바스크립트)가 DOM 구조에 접근할 수 있는 방법을 제공한다. 렌더링 엔진이 텍스트 파일로 이뤄진 문서를 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 사용하는 구조 모델을 DOM이라 한다. DOM트리란? 브라우저가 웹서버로부터 받은 정보는 복잡하게 섞여있다. 렌더링 엔진은 이것을 브라우저가 쉽게 이해하기 위해 정리한다. 그 과정에서 모든 요소, 요소의 어트리뷰터(속성), 텍스트를 각각의 개체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이..

TreeSet이란? Set의 인터페이스를 구현한 컬렉션 클래스다. 이진 탐색 트리(binary search tree)라는 자료구조 형태로 데이터를 저장한다. 그리고 당연히 Set 인터페이스를 구현했기에 중복을 허용하지 않는다. 또한 이진검색트리 구조에 맞게 정렬된 상태로 데이터가 저장되므로 저장 순서를 유지하지도 않는다. 즉 내부적으로 데이터 정렬은 가능하지만, 사용자의 데이터 입력 순으로 저장 순서가 유지되진 않는다. 이진 트리(binary tree)란? 이진 트리란 루트에서 시작하여 한 개 부모 노드에 최대 2개의 자식 노드를 붙일 수 있게 설계된 데이터를 저장할 수 있는 자료 구조를 말한다. 그림으로 보는게 더 이해하기 쉽다. 루트를 기준으로 여러 개의 요소(노드, node)가 서로 연결된 구조다...