JS & DOM

Global scope(在 JS 被 load 進來以前): 會使用到 window object
Global variables are actually properties of a single global object:在 browser 上我們會叫 window。

console.log(location.href); //會出現現有的網址
console.log (window) ; //會有很多 properties:control browser gives you with JS

Main global variable : document object
*Document object can use it control elements of the currently loaded web page
*The document object, like all other global variables, is a property of window object
*A global object representing the HTML and content of a web page
*You can use the document object to select and control elements of the currently loaded webpage

What is DOM(Document Object Model)

The DOM is a representation of a webpage that JavaScript can use

DOM represents a web page as a tree-like structure

DOM 在做的事:可以想像他在一個地圖上規劃街道,然後最後把地圖上的街道都畫出來

一個 HTML 網頁的結構: root node of the tree 就會是 document element 或是 node(body 跟 head 也會是 siblings)

JS 會用 DOM 來改變網頁的樣式

1.select an element

2.Read or change element

3.Respond to user events (比如 click 或是 key press)

Q:Interactivity with JavaScript involves which three basic actions?
A:Selecting elements, manipulating elements, listening for user actions

Getting a Handle on the DOM

範例一:document.getElementById(‘ ‘)

//Selecting elements, manipulating elements, listening for user actions
const myHeading = document.getElementById(‘myHeading’); //先去選 DOM 裡的一個 tag id
myHeading.addEventListener(‘click’, ( ) = >{ //當 DOM 裡的這個 id 被點擊時
myHeading.style.color = ‘red’; // 這的 id 的 style 會變化
});
Select All Elements of a Particular Type
Const el = document.getElementById(‘a’); // => < ul id = “a”>
const els =document.getElementsByTagName(‘p’); // =>[<p>,<p>,<p>]
//可以這樣使用
let el = els[0]; //first p element on the page
// loop 的方式
for(let i = 0; i < els.length; i += 1){
els[i] // do something with each element
}

範例二:document.getElementsByTagName(‘ ‘ )[ ]

const myHeading = document.getElementsByTagName(‘h1’)[0]; //h1 的第一個 tag
const myButton = document.getElementById(‘myButton’);
const myTextInput = document.getElementById(‘myTextInput’);
myButton.addEventListener(‘click’, ( ) => {
myHeading.style.color = myTextInput.value;
});

範例三:document.getElementsByClassName(‘ ’)
Selecting Elements with the Same Class Name

const myList = document.getElementsByTagName(‘li’);
for(let i = 0; i < myList.length; i += 1){
myList[I].style.color = ‘purple’; //所有 li 的顏色都變色
}
const myList = document.getElementsByTagName(‘li’);
for(let i = 0; i < myList.length; i += 1){
myList[I].style.color = ‘purple’; //所有 li 的顏色都變色
}
document.getElementsByClassName(‘error-not-purple’);
for(let i =0; i < errorNotPurple.length; i += 1){
errorNotPurple[I].style.color = ‘red’; //所有有這個 class 的都會變色
}

Q:What data type does document.getElementsByClassName return?

A:HTML Collection

Q:What object does the getElementsByClassName method exist on?

A:Document

Q:How would you select the `body` element using document.getElementsByTagName, and store it in the variable body?

A:const body = document.getElementsByTagName(‘body’)[0];(const body = document.body;)

Q:How can you apply changes to all the elements in an HTML collection?

A:By iterating over them with a for loop

Using CSS Queries to Select Page Elements

document.querySelector()
document.querySelectorAll()

document.querySelectorAll(‘li’) //會選到所有的 li tag
document.querySelector(‘li’) // 選到第一個 li tag
document.querySelector(‘#myHeading’) //選到那個 id
document.querySelector(‘.myHeading’) // 選到第一個有這個 class 的 tag
document.querySelectorAll(‘.myHeading’) // 選到所有有這個 class 的 tag

範例ㄧ:document.querySelectorAll()

const evens = document.querySelectorAll(‘li:nth-child(even)’); 
//選擇 li 所有偶數的 tag 也可換奇數的 odd 
//:nth-child() 好用的偽類選擇器
for(let i = 0; i < evens.length; i += 1){
evens[i].style.backgroundColor = ‘lightgray’;
}

範例二:document.querySelectorAll()

讓 ul id 是 rainbow 裡面 li 變色

var listItems;
var colors = [“#C2272D”, “#F8931F”, “#FFFF01”, “#009245”, “#0193D9”, “#0C04ED”, “#612F90”];
listItems = document.querySelectorAll(‘#rainbow li’);
for(var i = 0; i < colors.length; i ++) {
listItems[i].style.color = colors[i];
}

https://caniuse.com/ 可以看 method 或是 css 有沒有在瀏覽器支援

How would you select the first element in the DOM with its HTML title attribute set to “MyTitle”?

document.querySelector(‘[title = MyTitle]’);

範例三:選擇一個 nav 裡頭所有的 link

let navigationLinks;
let galleryLinks;
let footerImages;
navigationLinks = document.querySelectorAll(“nav > ul > li > a”);