[JavaScript-07]DOM操作

1. 网页源码

<body>
    <header class="text-center">
        <h1>JavaScript_DOM</h1>
    </header>

    <section class="container">
        <div class="form p-4 bg-dark text-light text-center">
            <form id="my-form">
                <h1>Add User</h1>
                <div class="msg"></div>
                <div class="justify-content-center">
                    <lable for="name">Name:</lable>
                    <input type="text" id="name">
                </div>
                <div class="justify-content-center mt-4">
                    <lable for="email">Email:</lable>
                    <input type="text" id="email">
                </div>

                <input type="submit" class="btn mt-4" value="Submit">
            </form>
        </div>

        <ul id="users"></ul>
        <ul class="items text-center">
            <li class="item">Item 1</li>
            <li class="item">Item 2</li>
            <li class="item">Item 3</li>
        </ul>
    </section>

    <script src="test_1.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

</body>

2. 元素选择器

// ELEMENT SELECTORS 元素选择器
// 单元素选择器
console.log("document.getElementById('my-form'):",document.getElementById('my-form'));
console.log("document.querySelector('.container'):",document.querySelector('.container'));
// 多元素选择器
// 标签选择器
console.log("document.getElementsByTagName('li'):",document.getElementsByTagName('li'));
console.log("document.getElementsByClassName('item'):",document.getElementsByClassName('item'));
console.log("document.querySelectorAll('.item'):",document.querySelectorAll('.item'));

const items = document.querySelectorAll('.item');
items.forEach((item) => console.log('items.forEach:',item));

3. 移除、改写元素属性

const ul =document.querySelector('.items');
// remove移除
ul.remove();
// 删除最后一个子标签
ul.lastElementChild.remove();
// 第一个li标签更换文字
ul.firstElementChild.textContent = 'Hello';
// 第二个li标签更换内文本
ul.children[1].innerText = 'Brad';
// 最后一个li标签更换HTML
ul.lastElementChild.innerHTML = '<h1>hello</h1>';
// 按钮更换颜色
const btn = document.querySelector('.btn');
btn.style.background = 'red';

4. 鼠标键盘事件

// 鼠标键盘事件
const ul = document.querySelector('.items');
const btn = document.querySelector('.btn');
// 除了click 还有 mouseover mouseout
btn.addEventListener('mouseover', e=> {
    // 阻止默认行为否则一闪而过
    e.preventDefault();
    // e事件对象 target显示事件作用的元素
    console.log(e.target.className);
    // 改变form颜色
    document.querySelector('#my-form').style.background = '#ccc';
    // 修改内HTML
    ul.lastElementChild.innerHTML ='<h1>Changed</h1>';
});

// 键盘事件
const nameInput = document.querySelector('#name');
nameInput.addEventListener('input',e=>{
    document.querySelector('.container').append(nameInput.value);
})

5. 用户表单验证

// 用户表单验证
const myForm = document.querySelector('#my-form');
const nameInput = document.querySelector('#name');
const emailInput = document.querySelector('#email');
const msg = document.querySelector('.msg');
const userList = document.querySelector('#users')
// 监听表单事件
myForm.addEventListener('submit',onSubmit);

// 获取表单输入信息
// function onSubmit(e)
// {
//     e.preventDefault();
//     if (nameInput.value === '' && emailInput === '')
//     {
//         alert('name or email not null')
//     }else
//     {
//         console.log('nameInput.value:',nameInput.value);
//         console.log('emailInput.value:',emailInput.value);
//     }
// }

// 获取表单输入信息
// function onSubmit(e)
// {
//     e.preventDefault();
//     if (nameInput.value === '' || emailInput === '')
//     {
//         // 添加颜色样式
//         msg.classList.add('bg-warning');
//         msg.innerHTML = 'Please enter all fields';
//         // 3秒后删除信息
//         setTimeout(()=>msg.remove(),3000);
//     }else
//     {
//         console.log('success');
//     }
// }

// 添加li标签
function onSubmit(e)
{
    e.preventDefault();
    if (nameInput.value === '' || emailInput === '')
    {
        // 添加颜色样式
        msg.classList.add('bg-warning');
        msg.innerHTML = 'Please enter all fields';
        // 3秒后删除信息
        setTimeout(()=>msg.remove(),3000);
    }else
    {
        // 创建新用户li标签
        const li = document.createElement('li');
        // 添加具有输入值的文本节点
        // li.appendChild(document.createTextNode(`${nameInput.value}: ${emailInput.value}`));
        li.innerHTML = `${nameInput.value}: ${emailInput.value}`;
        userList.appendChild(li);

        nameInput.value ='';
        emailInput.value='';
    }
}
posted @ 2022-11-10 16:12  LeoShi2020  阅读(27)  评论(0)    收藏  举报