Vanilla JS 자습서 - DOM의 첫 번째 섹션 빌드 블록

이 글은'코드 랜덤 사용'강좌의 첫 번째 부분입니다. 여기서 당신은 기본적인 조작 기교를 배울 것입니다.만약 당신이 나의 이전 글을 놓쳤다면, 나는 그곳에서 바닐라 JS가 무엇인지, 그리고 그것이 왜 중요한지 토론했을 것이다. here
우리 시작합시다!

설치 프로그램

1) 컴퓨터에 폴더/디렉토리를 만듭니다.예를 들면'바닐라 js 연습'
2) 이 폴더에 두 개의 파일index.html과 index.js을 만듭니다.
3) 이제 새 index.html 파일에 템플릿 코드를 추가합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Vanilla JS Practice </title>
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

일반적으로 HTML 파일의 <body> 부분에서 우리는 <h1>, <h2>, <div>와 <p> 등 다양한 요소를 볼 수 있다.그러나 HTML 파일의 <body> 부분은 <script> 태그만 포함하고 다른 내용은 없습니다.이 <script> 표시는 기본적으로 웹 브라우저가 유효 코드를 실행하기 위해 index.js 파일을 읽는 것을 알려준다.
이것은 우리가 마지막으로 접촉한 index.html 문서이다.본문에서 보신 모든 코드는 저희 index.js 파일에 있습니다.

빌드 블록 #1 및 2- 문서.createElement() 및.텍스트 내용

자, 이제 우리는 index.js 파일에 다음 코드 블록을 입력한 다음 방금 입력한 내용의 설명을 계속 읽습니다.

const header = document.createElement('h1');
header.textContent = 'Vanilla JS practice';

