Created
July 11, 2017 15:14
-
-
Save HassanAlgoz/a1a246bf2c17594eab8c10e3e833feb8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
console.log('script-DOM.js') // DOM: Document Object Model | |
// Selection by Id | |
let title = document.getElementById("main-title") | |
title.innerHTML += " Hello World"; // Modifying Text | |
// Also Selection by Id, using CSS selectors | |
let subtitle = document.querySelector('#subtitle') | |
// The querySelector(string) is powerful in that you can | |
// Something like this | |
let myButton = document.querySelector(".outerclass .innerclass button"); | |
myButton.innerHTML = "BUTTON" | |
myButton.id = "mega-button" | |
let todoList = document.querySelector('#todo-list') | |
todoList.className = "big-list" | |
// Chaning ids and classes | |
subtitle.setAttribute('id', 'main-title') // can use subtitle.id = "main-title" | |
subtitle.setAttribute('class', 'ocean') // can use subtitle.className = "ocean" | |
// siblings and parent | |
let groceryItemsArray = document.querySelector("#grocery-list").children | |
let groceryItem = groceryItemsArray[0] | |
console.log('parentNode', groceryItem.parentNode) | |
console.log('nextElementSibling', groceryItem.nextElementSibling) | |
console.log('previousElementSibling', groceryItem.previousElementSibling) | |
// Select All elements of the same class | |
let todos = document.querySelectorAll('.todo-item') | |
for(let i = 0; i < todos.length; i++) { | |
console.log('TODO: ' + todos[i].innerHTML) | |
} | |
// Creating elements | |
let catImage = document.createElement('img') // not yet visible in the DOM | |
// catImage.src = "URL" | |
catImage.height = 300 | |
catImage.width = 300 | |
let catBox = document.querySelector('#cat-box') | |
catBox.appendChild(catImage) // now visible | |
// Remove Elements | |
document.querySelector('#some-element').remove() | |
// Styling DOM elements | |
// because Math.random() returns a number [0 ~ 1] | |
// We want a number between 0 and 255 | |
function random(val) { | |
return Math.round(Math.random() * (val + 1)) | |
} | |
document.body.style.background = `rgb(${random(255)},${random(255)},${random(255)})` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment