반응형

**정규표현식 리터럴**

var pattern = /a/;

var pattern = new RegExp('a');

두가지 모두 같은 결과를 만들지만 각자가 장단점이 있다.

​

pattern.exec('abcde');

​

객체 안에 함수가 들어가있으면 그건 '메소드'

자바스크립트의 내장함수는'빌트윈 객체' '빌트윈 메소드'

사용자가 만든 함수는 '사용자정의메소드' '사용자정의함수'

​

반응형

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 기본  (0) 2019.02.27
자바스크립트 공부내용 정리  (0) 2019.02.27
자바스크립트 - 제어대상 찾기 (dom요소 찾기)  (0) 2019.02.27
JavaScript - .map , ELEMENT  (0) 2019.02.27
JavaScript - NODE 객체  (0) 2019.02.27
반응형

문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다.

​

​

1.html 태그로 선택하는 방법

상위요소에서 하위요소 선택방법

document.getElementsByTagName('태그')

태그들을 유사배열로 만들어 준다

​

<!DOCTYPE html> <html> <head> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <ol> <li>HTML</li> <li>CSS</li> <li>JAVASCRIPT</li> </ol> <ol> <li>HTML</li> <li>CSS</li> <li>JAVASCRIPT</li> </ol> </body> <script> // document.getElementsByTagName('xx') 하면 xx들을 유사배열로 만들어준다 var ul = document.getElementsByTagName('ol')[0]; //document 를 이용하여 ol요소들중[0]을 객체에 저장한다 var lis = ul.getElementsByTagName('li'); //ul[0]의 요소들 중의 li 를 갖고있는 요소들의 집합 for(var i=0; i <lis.length-1; i++){ lis[i].style.color='red'; } </script> </html>

​

​

2.class Name으로 선택하는 방법

document.getElementsByClassName('클래스명')

클래스명들을 유사배열로 만들어 준다

<!DOCTYPE html> <html> <head> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <ul> <li>HTML</li> <li class="active">CSS</li> <li class="active">JavaScript</li> </ul> <ol> <li>HTML</li> <li class="active">CSS</li> <li class="active">JAVASCRIPT</li> </ol> <ol> <li>HTML</li> <li>CSS</li> <li>JAVASCRIPT</li> </ol> </body> <script> var ul = document.getElementsByTagName('ol')[0]; var lis = ul.getElementsByTagName('li'); for(var i=0; i <lis.length-1; i++){ lis[i].style.color='red'; } var lis2 = document.getElementsByClassName('active'); //active 란 이름을가진 클래스이름들을 유사배열로 만든다 lis2[0].style.color = 'blue'; //유사배열들중 0번째 .style의.color을 blue로 바꿔준다 lis2[1].style.color = 'blue'; lis2[2].style.color = 'blue'; lis2[3].style.color = 'blue'; </script> </html>

3. ID 로 선택하는 방법

가장 많이 쓰이고 가장 우수한 성능을 자랑한다.

이걸 사용할수있다면 가급적 이걸로 사용하는게 좋다

ID는 문서의 유일한 값으로 표시되기 때문에

getElements 가아닌 getElement 를 사용한다 (유사배열이 아닌 1개만 선택된다)

document.getElementById('아이디')

<!DOCTYPE html> <html> <head> </head> <body> <ul> <li id="act">HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> <script> var li = document.getElementById('act'); //act 란 이름을가진 ID를 선택한다 li.style.color='red'; </script> </html>

​

4. CSS 선택자의 문법으로 선택하는 방법

1. document.querySelector('.sa') : 클래스의 이름이 sa 엘리먼트중 맨 첫번째 만을 찾는다

2. document.querySelectorAll('li') : li 태그 요소들을 전부 유사배열로 만든다

' ' 안에 이름을 넣을때

. 을 넣어서 쓰면 className을 찾고

#을 넣을경운 id 값을 찾고

그냥 넣엇을 경우엔 태그를 찾는다

<!DOCTYPE html> <html> <head> </head> <body> <ol> <li id="act">HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> <ul> <li id="act">HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> <script> var ul = document.querySelector('li'); //li 엘리먼트중 맨위에 첫번째 객체만을 담는다 ul.style.color='red'; var ol = document.querySelectorAll('ol'); //ol 엘리먼트들을 유사배열로 만든다 ol[0].style.color='blue'; </script> </html>