vanilla JS를 사용하여DOM 작업을 할 때 기억해야 할 가장 중요한 코드 세션은 document.createElement()입니다.쉽게 말하면 HTML 요소를 만드는 데 사용되는 코드입니다.만들 HTML 요소는 따옴표의 괄호 안에 있습니다.우리의 예에서 우리는 document.createElement('h1')를 사용하여 <h1> 요소를 만들고 그것을 header에 저장했다.
또 하나의 중요한 구성 부분은.textContent이다.추정할 수 있는 바와 같이, 이것은 요소 텍스트의 속성을 설정하거나 변경할 수 있도록 합니다.이 예의 두 번째 줄에서, 우리는 이전 줄에서 만든 요소 (header 를 사용하여 텍스트를 Vanilla JS practice 로 설정합니다.
아이고!이것은 이렇게 간단한 일에 대해 많은 해석이 있다.vanilla JS를 사용하여 HTML 코드를 작성하는 것은 HTML 자체만 작성하는 것보다 훨씬 길다.우리 두 줄의 vanilla JS의 HTML 등가물은:

<h1>Vanilla JS Practice</h1>

vanilla JS를 사용하는 것이 코드를 작성하는 가장 빠르고 간결한 방법이라고 말하는 웹 개발자를 찾기가 매우 어렵다.그러나 이 점을 배우는 것은 가장 빠르거나 우아한 인코딩 방식이기 때문이 아니라는 것을 명심하세요.이 점을 배우는 이유는 추상층을 없애고 언어와 DOM 메커니즘을 진정으로 이해하는 좋은 방법이기 때문입니다.그러니까 가자!
자, 우리들의 현재 진전을 볼 때가 되었다.웹 브라우저에서 index.html 파일을 열고 새 제목을 확인합니다.
...그것은 어디에 있습니까?왜 얘가 안 나타났어??😱😱😱

간단한 대답은 그것이 거기에 있지 않다는 것이다. 왜냐하면 네가 거기에 있다고 말하지 않았기 때문이다.

구성 블록 #3, 4 및 5.appendChild（）。removeChild() 및.삭제()

걱정하지 마라, 너는 잘못을 저지르지 않았어!이것은 HTML과 vanilla JS 사이의 중요한 차이점이다.HTML에서는 일반적으로 <body> 태그 사이에 올바른 구문이 있는 요소가 DOM에 표시됩니다.vanilla JS를 사용할 때는 그렇지 않습니다.의도적으로 만든 각 요소를 DOM에 추가해야 합니다.좀 아프지 않아요?이것이 바로 전체 프로젝트에서 vanilla JS를 사용하는 것이 일반적으로 바람직하지 않은 이유 중의 하나이다. 당신이 연습을 위해 이렇게 하지 않는 한, 우리처럼.
한마디로 이것이 .appendChild()의 용무지다.
DOM에 추가하는 방법header:document.body.appendChild(header) Document.body는 <body> 파일의 index.html 부분을 인용하였으며, appendChild는 로컬 방법으로 지정된 요소(이 예에서 header를 DOM에 추가할 수 있습니다.지정된 요소를 DOM에서 이전에 추가한 요소 아래에 추가appendChild합니다.
이제 코드 편집기에 입력해야 할 세 줄 코드는 다음과 같습니다.

const header = document.createElement('h1');
header.textContent = 'Vanilla JS practice';
document.body.appendChild(header);

브라우저에서 index.html 파일을 다시 열면 다음이 표시됩니다.

잘했어!vanilla JS에서 첫 번째 요소인 <h1> 헤더를 만들었습니다.
우리 좀 더 창조해 봅시다.제목을 만들고 추가하려면 제목 아래에 텍스트를 만듭니다.스스로 이것을 시험해 보세요. 만약 당신과 나의 노력을 지도하거나 비교할 필요가 있다면 아래로 굴러가세요.행운을 빌어, 할 수 있어!

안녕하세요?네가 제목 아래에 약간의 문자를 추가할 수 있기를 바란다.더 중요한 것은 당신이 지금 JS, HTML, DOM에 대한 이해가 적어도 당신이 이전에 여기까지 굴러왔을 때보다 더욱 튼튼하길 바랍니다.
다음은 내가 텍스트를 추가할 때 한 일이다.

const header = document.createElement('h1');
header.textContent = 'Vanilla JS practice';
document.body.appendChild(header);

const text1 = document.createElement('p');
text1.textContent = 'Go hang a salami, I\'m a lasagna hog.';
document.body.appendChild(text1);

const text2 = document.createElement('p');
text2.textContent = 'Read the previous sentence backwards.';
document.body.appendChild(text2);

잘했어!appendChild를 사용하여 DOM에 요소를 추가할 수 있는 것처럼 removeChild를 사용하여 요소를 삭제할 수도 있습니다.
예를 들어, 위에서 작성한 변수text2를 삭제하려면 다음 두 가지 방법 중 하나를 사용할 수 있습니다.
1) document.body.removeChild(text2);2) text2.remove();첫 번째 방법은 removeChild를 사용하여 원소를 삭제하는 것이다. 방법은 우리가 사용한 appendChild와 원소를 추가하는 방법과 완전히 같다.우리는 하위 요소 (document.body 를 추가하거나 삭제하는 방법 text2 을 부모급에서 호출합니다.

울지 마, 얘야.너의 부모님은 vanilla JS로 너를 삭제하지 않을 거야!
두 번째 방식은 다르다.그것은 text2 방법이 아니라 remove 방법을 사용한다.이 방법으로 부모 요소나 하위 요소를 인용하지 않았기 때문에 삭제할 요소에서 바로 사용할 수 있습니다. 따라서 removeChild 는 우리의 문법이 될 것입니다.

빌드 모듈 #6 및 7-text2및 를 제거합니다.setAttribute（）

어떤 방식으로 요소를 표시한 다음에 이 탭을 사용하여 요소를 방문하거나 수정하는 과정은 웹 개발에서 매우 중요하다.HTML에서는 유형, 클래스 및 ID와 같은 세 가지 레이블 유형이 있습니다.만약 당신이 이 click here 를 처음 들었다면, 이 라벨들을 이해하는 데 몇 분의 시간이 걸릴 것이다. (더 정확히 말하면 선택기)
vanilla JS를 사용하여 이러한 속성을 설정하고 삭제할 수 있습니다..removeAttribute() 두 개의 파라미터가 필요합니다.설정할 속성과 속성의 이름입니다.
우리 몇 가지 예를 봅시다.
1) 클래스 [회문]을 에 추가.setAttribute():text12) id "점보 바다코끼리"를 text1.setAttribute("class", "palindrome");에 추가합니다.text2 text2.setAttribute("id", "giantWalrus");를 사용하여 속성을 삭제하는 작업 방식은 삭제 선택기의 값을 지정할 필요가 없는 한 거의 같다.예를 들어, .removeAttribute()에서 id "giantWalrus"를 제거하려면 다음과 같이 하십시오.text2

