無限スクロール

1.スクロールイベント(+制限)

2. intersectionObserver

交差観測プログラムの使用

const options = {
  root: null, //default값
  rootMargin: '0px 0px 0px 0px', //default값
  threshold: 0 //default값
}

// IntersectionObserver 생성
const io = new IntersectionObserver((entries, observer) => {
  // IntersectionObserverEntry 객체 리스트와 observer 본인(self)를 받음
  // 동작을 원하는 것 작성
  entries.forEach(entry => {
    // entry와 observer 출력
    console.log('entry:', entry);
    console.log('observer:', observer);
  })
}, options)

intersectionObserver options

交差点観察プログラムの方法

intersectionObserver Properties

整理する

classプロパティ

1. classList

2. className

<div class='a'>a</div>
<span class='b c'>bc</span>
<script>
console.log(document.querySelector('div').classList)	//DOMTokenList ['a', value: 'a']
console.log(document.querySelector('div').classList.value)	//a
console.log(document.querySelector('div').className)		//a


console.log(document.querySelector('span').classList)		//DOMTokenList(2) ['b', 'c', value: 'b c']
console.log(document.querySelector('span').classList[0])	//b 
console.log(document.querySelector('span').classList[1])	//c
console.log(document.querySelector('span').classList[2])	//undefined 
console.log(document.querySelector('span').classList.value)	//b c
console.log(document.querySelector('span').className)	//b c
</script>

なぜモジュール化するのですか?