프론트엔드
-
DOM 조작 - 속성 노드의 생성, 삭제프론트엔드/DOM 2020. 10. 16. 04:23
HTML 조작시 어트리뷰트(attribute) 즉 속성값을 이용해야하는 경우가 존재한다. 단순히 텍스트만 수정한다면 굳이 속성값을 이용할 필요가 없을지 모른다. 하지만 HTML 컨텐츠에 색상을 입히거나 다양한 효과를 주고 싶다면 속성값을 이용하게 된다. 사실 속성값은 그 종류가 굉장히 다양하지만 몇 가지만 알면 충분히 활용이 가능하다. 1. 어트리뷰트 노드 접근하기 위와 같은 HTML의 태그가 있다고 생각해보자. 이 태그를 선택하기 위해선 아래처럼 'getElementsByTagName' 메서드를 이용하면 된다. 하지만 뭔가 조잡하다. 게다가 'getElementsByTagName'메서드는 태그의 내용이 바뀌면 선택 내용도 바뀐다. 그렇다면 해당 태그가 가진 'id' 속성값 또는 'class' 속성값을 ..
-
DOM 조작 - 텍스트 노드에 대한 접근 / 수정프론트엔드/DOM 2020. 10. 13. 18:50
DOM을 이용해 HTML을 조작할 때 해당 요소 노드가 가진 자식 노드를 조작해야할 때가 있다. 즉 요소 노드 밑의 '텍스트 노드'를 다룰 때가 있다. 예시로 보자. 1번 2번 3번 위 HTML 코드를 실행하면 다음과 같은 결과가 나온다. 이때 1번 요소 텍스트에 접근하고 싶다면 어떻게 하면 될까? 참고로 각 노드가 가진 값 즉 value를 가져오는 프로퍼티는 'nodevalue'다. 그럼 이렇게 하면 되지 않을까? 답은 코드에도 썼듯이 'null'이다. 요소 노드의 값을 읽어오라고 'nodevalue' 프로퍼티를 썼는데 왜 못읽어올까? 바로 그 이유는 요소 노드와 텍스트 노드는 층위가 다르기 때문이다. 즉 텍스트 노드는 요소 노도의 하위 관계이므로 요소 노드의 값으로 바로 불러오는 것이 아니다. 요소 ..
-
DOM - 노드의 관계를 통한 접근프론트엔드/DOM 2020. 10. 7. 04:57
DOM의 각 요소 노드에 접근하는 방법은 매우 다양하다. 기본 제공 메서드를 통해 'id', 'class', 'tagname'을 통해서 접근하는 방법이 가장 쉽다. 그리고 다음으로 많이 쓰이는 것은 노드의 관계를 이용한 접근 방법이다. 이게 무슨 이야기냐면 다음과 같다. DOM은 트리 요소로 객체들이 구조화되어 있다. 1번 2번 3번 4번 예를 들어 위의 코드의 요소 노드들의 상관 관계 구조도를 그리면 다음과 같다. HTML 문서 구조상 위아래 관계의 노드는 부모 자식 관계를 맺고 있다. 그리고 동등한 관계의 노드는 형제 관계를 맺고 있다. 결국 노드든 DOM Tree 구조상 다른 노드와 부모, 형제 관계를 맺는다. 그리고 이러한 관계를 이용해 접근해줄 수 있는 프로퍼티가 제공된다. 이름 설명 paren..
-
DOM - 요소노드에 대한 접근프론트엔드/DOM 2020. 10. 7. 01:32
'DOM'은 'HTML' 문서의 요소와 내용들을 객체화시킨 것이다. 그리고 이러한 객체에 접근하여 컨트롤을 해줄 수 있다. 그리고 이때 접근하기 쉽게 메서드와 프로퍼티가 제공된다. 여기서는 문서의 요소(Element) 노드에 어떻게하면 접근할 수 있는지를 알아본다. 단일 요소에 접근하기 1. getElementById() 대략 해석해서 쓰자면 다음과 같다. '파라미터로 주어진 문자열과 동일한 id값를 통해 요소를 얻을 수 있게 한다.' 'getElementById()'에 제공한 문자열과 동일한 'id' 속성을 가진 요소를 HTML 문서에서 찾아준다. 그리고 이 'id' 속성을 가진 'Element' 객체를 반환한다. 즉 해당 요소를 이용할 수 있게 도와준다는 말이다. ID테스트입니다. 코드는 위와 같다...
-
DOM에 관해서프론트엔드/DOM 2020. 10. 7. 00:15
DOM이란? 이미 블로그에서 여러 차례 정리했지만, 'DOM'이란 것이 중요하다보니 다시 다루고자 한다. 'DOM'은 'Document Object Model'의 약자로 풀이하자면 문서 객체 모델이다. 웹페이지를 만들 때 3요소라는 'HTML', 'CSS', '자바스크립트'는 사실 서로 다른 개념이다. 'HTML' 문서 내에서 보통 세 가지를 모두 쓰다보니 햇갈릴 수 있지만 셋은 다른 언어다. 물론 세 언어는 서로 이용적인 측면에선 밀접한 관계를 갖는다. 그러나 셋은 다른 언어고 서로를 컨트롤하기 위해선 필요한 것 중 하나가 'DOM'이다. 'DOM'은 웹페이지에서 문서의 구성과 내용을 맡은 'HTML' 요소들을 다루기 위해 만들어졌다. 자바스크립트는 'HTML' 문서를 다뤄야하는데 이때 'HTML' 문..
-
자바스크립트 고차함수 - find(), findindex()프론트엔드/JavaScript 2020. 10. 6. 15:59
find 메서드 자바스크립트 고차 함수 중에서 filter를 통해서 검색 기능을 구현할 수 있다고 했다. 그리고 배열 메서드 중 filter를 이용한 검색 기능과 비슷한 기능을 하는 메서드가 있다. find 메서드를 이용하면 배열에서 조건에 해당하는 첫번째 값을 반환한다. 사용법은 다음과 같다. 다른 배열 메서드와 마찬가지로 호출한 배열의 요소, 인덱스, 배열을 콜백함수를 통해 전달받을 수 있다. findindex 메서드 findindex는 find와 기능이 같다. 다만 배열의 value가 아닌 인덱스 값을 넘겨준다. 다른 배열 메서드와 마찬가지로 호출한 배열의 요소, 인덱스, 배열을 콜백함수를 통해 전달받을 수 있다.
-
자바스크립트 고차함수 - every(), some()프론트엔드/JavaScript 2020. 10. 6. 11:53
every와 some 메서드를 사용하면 배열 안에 특정 조건을 만족하는 요소가 있는지 판별할 수 있다. some 메서드 some 메서드는 배열 안의 요소 중 some이 파라미터로 받은 콜백함수의 조건에 맞는 요소가 단 한 개라도 있으면 true를 반환한다. 이때 some 메서드로 호출한 콜백함수는 some 메서드를 호출한 배열 요소, 배열의 인덱스, 배열 그 자체를 파라미터로 받아올 수 있다. every 메서드 every 메서드는 배열 안의 모든 요소가 every가 파라미터로 받은 콜백함수의 조건에 모두 해당되야 true를 반환한다. 이때 every 메서드로 호출한 콜백함수는 some 메서드를 호출한 배열 요소, 배열의 인덱스, 배열 그 자체를 파라미터로 받아올 수 있다.
-
자바스크립트 고차함수 - reduce()프론트엔드/JavaScript 2020. 10. 3. 09:38
reduce함수란? 지금까지 배열을 다루는 메서드들의 대부분은 콜백함수를 인자로 가졌다. 그리고 콜백함수는 인자로 메서드를 호출한 배열의 요소, 인덱스, 배열을 제공받았다. 그런데 reduce 메서드는 조금 다르다. 우선 reduce의 간단한 사용법을 보자. reduce의 간단 사용법 위 코드는 reduce 함수를 통해 num 배열의 모든 요소를 더해서 반환하는 코드다. reduce 메서드는 다른 배열 메서드와 달리 배열의 각 요소들에 대해 reduce 함수를 실행한다. 그리고 이 요소들을 합쳐서 하나의 결과값을 반환한다. 다른 메서드들이 새로운 배열을 만들어 반환한 것과 다른 모습이다. reduce 메서드의 인자로 주어진 콜백함수는 인자로 총 4가지 요소를 갖는다. ● 누적 계산 요소 ● 배열 요소 ●..