DevLeague Coding Bootcamp
DevLeague is a Full Stack Coding Bootcamp
DOMMMM
or
The
Document Object Model
<!DOCTYPE html> <!-- OHH HTML5 I say -->
<html>
<head>
<meta charset="UTF-8">
<title>Super Awesome Web App</title>
</head>
<body>
<div class="container">
<header>
<h1>Welcoming Header Section</h1>
</header>
<div class="content">
<span>Reasons the internet is awesome</span>
<ul>
<li>
<a href="http://reddit.com">Reddit</a>
</li>
<li>
<a href="http://imgur.com">Kittens</a>
</li>
<li>
<a href="http://cornhub.com">Corn Hub</a>
</li>
</ul>
</div>
<div class="slideshow">
<div class="image">
<img src="https://bossip.files.wordpress.com/2014/12/1015-oprah-daily-show-rally_standard_600x400.jpg" />
</div>
<div class="image">
<img src="https://bossip.files.wordpress.com/2014/12/1015-oprah-daily-show-rally_standard_600x400.jpg" />
</div>
<div class="image">
<img src="https://bossip.files.wordpress.com/2014/12/1015-oprah-daily-show-rally_standard_600x400.jpg" />
</div>
<div class="image">
<img src="https://bossip.files.wordpress.com/2014/12/1015-oprah-daily-show-rally_standard_600x400.jpg" />
</div>
</div>
<div class="contact">
<form action="/contact">
<div>
<span>First Name</span>
<span>
<input type="text" name="first_name">
</span>
</div>
<div>
<span>Last Name</span>
<span>
<input type="text" name="last_name">
</span>
</div>
<div>
<span>Email</span>
<span>
<input type="text" name="email">
</span>
</div>
<div>
<span>Message</span>
<span>
<textarea name="message" id="message" cols="60" rows="40"></textarea>
</span>
</div>
</form>
</div>
<footer>
© Copyright Evil Corp.
</footer>
</div>
</body>
</html>
<!DOCTYPE html> <!-- OHH HTML5 I say -->
<html>
<head>
<meta charset="UTF-8">
<title>Super Awesome Web App</title>
</head>
<body>
<div class="container">
<header>
<h1>Welcoming Header Section</h1>
</header>
<div class="content">
<span>Reasons the internet is awesome</span>
<ul>
<li>
<a href="http://reddit.com">Reddit</a>
</li>
<li>
<a href="http://imgur.com">Kittens</a>
</li>
<li>
<a href="http://cornhub.com">Corn Hub</a>
</li>
</ul>
</div>
<div class="slideshow">
<div class="image">
<img src="https://bossip.files.wordpress.com/2014/12/1015-oprah-daily-show-rally_standard_600x400.jpg" />
</div>
<div class="image">
<img src="https://bossip.files.wordpress.com/2014/12/1015-oprah-daily-show-rally_standard_600x400.jpg" />
</div>
<div class="image">
<img src="https://bossip.files.wordpress.com/2014/12/1015-oprah-daily-show-rally_standard_600x400.jpg" />
</div>
<div class="image">
<img src="https://bossip.files.wordpress.com/2014/12/1015-oprah-daily-show-rally_standard_600x400.jpg" />
</div>
</div>
<div class="contact">
<form action="/contact">
<div>
<span>First Name</span>
<span>
<input type="text" name="first_name">
</span>
</div>
<div>
<span>Last Name</span>
<span>
<input type="text" name="last_name">
</span>
</div>
<div>
<span>Email</span>
<span>
<input type="text" name="email">
</span>
</div>
<div>
<span>Message</span>
<span>
<textarea name="message" id="message" cols="60" rows="40"></textarea>
</span>
</div>
</form>
</div>
<footer>
© Copyright Evil Corp.
</footer>
</div>
</body>
</html>
Console View - Elements
The console is the closest human view of the DOM we have.
Console View
The console is a great way to explore the DOM and all of the interfaces it supports.
...as web developers we are primarily concerned with the document or window properties of the DOM.
This allows us to interact with our HTML document in the browser to do many things:
Anything we can write in HTML/CSS, we can do with the DOM
The document represents our HTML elements and the styles and attributes that apply to those elements. We can manipulate all aspects of the document to be completely different than when it was rendered.
The window represents the current browser window as a whole including current URL, history, screen dimensions, etc...
vs.
HTML and the DOM are ancestral in nature in that all elements have a relation to one another.
Siblings
Parents/Children
Decendants/Ancestors
<div class="brother"></div>
<div class="sister"></div>
<div class="parent">
<div class="child_1"></div>
<div class="child_2"></div>
</div>
<div class="grand_parent ancestor">
<div class="child_1">
<div class="grand_child descendant">
</div>
</div>
</div>
Element Methods/Properties
Document Methods
*query methods require CSS Selectors which we have not covered yet
By DevLeague Coding Bootcamp