Public speaking course notes Read "Dynamo, Amazon’s Highly Available Key-value Store" Read "Bigtable, A Distributed Storage System for Structured Data" Read "Streaming Systems" 3, Watermarks Read "Streaming Systems" 1&2, Streaming 101 Read "F1, a distributed SQL database that scales" Read "Zanzibar, Google’s Consistent, Global Authorization System" Read "Spanner, Google's Globally-Distributed Database" Read "Designing Data-intensive applications" 12, The Future of Data Systems IOS development with Swift Read "Designing Data-intensive applications" 10&11, Batch and Stream Processing Read "Designing Data-intensive applications" 9, Consistency and Consensus Read "Designing Data-intensive applications" 8, Distributed System Troubles Read "Designing Data-intensive applications" 7, Transactions Read "Designing Data-intensive applications" 6, Partitioning Read "Designing Data-intensive applications" 5, Replication Read "Designing Data-intensive applications" 3&4, Storage, Retrieval, Encoding Read "Designing Data-intensive applications" 1&2, Foundation of Data Systems Three cases of binary search TAMU Operating System 2 Memory Management TAMU Operating System 1 Introduction Overview in cloud computing 2 TAMU Operating System 7 Virtualization TAMU Operating System 6 File System TAMU Operating System 5 I/O and Disk Management TAMU Operating System 4 Synchronization TAMU Operating System 3 Concurrency and Threading TAMU Computer Networks 5 Data Link Layer TAMU Computer Networks 4 Network Layer TAMU Computer Networks 3 Transport Layer TAMU Computer Networks 2 Application Layer TAMU Computer Networks 1 Introduction Overview in distributed systems and cloud computing 1 A well-optimized Union-Find implementation, in Java A heap implementation supporting deletion TAMU Advanced Algorithms 3, Maximum Bandwidth Path (Dijkstra, MST, Linear) TAMU Advanced Algorithms 2, B+ tree and Segment Intersection TAMU Advanced Algorithms 1, BST, 2-3 Tree and Heap TAMU AI, Searching problems Factorization Machine and Field-aware Factorization Machine for CTR prediction TAMU Neural Network 10 Information-Theoretic Models TAMU Neural Network 9 Principal Component Analysis TAMU Neural Network 8 Neurodynamics TAMU Neural Network 7 Self-Organizing Maps TAMU Neural Network 6 Deep Learning Overview TAMU Neural Network 5 Radial-Basis Function Networks TAMU Neural Network 4 Multi-Layer Perceptrons TAMU Neural Network 3 Single-Layer Perceptrons Princeton Algorithms P1W6 Hash Tables & Symbol Table Applications Stanford ML 11 Application Example Photo OCR Stanford ML 10 Large Scale Machine Learning Stanford ML 9 Anomaly Detection and Recommender Systems Stanford ML 8 Clustering & Principal Component Analysis Princeton Algorithms P1W5 Balanced Search Trees TAMU Neural Network 2 Learning Processes TAMU Neural Network 1 Introduction Stanford ML 7 Support Vector Machine Stanford ML 6 Evaluate Algorithms Princeton Algorithms P1W4 Priority Queues and Symbol Tables Stanford ML 5 Neural Networks Learning Princeton Algorithms P1W3 Mergesort and Quicksort Stanford ML 4 Neural Networks Basics Princeton Algorithms P1W2 Stack and Queue, Basic Sorts Stanford ML 3 Classification Problems Stanford ML 2 Multivariate Regression and Normal Equation Princeton Algorithms P1W1 Union and Find Stanford ML 1 Introduction and Parameter Learning

Document Object Model DOM

2017-12-30

Intro

DOM is the interface between Javascript and HTML+CSS. The browser turns every HTML tag into a Javascript object that we can manipulate. Everything is stored inside the document object.

Select and manipulate

var h1 = document.querySelector("h1");
h1.style.color = "pink";

Select

  • document.getElementById()
  • document.getElementsByClassName()
  • document.getElementsByTagName()
  • document.querySelector()
    • returns the first element that matches a given CSS-style selector
    • document.querySelector("#highlight")
  • document.querySelectorAll()
    • return all matching elements

Manipulate

  • changing an element’s style
  • adding/removing classes
  • changing the content of a tag
  • changing attributes(src, href, etc.)

Style

var tag = document.getElementById(highlight);

// manipulate
tag.style.color = "blue";
tag.style.border = "10px solid red";

It’s recommended for styles to be defined in a separated file or files. So just use js to turn on or off, switch between styles.

.some-class {
    color: blue;
    border: 10px solid red;
}
var tag = document.getElementById(highlight);
// add the css class
tag.classList.add("some-class");

//remove
tag.classList.remove("another-class");

//toggle
    // if the tag has the class name, remove it
    // else, turn it on
tag.classList.toggle("another-class");

Text and content

  • textContent will return a string of all the text contained in a given element.
  • innerHTML is similar, but it returns a string of all HTML contained in a given element.
<p> This is a <strong>good</strong> para</p>
var tag = document.querySelector("p");

// Retrieve the text
tag.textContent; // This is a good para
tag.innerHTML; // This is a <strong>good</strong> para

// alter
tag.textContent = "new";
tag.innerHTML = "<strong>goodbye</strong>";

Attributes

Use getAttribute() and setAttribute() to read and write attributes like src or href.

<a href="www.google.com">link</a>
<img src="logo.png">
var link = document.querySelector("a");
link.getAttribute("href");
link.setAttribute("href", "http://www.facebook.com");

Events

  • Click on a button
  • Hovering over a link
  • Dragging and dropping
  • Pressing the enter key

Process is that we select an element and then add an event listener. Multiple listeners can be added.

List of events ref: https://developer.mozilla.org/en-US/docs/Web/Events

element.addEventListener(type, functionToCall);

// example
var button = document.querySelector("button");
button.addEventListener("click", function() {
    console.log("CLICKED");
});

Example events

  • mouseover: the moment that mouse starts being on the element
  • mouseout: the moment that mouse leaves the element
  • input: the value of input tag changes

Creative Commons License
Melon blog is created by melonskin. This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
© 2016-2024. All rights reserved by melonskin. Powered by Jekyll.