【Udemy - JavaScript】JavaScript in the Browser：DOM and Events Fundamentals

 1、DOM（文档对象模型，Document Object Model）

（1）DOM和JavaScript

 DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。

将HTML或XML文档转化为DOM树的过程称为解析(parse)。（文档对象模型_百度百科）

（2）DOM操作：

        document.querySelector('.className').method;

        document.querySelector('.className').style.attribution;

        （类是.className，id是#id）

2、Handling Click Event - 项目1：猜数字网页

        Math.random() → 生成0-1之间的随机数

        Math.trunc() → 将参数隐式转换成数字类型后，纯粹的去除小数部分

document.querySelector('.check').addEventListener('click', function () {
  const guess = Number(document.querySelector('.guess').value);
  if (!guess) {
    document.querySelector('.message').textContent = 'Not a number!🙅‍♂️';
  } else if (guess > secretNumber) {
    if (score > 0) {
      document.querySelector('.message').textContent = 'too high!';
      score--;
      document.querySelector('.score').textContent = score;
    } else {
      document.querySelector('.message').textContent = 'L O S T !';
    }
  } else if (guess < secretNumber) {
    if (score > 0) {
      document.querySelector('.message').textContent = 'too low!';
      score--;
      document.querySelector('.score').textContent = score;
    } else {
      document.querySelector('.message').textContent = 'L O S T !';
    }
  } else if (guess === secretNumber) {
    document.querySelector('.message').textContent = '🎉Guess Right!🎉';
    //修改css
    document.querySelector('body').style.backgroundColor = 'green';
    document.querySelector('.number').style.width = '30rem';
  }
});

3、Modal Window - 项目2：窗口弹出

（1）通过hidden类隐藏对象：HTML - hidden class，CSS - 设置display为none

（2）document.querySelectorAll可以选择多个同名类对象

（3）.classList可以对对象的类进行操作，如增加、删除

const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');

const openModal = function () {
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden');
};

const closeModal = function () {
  modal.classList.add('hidden');
  overlay.classList.add('hidden');
};

（4）键盘事件：keydown、keypress、keyup

document.addEventListener('keydown', function (e) {
  // console.log(e.key);

  if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
    closeModal();
  }
});

5、Pig Game - 项目：掷骰子游戏

（1）选择对象：document.getElementById('id');

（2）.toggle('class')：如果有就删除，没有就添加