<> The DOM
Presented by
Copyright By PowCoder代写 加微信 powcoder
What is the DOM?
Data types of DOM Elements Reading the DOM in JS
Modifying the DOM in JS
Reading and modifying live example Scrolling live example
Markup language creating web documents
Style sheet language for applying styles to a document
JavaScript
Scripting language to make your web page dynamic
What is the DOM?
The DOM (Document Object Model) is an interface that allows JavaScript to interact with HTML through the browser.
JavaScript
The DOM interface allows JavaScript to access and update the content, structure, and style of a document
Tree-like structure of the DOM
The DOM is a tree!
“The DOM is a”
text: “The DOM”
text: “tree!”
DOM Elements and Data Types
DOM Data Types
To understand how the DOM is represented, we will introduce some new data types
The type of the document object. Represents the root of the entire DOM.
A node in the DOM tree. Objects of this type implement an interface that allows interacting with the document.
An array of elements, like the kind that is returned by the method.
Understanding DOM Elements
Element is the base class for all types of objects in the Document Different HTML tags/elements correspond to different Element types in JS Different Element types include:
HTMLInputElement, HTMLSpanElement, HTMLDivElement,
HTMLScriptElement, HTMLHeadingElement,HTMLImageElement….
the Element interface give us?
Ways of reading things
e.g. Get the size, position, color or text of an element
Ways of writing things
e.g. Set an attribute, change the styling of an element
.offsetTop
.clientWidth
HTMLSpanElement
HTMLElement
HTMLDivElement
HTMLImageElement
HTMLInputElement
.focus() .alt .select() .src
Reading the DOM
;)yreuq(roteleSyreuq.tnemucod
rotceles eht sehctam taht tnemelE tsrif eht snruteR //
;)emanssalc(emaNssalCyBstnemelEteg.tnemucod
;)eman(emaNgaTyBstnemelEteg.tnemucod
sehctam lla fo noitcelloCLMTH MOD a snruteR //
;)di(dIyBtnemelEteg.tnemucod
di nevig eht htiw tnemele lmth na snruteR //
Reading the DOM example
Writing to the DOM
;)”” ,”delbasid”(etubirttAtes.nottub
setubirtta ot segnahc gnikaM //
;)edoNtxet(dlihCevomer.tnemele
;)edoNtxet(dlihCdneppa.tnemele
stnemele gnivomer dna gniddA //
;)”txet emoS”(edoNtxeTetaerc.tnemucod = edoNtxet tel
edon txet wen a etaerC //
;)”vid”(tnemelEetaerc.tnemucod = tnemele tel
tnemele vid wen a etaerC //
Changing the style of an element
An element has a “style” property which corresponds to the “style” attribute of the HTML element.
This can be modified in the JavaScript.
esaClemac :etoN // ;”der” = roloCdnuorgkcab.elyts.tnemele
;tfeLwen = tfel.elyts.tnemele
;”xp” + 5 + )01 ,tfel.elyts.tnemele(tnIesrap = tfeLwen tel
eulav tfel eht ot xp5 gniddA //
!stinu tegrof t’nod :etoN // ;”xp05″ = tfel.elyts.tnemele
elyts.tnemele gnignahC //
Getting the style of an element
Note: element.style.left will only be present on an element if the left property was set in inline styles, or by scripting (not if it was set in CSS).
-dnuorgkcab”(eulaVytreporPteg.elytSdetupmoc = roloCgb tel
)llun ,tnemele(elytSdetupmoCteg.wodniw = elytSdetupmoc tel
elyts detupmoc gnitteG //
Changing the classes of an element
Another way of modifying the style of the element is to change the classnames which exist on the element. This can be done using the “classList” property.
tnemele no stsixe ssalc
fi eurt snruter // ;)”ssalc”(sniatnoc.tsiLssalc.tnemele
;)”ssalc”(elggot.tsiLssalc.tnemele
;)”ssalc”(evomer.tsiLssalc.tnemele
;)”ssalc”(dda.tsiLssalc.tnemele
tsiLssalc.tnemele gnignahC //
Writing to the DOM example
,”htooms” :roivaheb
{(oTllorcs.wodniw
:egap eht no noitisop a ot llorcS //
;)Yllorcs.wodniw(gol.elosnoc
;)Xllorcs.wodniw(gol.elosnoc
egap eht fo noitisop llorcs tnerruc eht teG //
Scrolling to an element example
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com