Rails에서 HTMLCollection NodeList 사용

이번에는 get Element By ClassName과query Selector All에서 요소를 얻고 이벤트를 등록할 때 걸린 점을 비망록으로 기술합니다.
우선 요소를 취득한 시점부터 오류가 발생했기 때문에 그 원인을 먼저 조사했다.
우선 Rails에서 얻은 요소가 없기 때문에 아래의 코드를 적었습니다.

var menuSeconds = document.getElementsByClassName('menu__second');
var profiles    = document.querySelectorAll('.profile-lists li a');
console.log(menuSeconds);
console.log(profiles);

getelementsByClassName에서는 HTMLCollection, querySelectorAll에서는 NodoLists로 반환됩니다.

참고로 화살표를 누르면 안에 있는 요소를 표시할 수 있지만 HTMLCollection의 내용은 모두 표시되고length도 표시할 수 있습니다.NodeLists에는 컨텐트가 없으며 length도 0으로 표시됩니다.
하지만 HTML Collection을 통해 얻은 요소라도 사용하려면 왠지 모르겠다.
혹시 모르니까, 콘솔.로그로 각자의 length를 꺼내보세요.

console.log(menuSeconds.length);
console.log(profiles.length);

이렇게 되면 두 요소 모두length가 0이라는 것을 알고 아무것도 얻지 못했다.
왜요?요컨대, 이것은 JavaSctipt가 DOM이 렌더링되기 전에 실행되기 때문이다.즉, HTML의 body를 읽기 전에 스크립트를 읽은 것입니다.이전에 Rails에서 js 파일을 읽었습니다.
해결책은
1. HTML의 body 끝에 script 태그로 둘러싸서 쓴다.
2. DOM이 읽힐 때까지 기다리는 기술은 다음과 같습니다.

(function() {
  'use strict';
   document.addEventListener('DOMContentLoaded', function(e) {
     var menuSeconds = document.getElementsByClassName('menu__second');
     var profiles    = document.querySelectorAll('.profile-lists li a');
     console.log(menuSeconds.length);
     console.log(profiles.length);
   });
 })();

이렇게 쓰면.

위처럼 잘 얻어지다.
또한 NodeLists에서 요소를 꺼낼 때 프로필[0]처럼 배열과 같을 수 있지만 HTMLCollection에서 꺼낼 때는menuSeconds를 사용할 수 있다.item[0]과 item[0]를 추가할 필요가 있다.

이벤트 탐지기 등록하기

얻은 요소에 사건 탐지기를 등록할 때의 처리도 비망록을 위한 것이다.
우선 HTMLCollectiond에서는 forEach를 사용할 수 없습니다.그래서 for 문구를 사용하세요.

for (var i = 0; i < menuSeconds.length; i++) {
  menuSeconds.item[i].addEventListener('mouseover', function() {

이렇게 쓰기 시작했어요.하지만
이렇게 하면 폐합이 생성되지 않고 계수기 변수가 유지되지 않기 때문에 어디에서 참조하든length의 값만 계산합니다.
따라서 그 중에서 실시간 함수를 정의하여 해결할 수 있다.

for (var i = 0; i < menuSeconds.length; i++) { function(n) {
  menuSeconds.item[n].addEventListener('mouseover', function() {
  .
  .
  .
  }, false);
 })(i);

이런 활동은 이미 등록되었을 것이다.
NodeLists forEach 사용 가능

profiles.forEach( pf => {
  pf.addEventListener('mouseover', function() {
  .
  .
  .

이렇게 하면 등록할 수 있습니다.
아직 성숙하지 않으니 꼼꼼하지 못한 점이 있으면 꼭 댓글을 달아주세요.