search

zzly00 / mentor-program-2nd-blog

2 stars 0 forks source link

[筆記] DOM #10

Open zzly00 opened 6 years ago

zzly00 commented 6 years ago

DOM

Document Object Model

innerText、innerHTML、outerHTML

<div id="test"><p>text</p></div>

innerText : text
innerHTML : <p>text</p>
outerHTML : <div id="test"><p>text</p></div>

JS引入位置

參考資料：[MTR01] 程式導師實驗計畫第一期 Lesson 4-1 之 JavaScript、前端-JS和CSS的引入/写入位置应该放在哪里？

zzly00 commented 6 years ago

DOM操作

document.querySelector()

<!-- querySelector('.test1 > p') -->
<div class="test1">
    <p>123</p>
    <p>456</p>
</div>
var test1 = document.querySelector('.test1 > p');
test1.style.color = 'red';

document.querySelectorAll()

<!-- querySelectorAll('.test3 > p') -->
<div class="test2">
    <p>123</p>
    <p>456</p>
</div>
var test2 = document.querySelectorAll('.test2 > p');
test2[1].style.color = 'red';

document.getElementsByClassName()

<!-- getElementsByClassName('test') -->
<div class="test">123</div>
<div class="test">123</div>
<div class="test">123</div>
var tests = document.getElementsByClassName('test');
tests[1].style.color = 'red';

document.createElement()、document.appendChild()、document.classList.add()

<!-- document.createElement('span') -->
<div class="test3">
    <p>123</p>
    <p>456</p>
</div>
var test3 = document.querySelector('.test3 > p');
var span  = document.createElement('span');
span.innerText = 'hello';
test3.appendChild(span);

span.classList.add('yellow');

document.toggle()

<!-- .toggle('yellow') -->
<input type="button" id="btn" value="click me" />
document.querySelector('#btn').addEventListener('click', function(){
    document.querySelector('.test3 span').classList.toggle('yellow');
})
zzly00 commented 6 years ago

超簡單計數器

<!-- 計數器 -->
<h1 class="count">1</h1>
<input type="button" id="minus" value="-1" />
<input type="button" id="plus" value="+1" />

方法一

document.querySelector('#minus').addEventListener('click', function(){
    var count = document.querySelector('.count').innerText;
    document.querySelector('.count').innerText = parseInt(count, 10) - 1;
})

document.querySelector('#plus').addEventListener('click', function(){
    document.querySelector('.count').innerText = parseInt(document.querySelector('.count').innerText, 10) + 1;
})

方法二

var count = 1;
document.querySelector('#minus').addEventListener('click', function(){
    count --;
    document.querySelector('.count').innerText = count;
})

document.querySelector('#plus').addEventListener('click', function(){
    count ++;
    document.querySelector('.count').innerText = count;
})

方法三

var count = 1;
document.querySelector('#minus').addEventListener('click', function(){
    changeCountText(--count);
})

document.querySelector('#plus').addEventListener('click', function(){
    changeCountText(++count);
})

// 變換顏色
function changeCountText(number){
    var countElement = document.querySelector('.count');
    countElement.innerText = number;
    if(number < 0){
        countElement.style.color = 'red';
        }else{
        countElement.style.color = 'black';
    }
}
zzly00 commented 6 years ago

超簡單TODO List

<!-- todo list -->
<ul class="list">
    <li>買早餐</li>
    <li>買菜</li>
</ul>
<input type="text" class="text" placeholder="請輸入 todo" />
<input type="button" id="add" value="add" />

方法一

document.querySelector('#add').addEventListener('click', function(){
    var text = document.querySelector('.text');
    console.log(text.value)
    document.querySelector('.list').innerHTML += '<li>' + text.value + '</li>';
    text.value = '';
})

方法二

document.querySelector('#add').addEventListener('click', function(){
    var text = document.querySelector('.text');
    var item = document.createElement('li');
    item.innerText = text.value;
    document.querySelector('.list').appendChild(item);
    text.value = '';
})

方法三

document.querySelector('#add').addEventListener('click', function(){
    var text = document.querySelector('.text');
    var item = document.createElement('li');
    item.innerHTML = `
    <div>
        ${text.value}
        <span class='close data-text=${text.value}'>x</span>
    </div>
    `;
    document.querySelector('.list').appendChild(item);
    text.value = '';
})

// 刪除功能
document.querySelector('.list').addEventListener('click', e => {
    for(var i=0; i<e.target.classList.length; i++){
        if(e.target.classList[i] === 'close'){
            // 方法一
            e.target.parentNode.parentNode.outerHTML = '';
            // 方法二
            document.querySelector('.list').removeChild(e.target.parentNode.parentNode)
        }
    }
})
zzly00 commented 6 years ago

超簡單表單驗證

方法一

<!-- 表單驗證 -->
<form onsubmit="return test()">   
    name: <input type="text" class="name" />
    <input type="submit" />
</form>
function test(){
    var value = document.querySelector('.name').value
    if(value === 'name'){
        return false;
    }else{
        return true;
    }
}

方法二

<!-- 表單驗證 -->
<form>
    name: <input type="text" class="name" />
    <input type="submit" />
</form>
document.querySelector('form').addEventListener('submit', e => {
    var value = document.querySelector('.name').value
    console.log(e)
    if(value === 'name'){
        e.preventDefault();
    }
    return true;

})