Day 7 - DOM - Window Object

之前介绍的只是 JavaScript 的基本语法，今天要来介绍 DOM(Document Object Model)，它可以操作所有的 HTML tag，让网页可以有互动及功能性，
首先要介绍的是 Window Object，JavaScript 运行的地方就是 window，无论开启的浏览器是 Chrome,Firefox 或 Safari...等，只要开启浏览器的瞬间，window object 就会出现，而 Window Object 包含了 methods 和 properties，如果我们在开启浏览器时 console.log(window) 可以看到一个非常巨大的物件，里面包含非常多的 methods 和 properties。

Window Object methods

常见的 window object methods 有：addEventListener()、alert()、prompt()、blur()、print()、setInterval()、clearInterval()、setTimeout()、clearTimeout()...等，这边先介绍几个较常使用的，而 addEventListener() 在 Event 的主题会详细介绍。
执行 window 的 methods 时，window 皆可省略

• window.alert()
  执行後会跳出一个视窗
• window.prompt()
  执行後会跳出一个对话视窗，可让使用者输入内容

要特别注意的是，在prompt() 中输入的内容，最後都会是 String，所以要如果在 promt() 输入数字，就要使用 Number()，把输入的值由 String 转换为 Number

结合 alert() 和 prompt()，可以制作一个简单的效果，例如：

function myFunction() {
  let person = prompt("请输入你的名字");
  if (person != null) {
    alert("Hello ! " + person );
  }
}
myFunction();

执行这个 function 後，会跳出 prompt 视窗，输入名字後结果如下

按下确定後，就会跳出 Hello ! May 的 alert 视窗

• window.setInterval()
  设定每隔几秒的时间要执行一个 function
  （1000 为 1 秒，1500 为 1.5 秒，2000 为 2 秒...依此类推）

function sayHi(){
    console.log("Hi");
}
setInterval(sayHi,1000)

执行上面的程序码，我们会看到每隔一秒，就执行 sayHi 这个 function 一次

• window.clearInterval()
  用途为把setInterval()停掉
  例如：
  在 html 中新增一个按钮，按下按钮後立即停止 setInterval。

<button onclick="stop()">Stop</button>

function sayHi(){
    console.log("Hi");
}
let myInterval = setInterval(sayHi,1000)
function stop(){
    clearInterval(myInterval);
}

执行上面的程序码後，点击停止按钮即执行 clearInterval，上面设定的每隔 1 秒执行一次的 setInterval function 就会马上停止。

Window Object properties

这里来介绍 2 种 Window Object properties，这 2 种 Window Object properties 都是 Object，有自己的 methods 和 properties，不过要注意的是，不是所有的 Window Object properties 都是 Object!!!!!
常见的 Window Object properties 有 Console、Document、SessionStorage、LocalStorage、innerHeight、innerWidth、screen...等，今天先简单介绍 Console 和 Document 这两个。

Console

console 的 properties 并不常拿来做使用，因此这里只介绍 console 的 methods。

• console.table()
  将资料整理成表格来显示

let people = ["Bob","Josh","Carol","Ann","Kelly"];
console.table(people); // 结果如下图

• console.log()
  检查程序码是否正确被执行时常使用的功能

console.log(123)

• console.error()
  会出现红色错误图案

console.error(123)

• console.warn()
  会出现黄色惊叹号

console.warn(123)

Document

get...By() return 的是 HTMLCollection
querySelectorAll() return 的是 NodeList
Array 和 NodeList 可以使用 forEach，但是 HTMLCollection 无法使用 forEach
所以大多数人使用 querySelector 系列而不使用 get 系列，因为资料无法用 forEach 操作

property:

有 body、doctype、charset、head...等。

methods:

• querySelectorAll()
  里面可以放各种 tag，例如 h1, div, p...等，而选取 class 时要在前面加 .，选取 id 时要在前面加 #。
  所有满足条件的都会 return 回来，存在一个 NodeList 里面，看起来很像 Array 但并不是Array，可以用索引值抓资料，有 length 属性，也可以用forEach，但用其他 Array 的方法就会出错。
  例如：
  有三个 class 都是 test，可以用索引值抓取某一个

    <p class="test">Apple</p>
    <p class="test">Banana</p>
    <p class="test">Watermelon</p>

let test = document.querySelectorAll(".test");
console.log(test[0]); // <p class="test">Apple</p>
console.log(test); // 回传一个 NodeList，结果如下图

• querySelector()
  里面可以放各种 tag，例如 h1, div, p...等，而选取 class 时要在前面加 .，选取 id 时要在前面加 #。
  只会 return 第一个满足条件的，所以如果有很多一样名称的元素，想要抓到全部时，要用上面的方法 querySelectorAll()。
  将上面的程序码改成 querySelector，会发现结果只会回传第一个元素：Apple。

    <p class="test">Apple</p>
    <p class="test">Banana</p>
    <p class="test">Watermelon</p>

let test = document.querySelector(".test"); 
console.log(test); // <p class="test">Apple</p>

• getElementById()
  用 id 取得 Element
• getElementsByClassName()
  用 class 取得 Element
• creatElement()
  用来建立新的元素，通常搭配其他方法做使用，如 appendChild()，下一篇文章会介绍到。