forked from technolyceum/g11-m2
added dom
This commit is contained in:
BIN
FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/.DS_Store
vendored
Normal file
BIN
FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/03-manipulating_the_dom/.DS_Store
vendored
Normal file
BIN
FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/03-manipulating_the_dom/.DS_Store
vendored
Normal file
Binary file not shown.
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||
|
||||
<style type="text/css">
|
||||
/* It's usually bad practice to include css like this but for demos it's ok. */
|
||||
.container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Nav</a>
|
||||
</div>
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">One</a></li>
|
||||
<li><a href="#">Two</a></li>
|
||||
<li><a href="#">Three</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<article id="home-page">
|
||||
<section class="jumbotron">
|
||||
<h1>The DOM</h1>
|
||||
<p>The good, the bad and the ugly.</p>
|
||||
</section>
|
||||
<section class='content'>
|
||||
<p class="lead">Manipulating the DOM with Javascript.</p>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
console.log('Hello World');
|
||||
@@ -0,0 +1,106 @@
|
||||
/****************************************
|
||||
* This is the set of JavaScript statements that we execute inside of the
|
||||
* console against the `index.html` file.
|
||||
****************************************/
|
||||
|
||||
/*
|
||||
* Selecting elements.
|
||||
*/
|
||||
|
||||
// Returns a single element. This is because we can't every have more than
|
||||
// one element with the same id. Note that we don't include a '#' for the id
|
||||
var article = document.getElementById('home-page');
|
||||
|
||||
// Returns a list of elements. This is because we can have a number
|
||||
// of <section> elements on the page
|
||||
var sections = article.getElementsByTagName('section');
|
||||
|
||||
// Also returns a list of elements that match the class name. This is because
|
||||
// unlike the ids, we can have numerous instances of elements with the same
|
||||
// class names. Note that we don't include a '.' for the class
|
||||
var leads = document.getElementsByClassName('lead');
|
||||
|
||||
// Let's look at the text content of the .lead element
|
||||
var lead = leads[0];
|
||||
lead.textContent;
|
||||
|
||||
// Very flexible way of finding elements in the DOM. Returns first element found
|
||||
var article = document.querySelector('#home-page');
|
||||
var section = document.querySelector('section');
|
||||
var lead = document.querySelector('.lead');
|
||||
|
||||
// Can get all matched results. This returns a list
|
||||
var sections = document.querySelectorAll('section');
|
||||
|
||||
// Let's look at an individual node and see it's children and it's parent
|
||||
var article = document.getElementById('home-page');
|
||||
|
||||
article.children;
|
||||
article.parentElement;
|
||||
article.nextElementSibling
|
||||
article.firstElementChild;
|
||||
article.lastElementChild;
|
||||
|
||||
let section = article.firstElementChild;
|
||||
|
||||
/*
|
||||
* Creating new elements
|
||||
*/
|
||||
|
||||
// Create a new li to go in the nav
|
||||
var li = document.createElement('li');
|
||||
|
||||
// Give it a class name
|
||||
li.classList.add('last');
|
||||
|
||||
|
||||
// Change its CSS
|
||||
li.style.backgroundColor = 'pink';
|
||||
|
||||
// Create an anchor link to go in the new li
|
||||
var a = document.createElement('a');
|
||||
|
||||
// Give is some text
|
||||
a.textContent = "Four";
|
||||
|
||||
a.style.color = 'white';
|
||||
|
||||
// Insert the anchor link into the li
|
||||
li.appendChild(a);
|
||||
|
||||
|
||||
/*
|
||||
* Modifying the DOM
|
||||
*/
|
||||
|
||||
// Find the ul element
|
||||
var uls = document.getElementsByTagName('ul');
|
||||
|
||||
var ul = uls[0];
|
||||
|
||||
// Insert the new li element into our ul
|
||||
ul.appendChild(li);
|
||||
|
||||
// Let's try move it up to the top of the list
|
||||
var firstLi = ul.getElementsByTagName('li');
|
||||
ul.insertBefore(li, firstLi);
|
||||
|
||||
firstLi.classList.remove('active');
|
||||
// Starting to get messy
|
||||
|
||||
/*
|
||||
* Updating a list of elements
|
||||
* - this is where it gets painful
|
||||
*/
|
||||
var lis = ul[0].getElementByTagName('li');
|
||||
var ul = document.getElementsByTagName('ul');
|
||||
var li;
|
||||
for (var i = 0; i < lis.length; i++) {
|
||||
lis[i].style.backgroundColor = 'pink';
|
||||
}
|
||||
|
||||
// Wouldn't it be great if we could do something like ...
|
||||
|
||||
ul.find('li').removeClass('active').addClass('inactive').css('background-color', 'pink');
|
||||
|
||||
// without having to write big for loops
|
||||
Reference in New Issue
Block a user