반응형

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 공부내용 정리  (0) 2019.02.27
자바스크립트 공부내용정리(2)  (0) 2019.02.27
JavaScript - .map , ELEMENT  (0) 2019.02.27
JavaScript - NODE 객체  (0) 2019.02.27
javascript - let,var,const 차이  (0) 2019.02.27
반응형


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> </head> <body> <ul> <li>html</li> <li>css</li> <li>abcdbcd</li> </ul> <script> var li = $('li'); li.map(function(index,elem){ console.log(index,elem); $(elem).css('color','red'); }) </script> </body> </html>

li 를 제이쿼리 객체로 만들고

map 이라는 메소드는 함수로 인자를 받게되있다.

map li 에 있는 객체의 배열을 다 돌면서 .map 의 메소드로 index 값과 elem(엘리먼트값)을 뽑아낸다

elem 에 돔 객체가 담겨있찌만 제이쿼리 함수가 아니라서

$(elem) 이렇게 감싸서 제이쿼리 객체로 변환해서 제이쿼리 메소드를 사용해야한다.

​

​

​

Element 객체

​

저번 블로그 포스팅에도 작성하였지만

Element 는 html 만을 위해서 있는게 아닌

xml , svg , xul , html 등의 각각의 요소들을 다루는것이

Element 이다 그중에서 Element가 상속? 같은걸 받아서

html에서 사용하는게 htmlElement 이다



dom 의 관계

​

element 는 식별자 , 조회 , 속성 3가지가 있다.

​

식별자

엘리먼트를 제어하기 위해서는 그 엘리먼트를 조회하기 위한 식별자가 필요하다.

HTML에서 엘리먼트의 Name 과 id 그리고 class 는 식별자로 사용된다.

식별자 API는 이 식별자를 가져오고 변경하는 역활을 한다.

​

1. ) Element.tagName

Element.tagName //엘리먼트 객체의 태그의 이름을 뽑는다

만약 document.getElementById('active').tagName

// 을 하게될경우 id값이 active인 tag의 이름을 출 력한다

//다만 읽기전용이라 document.getElementById('active').tagName = a 를 해도 변하지는 않는다

​

2. ) Element.ID

var active = document.getElementById('active'); // id 가 active인 값을 찾아 저장한다 console.log(active.id); // active active.id = 'active222'; // id 값을 active222 로 바꿔준다 console.log(active.id); // active222

​

3. ) Element.className , Element.classList

먼저 Element.className 은 class로 등록된 이름을 찾는다. var active = document.getElementById('active'); // id가 active인 엘리먼트를 저장 console.log(active.className); // id가 active인 요소의 클래스명을 출력 active.className = 'ab213'; // 클래스명을 ab213 으로 바꿈 console.log(active.className); // ab213 그다음 Element.classList var active = document.getElementById('active'); console.log(active.classList); 이렇게 담아주게 되면 DOMTokenList 라는 객체에 유사배열로 className이 active인것을 담는다 active.classList.add('abc'); //하면 클래스에 abc 이름이 추가된다 ex) class = 'active abc' active.classList.remove('abc'); // 클래스에 abc 이름이 삭제된다 ex) class = 'active' active.classList.toggle('abc'); // 클래스에 abc 이름이 있으면 지우고 없으면 생긴다.

​

조회

조회 API는 엘리먼트를 조회하는 기능이다.

조회방법은 위에서 계속 나왔기 때문에 조회대상을 제한하는 방법만 소개한다.

document.getElementsBy* 메소드를 통해서 엘리먼트를 조회했다.

document객체는 문서 전체를 의미하는 엘리먼트이기 때문에 document로 조회하면 문서전체중에 조회한다

Element 객체도 getElementsBy* 엘리먼트가 있는데 Element객체의 조회 메소드는 해당 엘리먼트위 하위 엘리먼트를 대상으로만 조회를 한다.

​

Element.getElementsByClassName // 클래스의 이름을 찾는다

Element.getElementsByTagName // 태그의 이름으로 찾는다

Element.querySelector // 정해준 이름값으로 찾지만 1개의 결과만 내놓는다

Element.querySelectorAll //정해준 이름값으로 찾아 유사배열로 만든다.

​

​

​

속성

Element.getAttribute(name)

Element.setAttribute(name,value)

Element.hasAattribute(name);

Element.removeAttribute(name);

//html <a href="http://www.naver.com" title="네이버" id ="target">네이버</a> //script var t = document.getElementById('target'); t.getAttribute('href'); // http://www.naver.com **href 의 값을 뽑는다 t.setAttribute('href','http://google.com'); // href = 'http://google.com' 바뀜 t.hasAttribute('href'); // true **href 속성이 있나 확인 t.removeAttribute('href'); //href **속성 제거

