5.22-MVC and DOM Basic
- What is MVC(Model-View-Controller)?
Explained by ordering a drink from a bartender.
* Model: Structures your data in a reliable form and prepares it based on controller's instructions (Like .json file or simple array)
* View: Website UI, displays data to user
* Controller: Takes in user commands, sends commands to the model for data updates (Business Logic)
User - you, the customer
User request - your order
Controller - bartender's brain
Model - limited toolset behind the bar
View - finished drink
Manhattan:
to you: a sweet and delicious drink.
To the bartender: is not a tasty drink, it is merely a series of steps. Grab glass -> Add whiskey -> Add vermouth -> Add bitters -> Stir drink -> Add cherry -> Ask for credit and charge.
Introduction to DOM - MDN
The Document Object Model(DOM) is a programming interface for HTML and XML document.
Interface is the way that your software object interacts with the outside world, like the different ports on the computer, and the keyboard for human interaction.
A web page is a document.
var paragraphs = document.getElementsByTagName("P");
// paragraphs[0] is the first <p> element
alert(paragraphs[0].nodeName);
All of the properties, methods, and events available for manipulating and creating web pages are organized into objects(e.g., the document object that represents the document itself, the table object that implements the special HTMLTableElement DOM interface.
- DOM and Javascript
The short example above, it is writtern in JavaScript, but it uses the DOM to access the document and its elements.
**The DOM is not a programming language, but without it, the JavaScript language wouldn't have any model or notion of web pages, HTML documents.
API(HTML or XML page) = DOM + JS(scripting language)
The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API.
# Python DOM example
import xml.dom.minidom as m
doc = m.parse("C: \\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object
p_list = doc.getElementByTagName("para");
* How Do I Access the DOM ?
**You don't have to do anything special to begin using the DOM.** Different browsers have different implementations of the DOM, and these implementations exhibit varying degrees of conformance to the actual DOM standard.
`<body onload="window.alert('Welcome to my home page!');`
This code will display an alert when the document is loaded
* Important Data Types
* document: this object is the root document object
* element:
* nodeList: array of elements, like the kind that is returned by the method `document.getElementByTagName()`
* attribute
* namedNodeMap
DOM interfaces
[LinkedIn Tech Talk - DOM Scripting](https://www.youtube.com/watch?v=1lhxzOr4CVw)
* What is the difference between DOM Nodes and Elements ?
* A DOM node is anything in the DOM node tree. It could be an element, an element attribute, text, a HTML comment, even whitespace.
* An element is an object representing a type of HTML element
* Node Information
* Element.nodeName - return element's name in uppercasee
* Element.nodeType - returns an integer indicating the node type
