index

웹 개발자는 종종 웹 페이지의 논리적구조 를 지정하기 위해 브라우저에서 사용하는 객체 모델 인 DOM 을 조작 하고 이 구조를 기반으로 HTML요소를 랜더링합니다.

HTML은 기본 DOM 구조를 정의합니다 . 그러나 대부분의 경우 일반적으로 사이트에 추가기능 을 추가 하기 위해 JavaScript를 사용하여이 작업을 조작 할 수 있습니다.

이 챕터에서는 DOM 조작 을 돕는 15 가지 기본 JavaScript 메소드 목록이 있습니다. 코드에서 이러한 메소드를 자주 사용할 수 있습니다

1. querySelector

QuerySelector() 메서드는 하나 이상의 CSS 선택자와 일치하는 첫 번째 요소를 반환합니다. 일치하는 항목이 없으면 null을 반환합니다. QuerySelector()가 도입되기 전에 개발자는 지정된 ID 값을 가진 요소를 가져오는 getElementById() 방법을 광범위하게 사용했습니다. getElementById()는 여전히 유용한 방법이지만, 새로운 QuerySelector() 및 QuerySelectorAll() 방법을 사용하면 CSS Selector를 기반으로 요소를 자유롭게 대상으로 할 수 있으므로 유연성이 더 높아졌습니다.

사용 방법은 아래와 같습니다.

<p>1-1</p>
<p>1-2</p>
<p>1-3</p>

<div>div one</div>
<p>2-1</p>
<div>div two</div>

<scrpit>
	var set_color = document.querySelector('div');
	set_color.style.color = 'red';
</scrpit>

2. querySeletorAll()

querySelectorAll 은 querySelect 과 동일하게 작동하나 차이점은 해당 선택자에 해당하는 모든 요소를 가져옵니다. 일치하는 요소는 일치하는 요소를 찾을 수 없는 경우 빈 개체가 되는 NodeList 개체로 반환된다. 또한 반환객체는 nodeList이기때문에 for문 또는 foreach 문을 사용해야 합니다.

사용 방법은 아래와 같습니다.

<p>1-1</p>
<p>1-2</p>
<p>1-3</p>

<div>div one</div>
<p>no blue</p>
<div>div two</div>

<scrpit>
var blueColor = document.querySelectorAll('p');
for(var p of paragraphs)
  p.style.color = 'blue';
</scrpit>

3**. addEventListner()**

이벤트 는 클릭, 포커스 또는로드와 같이 HTML과 반응 할 수있는 HTML 요소에 어떤 일이 발생하는지 나타냅니다. 요소에서 이러한 이벤트 를 수신 하고 이벤트가 발생했을 때 무언가를 수행 하도록 JS 함수를 지정할 수 있습니다 .

특정 이벤트에 기능을 할당 할 수있는 세 가지 방법이 있습니다 .

1)HTML에 inline으로 등록