Making changes to the DOM & Creating New DOM Elements & Appending Nodes

改變 DOM 常見 method:

element.textContent
element.innerHTML
element.style.prop

現在 HTML:<h1>JS and the DOM</h1>:

let myHeading = document.querySelector(‘h1’);
console.log(myHeading.textContent); //會讀出 JS and DOM
myHeading.textContent = “yo”; // 用 method 直接改
console.log(myHeading.textContent); //會改成 yo

現在 HTML:

<p class=“description”> Things that are purple </p>

<input type = “text” class = “description”>

<button class=“button”></button>

const input = document.querySelector(‘input’);
const p = document.querySelector(‘p.description’)
// 選擇 class 是 description 的 p tag
//可直接 tag.classname 比如 p.description
const button = document.querySelector(‘button’)
button.addEventListener(‘click’, () =>{
p.textContent = input.value + ‘:’ ; //也可以是 p.innerHTML
})
//當你在 input 打字,p 就會顯示 input 打的字

*innerHTML 不只能顯示字,也可讀到 web page 上的 element

現在 HTML 是

<ul>

<li>ya</li>

<li>hey</li>

<li>yo</li>

</ul>

let ul = document.querySelector(‘ul’);
ul.innerHTML = “<li>red</li>”;
console.log(ul); // 變成只有 <li>red</li>”

element.style.prop

const input = document.querySelector(‘input’);
const p = document.querySelector(‘p.description’) // 選擇 class 是 description 的 p tag
const button = document.querySelector(‘button’)
button.addEventListener(‘click’, () =>{
p.textContent = input.value + ‘:’ ;
})
console.log(input.type); // text
console.log(input.className); // 假設有 class 可以找到
p.title = “List description”; // 滑鼠 hover 到的時候會看到 title
Input.className =“hi”; // 這樣就會新增 class 了

範例:

// Select the <input> element with the ID linkName and store its value in the variable inputValue.
var inputValue;
inputValue = document.getElementById("linkName").value;

// Set the text content of the <a> element with the ID linkName to the value stored in inputValue.
var inputValue;
inputValue = document.getElementById("linkName").value;
let link = document.querySelector('a');
link.textContent = inputValue;

點擊按鈕範例:

const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const input = document.querySelector('input.description’);
const p = document.querySelector('p.description');
const button = document.querySelector('button.description’);
//因為有兩個 button 要明確選擇是哪個 button
//toggleList.addEventListener('click', ()=>{// listDiv.style.display == 'none'; // 點擊按鈕時,文案都不見,但再點一次,文案不會回來」
//});
toggleList.addEventListener('click', ()=>{
if(listDiv.style.display == 'none'){
listDiv.style.display = 'block';  // 如果我點擊的時候文案是不見的,文案要顯示
toggleList.textContent = 'Hide List'; // 隱藏文件
} else{
toggleList.textContent ='show List'; // 顯示文件
listDiv.style.display = 'none'; //如果點擊時文案在,文案就要不見
}
});

button.addEventListener('click', () => {
p.textContent = input.value  + ':';
});

Creating New DOM Elements and Appending Nodes

addItemButton.addEventListener(‘click’,() => {
let ul = document.getElementByTagName(‘ul’)[0];
//先去找第一個 ul
let li = document.createElement(‘li’); //還沒有顯示在畫面上
li.textContent = addItemInput.value;
ul.appendChild(li);
addItemInput.value = ‘’ ;
});
//每點擊時就會生成一個 li tag 並且產生 input 輸入的文字

Node.removeChilde(childeElement) //刪掉小孩

removeItemButton.addEventListener(‘click’, () =>{
let ul = document.getElementByTagName(‘ul’)[0];
let li = document.querySelector(‘li:last-child’); // 最後一個 item
ul.removeChild(li);
});

範例:

//select the <ul> element and store it in the variable myList.
var myList;
myList = document.getElementsByTagName(‘ul’)[0];
//也可以這樣寫 myList = document.querySelector(‘ul’);
//select the <li> with the ID first and store it in the variable firstListItem.
var myList = document.querySelector(‘ul’);
var firstListItem = document.getElementById (‘first’);

//remove child
var myList;
var firstListItem;
myList = document.querySelector(‘ul’);
firstListItem= document.getElementById (‘first’);
myList.removeChild(firstListItem);