연말까지 매일 웹 사이트를 지속적으로 제작하는 대학생~50일 동안 귀속 함수를 사용하여 특정한 라벨 수를 만드는 조사 시스템~

7426 단어 JavaScript

개시하다


안녕하세요@70days_js
나는 역귀함수의 문법을 배웠다.
태그 이름을 입력하면 페이지의 태그 수가 자동으로 질의됩니다.
오늘은 50일째다.(2019/12/7)
잘 부탁드립니다.

사이트 축소판 그림


해본 일


동작으로 이런 느낌.↓

탭 이름을 입력하는 프롬프트가 나타납니다.
DOM에서 자동으로 입력한 태그 이름의 태그 개수를 질의할 수 있습니다.
우선, 적당히''에 라벨을 써라.↓
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="day50.js" defer></script>
    <title>day50</title>
  </head>
  <body>
    <h1>タグ数検索システム</h1>
    <div>
      <p></p>
      <div>
        <p></p>
        <div><p></p></div>
        <div></div>
      </div>
    </div>
  </body>
</html>
이번에는 뭐든지.
꼭 해야 한다면 아래 부분을 주의하세요.

JavaScript를 읽는 script 태그에 defer가 있습니다.
이것을 추가하여 > 읽기가 완료되면 JavaScript를 실행합니다.
이번에는 DOM 수 태그를 읽는 것이기 때문에 defer가 있는 것과 없는 것의 차이가 매우 크다.
JavaScript 전문↓
let element = prompt("調べたいタグを入力してください ex: div");
element = element.toUpperCase();
console.log(element);
let wantToCheckNode = [];

//第一引数にdocument（DOM調査の開始場所）、第二引数に数を調べたいタグ名
function checkNodeTree(node, element) {
  for (var i = 0; i < node.childNodes.length; i++) {
    if (node.childNodes[i].nodeType === 1) {
      if (node.childNodes[i].tagName === element) {
        wantToCheckNode.push(node.childNodes[i]);
      }
      checkNodeTree(node.childNodes[i], element);
    }
  }
}

checkNodeTree(document, element);
console.log(wantToCheckNode);
document.body.innerHTML +=
  element + "タグの数は" + wantToCheckNode.length + "個です。";
prompt를 통해 검색할 탭의 이름을 사용자로부터 가져옵니다.
toUpperCase()를 사용하여 태그 이름을 대문자로 설정합니다.
tagName에서 요소의 탭 이름을 조사했을 때 되돌아오는 값이 대문자 상태이기 때문이다.
그리고 이번 콘셉트의 컴백은 여기다.↓
function checkNodeTree(node, element) {
for(var i=0;...){
if(){if(){}
checkNodeTree(node.childNodes[i], element);
}}}
함수 checkNodeTree()에서 고유의 checkNodeTree()를 호출합니다.
내부 함수는 매개 변수에서 i를 사용합니다.
이렇게 하면 값이 미묘하게 변하기 때문에 DOM 트리의 전부를 조사할 수 있다.
기타 요점으로 삼다
for문과 childNodes의 조합을 통해 모든 하위 요소를 조사할 수 있습니다
nodetype으로 요소의 유형을 판별할 수 있습니다.

감상


컴백을 잘 활용하면 편할 것 같아요.
이번에는 자신이 만든 홈페이지 내 라벨을 조사했을 뿐인데 이를 토대로 개량하면 다른 사이트의 분석도 내가 하고 싶은 일을 할 수 있을 것 같다.
어쨌든 컴백, 대단해.
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.

참고 자료


1. Node.nodeType 노드 유형을 나타내는 정수|DOM
참고할게요!감사합니다!
uestc250windy 디지털 dp
2021년 3월 LetCoding 챌린지 10일째: 로마까지 정수

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage