Dom Manipulation with 3 examples

Image of the project about Dom Manipulation

Links

<section class="query-selector-all">
<section class="queries">
<article class="first_element">
<h2 class="first__title">Query Selector All - Select all elements</h2>
<p>I am a paragraph and I am selected also</p>
</article>
<article class="second_element">
<h2>Query Selector All - Select all elements</h2>
<p>I am a paragraph and I am selected also</p>
</article>
</section>
document.getElementsByClassName();
// If instead of an id your element has a class, this is the method where you can access it.
document.getElementsByTagName();
//You don't even need to add a class name or id, you can access the element straight from the tag
document.querySelector();
document.querySelectorAll();
//The most used to access the DOM, because with it you can access class, id and tag. So each case would be:document.querySelector('#id');
document.querySelector('.classname');
document.querySelector('section');
const allElements = document.querySelectorAll('.query-selector-all');
console.log(allElements)
allElements.forEach(eachElement => {
console.log(eachElement)
});
.selector__all {
color: #edbd54;
transition: all 2s;
}
allElements.forEach(eachElement => {
eachElement.classList.add('selector__all');
});
<section class="query-selector">
<article class="image"> <img class="first__image" src="https://picsum.photos/420" alt="random image from picsum "></article>
<article class="black__board">
<div class="second__code">
<h2>How to select one element?</h2>
<button class="code__show__second">Show me the code</button>
</div>
</article>
</section>
const firstImage = document.querySelector('.first__image');
firstImage.addEventListener('click', () => {
console.log("hello")
});
.round {
border-radius: 50%;
transform: rotate(360deg);
transition: all 10s;
}
firstImage.addEventListener('click', () => {
firstImage.classList.toggle('round');
});
<section class="recipes-manager">      <article class="recipes-manager_docs">
<div class="recipe-background">
<section class="first">
<label for="name">Recipe Name</label>
<input class="name" type="text" id="name" >
<label for="cuisine">Type of cuisine</label>
<input class="cuisine" type="text" id="cuisine">
</section>
<section class="second">
<label for="number">How many people</label>
<input class="number" type="number" id="number">
</section>
<section class="buttons">
<input class="image" type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;">
<label class="upload" for="file" tabindex="0" style="cursor: pointer;">Upload Image</label>
<button class="button-recipe">Show recipe</button>
</section>
</div>


</article>

<article class="recipe-menu">
<div class="recipe" id="output">
</div>
</article>
</section>
const recipe = document.querySelector('.recipe');
const buttonRecipe = document.querySelector('.button-recipe');
const recipeName = document.querySelector('.name');
const recipeType = document.querySelector('.cuisine');
const numberPeople = document.querySelector('.number');
const myHTML = ` I am a templare literal`
recipe.innerHTML = myHTML
const myHTML = ` 
<h1>This is a heading</h1>
<p class="style-me">This is a paragraph</p>
`
const recipeNames = recipeName.value;
const typeOfRecipe = recipeType.value;
const numberPeoplePerRecipe = numberPeople.value;
const image = document.querySelector('#output');
//image we get to the function loadFile and then we add it to the output that is going to where we are going to add the recipe
const myHTML = `
<section class="recipe-card">
<div class="card">
<p class="recipe-name">${recipeNames}</p>
<p class="recipe-type">${typeOfRecipe}</p>
<p class="recipe-number"> Serves ${numberPeoplePerRecipe}</p>
</div>
<div class="recipe-image">
<img src="${image.src}" alt="ola" class="recipe-image"/>
</div>
</section>
`
recipe.innerHTML = myHTML
function insertRecipe() {
const recipeNames = recipeName.value;
const typeOfRecipe = recipeType.value;
const numberPeoplePerRecipe = numberPeople.value;
const image = document.querySelector('#output');
const myHTML = `
<section class="recipe-card">
<div class="card">
<p class="recipe-name">${recipeNames}</p>
<p class="recipe-type">${typeOfRecipe}</p>
<p class="recipe-number"> Serves ${numberPeoplePerRecipe}</p>
</div>
<div class="recipe-image">
<img src="${image.src}" alt="ola" class="recipe-image"/>
</div>

</section>
`;
recipe.innerHTML = myHTML; return myHTML;
}
buttonRecipe.addEventListener('click', insertRecipe);
section class="queries">
<article class="first_element">
<h2 class="first__title">Query Selector All - Select all elements</h2>
<p>I am a paragraph and I am selected also</p>
</article>
<article class="second_element">
<h2>Query Selector All - Select all elements</h2>
<p>I am a paragraph and I am selected also</p>
</article>
</section>
const content = document.querySelector('.queries');
console.log(content.textContent);
console.log(content.innerHTML);
console.log(content.outerHTML);
<section class="query-selector-all">
<section class="queries">
<article class="first_element">
<h2 class="first__title">Query Selector All - Select all elements</h2>
<p>I am a paragraph and I am selected also</p>
</article>
<article class="second_element">
<h2>Query Selector All - Select all elements</h2>
<p>I am a paragraph and I am selected also</p>
</article>
</section>
<article class="black__board">
<div class="first__code">
<h2>How to select all elements?</h2>
<button class="code__show__first">Show me the code</button>
</div>
</article>
const blackBoard = document.querySelector('.first__code');
console.group(
blackBoard.parentElement,
blackBoard.children,
blackBoard.childElementCount
);

Creating Good Stuff🖥️🍃 Coding ⌨️ Food 🥘Entrepreneurship 📚 Restaurant Manager in the day, coding during the dawn https://twitter.com/mugas11

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store