javascript JavaScript和DOM

Posted 2021-05-04

/*Basic DOM editing*/
//Get an element
const ELEM = document.querySelector(".main-title");
//Set the inner HTML
ELEM.innerHTML = "This is the new title";
//Set the outer HTML (including element tags etc)
ELEM.outerHTML - '<h1 class="main-title">This is the new title</h1>';

------------

/*ADDING NEW DOM ELEMENTS
1. Create the element
2. Create the text node that goes inside the element
3. Add the text node to the element
4. Add the element to the DOM element

There are 3 methods to do this process
.createElement(); 
.createTextNode();
.appendChild(); //place one child node inside another
*/

/* Example
 <figure class="featured-image">
   <img src="images/bluepebble.jpg" alt="Earthrise: a photo of ....">
 </figure>

We want to place the text of the alt attribute into a new figcaption tag. So, we want to 1. create a new figcaption element, 2. populate it with the text from the alt attr 3. insert the new figcaption element and then 4. remove the alt attr so we don't repeat info.
*/

const FEATURED = document.querySelector('featured-image');
const THEIMAGE = FEATURED.querySelector('img'); //take first const and use it to shorten 2nd const

var altText = THEIMAGE.getAttribute('alt'); //put the alt text in a var to use later
var captionElement = document.createElement('figcaption'); //step 1
var captionText = document.createTextNode(altText); //step 2
captionElement.appendChild(captionText);
//check make sure it is working so far
//console.log(captionElement); //should see: <figcaption> "text from alt text" </figcaption>
FEATURED.appendChild(captionElement); //step 3
THEIMAGE.setAttribute('alt', ''); //step 4 set alt to blank since it is now just repeated info






/* Get the FIRST element matching specified selectors(s):*/
document.querySelector("main-nav a");

/* Get ALL elements matching specified selectors(s):*/
document.querySelectorAll(".post-content p");

/*examples:*/
document.querySelector(".main-title").innerHTML;
//"Welcome to Moonwalk Manor"

document.querySelector(".main-title").outerHTML;
//<h2 class="main-title">Welcome to Moonwalk Manor</h2>"

document.querySelector(".main-title").innerHTML = "All your headings are belong to us";
//"All your headings are belong to us"

document.querySelector(".masthead");
//<header class="masthead clear">...</header>

document.querySelector(".masthead").className;
//"masthead clear"

document.querySelector(".masthead").classList;
//["masthead", "clear"]

document.querySelector(".masthead").classList[1];
//"clear"
//classList is also a PROPERTY (not method) of the DOM, and it READ-ONLY. If you want to change the content you will need to use a METHOD. innerHTML is not read-only obviously since we use this to rewrite content. You can find these on the ELEMENT page of teh MDN

document.querySelector(".masthead").classList.add("new-class");
//undefined (which is fine)
document.querySelector(".masthead").classList;
//["masthead", "clear", "new-class"]

//Other methods availble to .classList are:
document.querySelector(".masthead").classList.remove("clear");
//Toggles on/off classes. In this case we toggle the class masthead
document.querySelector(".new-class").classList.toggle("masthead");
//check if a class exists
document.querySelector(".new-class").classList.contains("masthead");
//false
document.querySelector(".new-class").classList.toggle("masthead");
//toggle .masthead back on
document.querySelector(".new-class").classList.contains("masthead");
//true

/*ELEMENT ATTRIBUTES*/
element.attributes //read-only but has methods available
/*methods*/
element.hasAttribute() //checks if attribute is present
element.getAttribute() //retrieves attribute
element.setAttribute() //sets/changes attribute
element.removeAttribute() //removes attribute

/*examples*/
/*Let's make sure link opens in a new window, so make sure <a href="#" target="_blank">link</a>*/
/*the html*/
<div class="cta">
  <a href="#..">Book Now!</a>

/*the JS*/  
const CTAELEMENT = document.querySelector(".cta a");
//console.log(CTAELEMENT.attributes); //look at currently applied attributes..gives an array showing just 'href' as the only currently applied attribute of the <a> tag.

//So now set up a conditional statement to test whether we have the target attribute, and if not, we'll apply it to the element and set it to '_blank'. 
if (CTAELEMENT.hasAttribute("target")){
  console.log(CTAELELMENT.getAttribute("target"));
} else {
  CTAELEMENT.setAttribute("target", "_blank");
}