200816 DOM

project 1;

material: Udemy

 

1. DOM(Document Object Model)

;interface between js and html css

 browser turns every HTML tag into a JS object that we manipulate. It is controled under tree data structure. top node of DOM is documnt.

 in the console of browser, you can search like document.URL or document.link, It will return current page's URL and appended link (or document.body)

 

2. Selector Methods in DOM

-document.getElementById()

 ;retunrs the one element with a matching ID // because Id is only element in code

-document.getElementByIClassName()

 ;returns a list of elements that have a matching calss

-document.getElementByITagName()

 ;returns a list of all elements of a given tag name

-querySelector

 ;returns the first elemnet that matches a given CSS-style selector 

-querySelectorAll

 ;reuturns a list of elements that matches a given CSS-style selector

 

. means class

# means Id

(NULL) means tag

 

 We should consider each domain has meaning. so you shouldn't cross over other domain

like control element's style property in JS code. rather just give them class that gives

element some style property

qwer.classList.add("qwer")

qwer.classList.remove("qwer")

qwer.classList.toggle("1234")

 

===================================

Link

make sound with anykey in keyboard with JS

https://patatap.com

 

===================================

Q

what is difference between id and class

;

ID occure just one time