​

​

이렇게 다양한 방법으로 엘리먼트를 접근해서 수정할수있는데

여기서 프로퍼티방식과 속성방식은 미묘하게 차이가있다

클래스명을 바꿀때 프로퍼티방식으로 active.className = 'abcd' 이렇게 사용하지만

속성방식으로는 active.setAttribute('class','abcd'); 이렇게 사용한다 ( class는 예약어이기때문)



또한 href도 조금 미묘한 차이가 있는대. <a id="target" href="./demo1.html">link</a> var target = document.getElementById('target'); //현재 url 주소가 http://localhost/web/elements/abcd.html 이라면 console.log('target.href',target.href); // http://localhost/web/elements/demo1.html 로 바뀌지만 console.log('target.getAttribute("href")', target.getAttribute("href")); // 이렇게 하면 href의 경로는 ./demo1.html 로 바뀐다

​


반응형

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 공부내용정리(2)  (0) 2019.02.27
자바스크립트 - 제어대상 찾기 (dom요소 찾기)  (0) 2019.02.27
JavaScript - NODE 객체  (0) 2019.02.27
javascript - let,var,const 차이  (0) 2019.02.27
javascript - DOM 선택 STYLE 바꾸기  (0) 2019.02.27
반응형




모든 엘리먼트들의 거희 조상이다.

여러가지 형태의 HTML코드를 객체화 시킨게 DOM 이다.

​

NODE 관계

엘리먼트는 서로 부모,자식,혹은형제자매 관계로 연결되어 있다.

각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다.

​

Node.childNodes

Node.firstChild <-- node 객체의 첫번째 node

Node.lastChild

Node.nextSibling

Node.previousSibling

Node.contains()

Node.hasChildNodes()

<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="http://code.jquery.com/jquery.min.js"></script> </head> <body id = "body"> <ol> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ol> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> <script> var body = $('body') // var body = document.ElementById('body'); 와 같다 body[0].firstChild // #text body 태그 다음 자식의 첫번째 노드를 출력하는 api다 //결과가 text인 이유는 body 태그다음 줄바꿈 문자가 있어서 그렇다 body[0].firstChild.nextSibling // nextSibling 는 같은 노드의 다음 형제 자매를 부른다 같은 레벨에 있는 node들 body[0].firstChild.previousSibling // previousSibling 는 같은 레벨의 노드중 이전 노드를 부른다 body[0].firstChild.parentNode // parentNode는 부모의 노드를 부른다 body[0].childNodes //자식 노드들을 유사배열로 담아서 호출 </script> </body> </html>

​

​

노드의 종류

Node 객체는 모든 구성요소를 대표하는 객체이기 때문에 각각의 구성요소가 어떤 카테고리에 속하는 것인지를 알려주는 식별자를 제공한다.

​

Node.nodeType //node의 타입을 의미한다 node의 종류에따라서 정해진 상수가 존재한다

