zoukankan      html  css  js  c++  java
  • 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
    
    ![Core Interfaces in the DOM](https://images2018.cnblogs.com/blog/1066857/201805/1066857-20180524105452527-1234298233.png)
    
    [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
  • 相关阅读:
    软件设计项目进展01 2019/8/19
    mysql中使用utf-8乱码
    mysql学习
    eclipse中怎么查看jsp生成的java代码
    tomcat配置出现问题
    关掉win10下面的ctrl+alt+up/dowm
    java程序运行时内存分析
    java内部类
    Struts2 ERROR StatusLogger No log4j2 configuration file found. Using default configuration: logging
    win10下 Edge和IE浏览器都不能上网,而其他浏览器可以。怎么办?
  • 原文地址:https://www.cnblogs.com/kong-xy/p/9075036.html
Copyright © 2011-2022 走看看