forked from iamshaunjp/JavaScript-DOM-Tutorial
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp.js
More file actions
63 lines (46 loc) · 2.19 KB
/
app.js
File metadata and controls
63 lines (46 loc) · 2.19 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// var titles = document.getElementsByClassName('title');
// Turns HTMLcollection (titles) into an array
// Array.from(titles)
const wmf = document.querySelector('#book-list li:nth-child(2) .name')
var books = document.querySelectorAll('#book-list li .name')
Array.from(books).forEach(function(books){
console.log(books.textContent += ' (Book Title)')
})
// const bookList = document.querySelector('#book-list');
// bookList.innerHTML = '<h2>Books and more books<h2>'
// bookList.innerHTML += '<p>This is how you add HTML</p>'
// Nodes
const banner = document.querySelector('#page-banner');
console.log('#page-banner node type is:', banner.nodeType)
console.log('#page-banner node type is:', banner.nodeName)
console.log('#page-banner has child nodes:', banner.hasChildNodes())
const clonedBanner = banner.cloneNode(true)
console.log(clonedBanner)
// Transversing the DOM
const booksList = document.querySelector('#book-list')
// transversing up the DOM by getting the parent of a node/element
console.log('the parent node is', booksList.parentNode)
console.log('the parent element is', booksList.parentElement.parentElement)
// transversing down the DOM by getting the children of a node/element
console.log(booksList.childNodes)
const booksList2 = document.querySelector('#book-list')
console.log('book list next sibiling is:', booksList2.nextSibling)
console.log('book list next element sibiling is:', booksList2.nextElementSibling)
console.log('book list previous sibiling is:', booksList2.previousSibling)
console.log('book list previous element sibiling is:', booksList2.previousElementSibling)
booksList2.previousElementSibling.querySelector('p').innerHTML += '<br>to cool for everyone else</br>'
// Event listener
var h2 = document.querySelector('#book-list h2')
h2.addEventListener('click', function(e){
console.log(e.target)
console.log(e)
})
// adding eventListener to each individual item using a forEach
var exe = document.querySelectorAll('#book-list .delete')
Array.from(exe).forEach(function(exe){
exe.addEventListener('click', function(e){
// removing list item when exe event 'click' is ran
const li = e.target.parentElement;
li.parentNode.removeChild(li)
})
})