for (name in Node){ //각 노드들의 정해진 상수 console.log(name,Node[name]); } ///////출력결과/////////// VM684:2 ELEMENT_NODE 1 VM684:2 ATTRIBUTE_NODE 2 VM684:2 TEXT_NODE 3 VM684:2 CDATA_SECTION_NODE 4 VM684:2 ENTITY_REFERENCE_NODE 5 VM684:2 ENTITY_NODE 6 VM684:2 PROCESSING_INSTRUCTION_NODE 7 VM684:2 COMMENT_NODE 8 VM684:2 DOCUMENT_NODE 9 VM684:2 DOCUMENT_TYPE_NODE 10 VM684:2 DOCUMENT_FRAGMENT_NODE 11 VM684:2 NOTATION_NODE 12 VM684:2 DOCUMENT_POSITION_DISCONNECTED 1 VM684:2 DOCUMENT_POSITION_PRECEDING 2 VM684:2 DOCUMENT_POSITION_FOLLOWING 4 VM684:2 DOCUMENT_POSITION_CONTAINS 8 VM684:2 DOCUMENT_POSITION_CONTAINED_BY 16 VM684:2 DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC 32 이상수를 body.firstChild.nodeType === Node.TextNODE // true 이런식으로 노드객체가 뭔지 확인가능

Node.nodeName

body[0].firstChild.nextSibling.nodeName

// UL 이렇게 BODY 태그의 첫번째자식의 다음번쨰 노드의 이름을 출력한다 (엘리먼트객체의이름)

​

​

값

Node 객체의 값을 제공하는 API

​

Node.nodeValue

Node.textContent

​

​

NODE 추가,변경,삭제 (자식관리)

Node 객체의 자식을 추가하는 방법에 대한 API

​

Node.appendChild() <-- 인수에 맨뒤에 노드 추가

Node.removeChild() <-- 인수에 노드 제거

Node.replaceChild()

<!DOCTYPE html> <html> <head> <title>Page Title</title> <!-- <script src="http://code.jquery.com/jquery.min.js"></script> --> </head> <body id = "body"> <ol id="ol"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li id='li4'><a href="#">4</a></li> </ol> <ul> <li id = 'target'>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> <script> var body = document.getElementById('body') var ol = document.getElementById('ol'); var li4 = document.getElementById('li4'); var li = document.createElement('li'); // li 변수에 li엘리먼트를 담음 var text = document.createTextNode('text입니다'); // text 변수에 text노드를 담음 li.appendChild(text); //li 엘리먼트에 text 노드 추가 ol.appendChild(li); // ol엘리먼트에 맨 뒷부분에 li 추가 body.insertBefore(li,body.firstChild); // body의 첫번째 자식 앞에 li 를 추가 li4.parentNode.removeChild(li4); // li4를 제거하기위해서 부모노드로 갔다가 제거 노드 이름을 줘야하는 불편함이있다 var target = document.getElementById('target'); //id 가 target 인걸 담는다 var a = document.createElement('a'); // a태그 엘리먼트를 만든다 a.setAttribute('href','http://naver.com/'); // a태그의 속성으로 href를 추가한다 a.appendChild(document.createTextNode('네이버')); //a태그의 첫번째 자식으로 텍스트를 추가한다 target.replaceChild(a,target.firstChild); // target의 첫번째 자식을(텍스트노드: A) a태그로 바꾼다 </script> </body> </html>

​

​

<script> function traverse(target , callback){ if(target.nodeType === Node.ELEMENT_NODE) { //노드의 타입이 엘리먼트노드만 callback(target); // 아래의 익명함수 인자 elem 을 target 로 넣는다 var c = target.childNodes; // body 태그의 자식노드들을 유사배열로 만든다 for (var i=0; i<c.length;i++){ // 유사배열의 자식노드들을 차례대로 콘솔출력 traverse(c[i],callback); } } } traverse(document.getElementById('body'),function(elem){ console.log(elem) }) </script>

위에 써논 기술들의 총집합 요약 소스라고해야하나? 하튼 그렇다..

​


반응형

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 - 제어대상 찾기 (dom요소 찾기)  (0) 2019.02.27
JavaScript - .map , ELEMENT  (0) 2019.02.27
javascript - let,var,const 차이  (0) 2019.02.27
javascript - DOM 선택 STYLE 바꾸기  (0) 2019.02.27
javascript - 바닐라자바스크립트 예제(nomad by nicollas)  (0) 2019.02.27
반응형

ES6 에서 LET , CONST라는 개념이 도입됫다 es5? 인가?

var a = 'abcd';

var a = 'bcdef';

이렇게 이미선언한 변수를 다시선언하면서 값을 넣는것도 가능하게된

이상한 구문이된다

하지만 let 을 선언하면 저런건 불가능해진다

일반 프로그래밍의 변수 선언과 비슷하게 된다는말이다

let은 변수처럼 다른값을 계속 바꿀수 있찌만

const 는 한번 값을 설정하면 다른데에서 값을 바꿀수는 없다 (참조변수는가능)

// 이미 만들어진 변수이름으로 재선언했는데 아무런 문제가 발생하지 않는다. var a = 'test' var a = 'test2' // hoisting으로 인해 ReferenceError에러가 안난다. c = 'test' var c // let let a = 'test' let a = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared a = 'test3' // 값이 재할당이됨 // const const b = 'test' const b = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared b = 'test3' //값이 재할당이 안됨 ( 참조변수는 가능)

​

​

결론

– ES6 에서는 var는 지양하고 가급적 let과 const를 사용하자

– 원시형에서 변수는 let, 상수는 const로 선언한다

– 참조형은 const로 선언한다

​


반응형

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 - 제어대상 찾기 (dom요소 찾기)  (0) 2019.02.27
JavaScript - .map , ELEMENT  (0) 2019.02.27
JavaScript - NODE 객체  (0) 2019.02.27
javascript - DOM 선택 STYLE 바꾸기  (0) 2019.02.27
javascript - 바닐라자바스크립트 예제(nomad by nicollas)  (0) 2019.02.27

+ Recent posts

티스토리툴바