티스토리 뷰

JavaScript

Javascript querySelector,setAttribute,createElement 등

블로그 강승 2021. 3. 26. 18:35

document.querySelector('.a');

a 클래스 반환함. (여러개의 a 클래스가 있다면 맨 위에있는 첫번째 a 클래스 반환)

 

document.querySelectorAll('.a');

노드리스트 형태로(인덱스 있는 형태로) a 클래스 전체를 가저올 수 있음.

 

document.querySelector('.a:nth-child(2)');

여러개의 a 클래스중에 2번째 a 클래스를 반환

getElementByid() 보다는 querySelector()가 막강해서 많이 씀. querySelector()는 익스플로어 8부터 지원이 가능함.

 

setAttribute()

const char = document.querySelector('.characters');
char.setAttribute('data-id',123);

// 결과 값
//클래스 characters에 data-id="123" 이 생김

※특정 element에 속성값을 넣거나 속성값을 가저오거 할때,
data- 로 시작하는 표준 커스텀 속성.
data-index, data-id, data-role 등
data- 의 형식으로 시작하면 어떤 속성이든 필요에 따라 임의로 추가할 수 있음.

 

getAttribute()

const id = char.getAttribute('data-id');
// id에는 123 이 들어있음.

 

createElement()

const pElem=document.createElement('p');
pElem.innerHTML='<a href='#'>안녕<a/>'

//이런것도됨

 

classList.add('special');

special 클래스 추가.

 

className='special';

클래스 이름을 아예 special로 변환.

 

classList.remove('클래스이름');

클래스이름을 삭제

 

classList.toggle('a');

클래스에 'a'라는 클래스가 있다면 없애고, 없다면 추가해줌

 

window.addEventListener('load',function(){내용});

head에 <script>를 쓸시에, 내용에 들어가는게 <body> 보다 먼저 나와서 null이 될수도있음.
그래서 모든 데이터가 'load' 됐을때, 이벤트가 발생하게 하기 위해서 head에 <script>를 쓸때는 이런식으로 하기도함.

'load' 대신에 'DOMContentLoaded'라고 쓰면 구조가 로드 됐을때 이벤트가 실행돼서, 빠르게 실행 가능함.
load보다는 좋을 수 있음. 두 방식의 장점은 전역변수를 안쓰게 돼서 다른 코드와 충돌이 안일어남.

 

(function(){내용})();

<body>바로 위에 <script>를 쓰면 위에서 문제가 됐던, null 값이 나오지 않게됨. 왜냐하면 모든 <body> 내용 뒤에 <script>가 나오니, null이 나올리가 없음. 하지만 여기서도 전역변수 사용을 피하는게 좋기 때문에 <script>뒤에 쓰고 싶은내용을 (function(){내용})(); 내용이라고 써진 곳에 쓰면 됨. 그러면 함수 안에 선언된거기 때문에 전역변수가 아님.

※개발자도구에서 console에서 줄바꿈을 하려고 엔터를하면 실행이 되니,
shift+enter 를 누르면 줄바꿈만 됨.

저작자표시 비영리 변경금지 (새창열림)

'JavaScript' 카테고리의 다른 글

Javascript Immutable, Mutable  (0) 2021.03.25
댓글