빌드 모듈 #8 및 9-text2속성 삭제("id");그리고질의 선택기()

vanilla JS를 사용하여 요소에 속성을 설정하는 방법을 배웠으니, 그것들의 속성을 통해 접근하는 방법도 알아야 할 것이다.
속성별로 요소에 액세스하는 방법으로는 .querySelectorAll()과.querySelector()가 있습니다..querySelectorAll()는 문서에서 제공한 선택기와 일치하는 첫 번째 요소를 되돌려주고 .querySelector()는 노드 목록의 형식으로 일치하는 모든 요소를 되돌려줍니다.노드 목록은 그룹과 유사하지만 사용 가능한 방법이 적습니다.
이 두 가지 방법 중 어느 하나든지 여러 개의 속성을 표준으로 제공할 수 있다.기타 속성은 쉼표로 구분됩니다.
우리 몇 가지 예를 봅시다.#1과 #2의 답은 프롬프트 아래에 제공됩니다.#3과 #4의 답은 아래 몇 줄에 있다.먼저 스스로 시험해 본 후에 너의 일을 검사해라.
1) 클래스.querySelectorAll()를 포함하는 첫 번째 요소의 변수를 만듭니다firstElem.sampleClass2) 클래스const firstElem = document.querySelector(".myClass");의 모든 요소를 포함하는 변수를 만듭니다allElems.classDismissed3) 변수const allElems = document.querySelectorAll(".classDismissed");를 만듭니다. 이 변수는 idgreatId의 요소를 포함합니다.
4) 문서에 있는 모든 thisIsAGreatExampleIdName; 및 divsAndPs 요소를 포함하는 변수<div>를 만듭니다.
#3의 대답 - <p>#4의 대답 - const greatId = document.querySelector("#thisIsAGreatExampleIdName");

결론

잘했어, 너는 첫 번째 부분의 결말을 완성했어!vanilla JS가 왜 시간을 들일 가치가 있는지 알고 실천을 했습니다.이 자습서에서는 다음을 수행합니다.

vanilla JS

로 HTML 요소 만들기

DOM

에 이러한 요소 추가 및 제거

속성별로 선택한 요소

나는 이것이 너에게 도움이 되기를 바란다.두 번째 섹션에서는 vanilla JS를 사용하여 콘텐츠를 디자인할 예정입니다.
원인:

잔가 사진: 네슨 두무로(Unsplash)

다나 디볼크의 바닐라 아이스크림 오믈렛 그림(Unsplash)

Iker Urteaga의 파란색 블록 이미지

Psyduck gif 포켓몬스터 국제회사에 입금

포켓몬스터 국제유한공사

의외의 피카츄 얼굴 이미지

고양이 키보드 기 gif 작성자 @Aarons Animals(Giphy)

Arwan Sutanto(Unsplash)

의 우는 아기 사진

Reference

이 문제에 관하여(Vanilla JS 자습서 - DOM의 첫 번째 섹션 빌드 블록), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/shinetechnicallywrites/vanilla-js-tutorial-part-one-building-blocks-of-the-dom-nh9

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)