Javascript入门速成课5 DOM基础和小程序实例

注：用到querySelector时，类名前加点，id前加井号

0.新建文件

在同一个文件夹下建立多个9个空文件：四个html，四个js，一个css
（个人比较喜欢新建txt然后改后缀）
style01.css （样式）
dom01.html （script内使用main01.js练习选择器）
dom02.html （script内使用main02.js练习动态处理）
dom03.html （script内使用main03.js练习事件）
domAPP.html （script内使用mainAPP.js小程序实例）
main01.js （练习选择器）
main02.js （练习动态处理）
main03.js （练习事件）
mainAPP.js （小程序实例）

将一下代码粘贴进style01.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
  }
  
  ul {
    list-style: none;
  }
  
  ul li {
    padding: 5px;
    background: #f4f4f4;
    margin: 5px 0;
  }
  
  header {
    background: #f4f4f4;
    padding: 1rem;
    text-align: center;
  }
  
  .container {
    margin: auto;
    width: 500px;
    overflow: auto;
    padding: 3rem 2rem;
  }
  
  #my-form {
    padding: 2rem;
    background: #f4f4f4;
  }
  
  #my-form label {
    display: block;
  }
  
  #my-form input[type='text'] {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
  }
  
  .btn {
    display: block;
    width: 100%;
    padding: 10px 15px;
    border: 0;
    background: #333;
    color: #fff;
    border-radius: 5px;
    margin: 5px 0;
  }
  
  .btn:hover {
    background: #444;
  }
  
  .bg-dark {
    background: #333;
    color: #fff;
  }
  
  .error {
    background: orangered;
    color: #fff;
    padding: 5px;
    margin: 5px;
  }

此css文件定义了各种样式。

将下列代码粘贴进dom01.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>JS For Beginners</title>
    <link rel="stylesheet" href="style01.css">
  </head>
  <body>
    <header>
      <h1>JS For Beginners</h1>
    </header>

    <section class="container">
      <form id="my-form">
        <h1>Add User</h1>
        <div class="msg"></div>
        <div>
          <label for="name">Name:</label>
          <input type="text" id="name">
        </div>
        <div>
          <label for="email">Email:</label>
          <input type="text" id="email">
        </div>
        <input class="btn" type="submit" value="Submit">
      </form>

      <ul id="users"></ul>

      <ul class="items">
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
        <li class="item">Item 3</li>
      </ul>
    </section>
    

    <script src="main01.js"></script>
  </body>
</html>

此html文件定义了网页的基本结构
把这段html粘贴进dom02.html并且将script标签中的src改为main02.js
dom03.html同理
这两个html都对应各自的js，所以需要更改如下：

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

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

domAPP.html同理，除了把src改为mainAPP.js外还要将items的ul注释掉，如下：

<!-- <ul class="items">
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
        <li class="item">Item 3</li>
      </ul> -->

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

接下来分别写几个js文件

1.练习选择器

dom文档对象模型(document object model)

console.log(window);
window.alert(1);

和直接alert(1)效果相同，所以不用写window.
一切皆是window对象（anything is in window）

调试器也可以看到其他对象：
例如localStorage 浏览器中存储的一种方式
例如fetch API 发起http请求的方法(HTTP requests)
例如document DOM 可以看到各种属性
window对象是浏览器的父对象(parent object)

1.1 single element selector 单元素选择器:

通过查询id：

const form1 = document.getElementById('my-form');
console.log(form1);

查询选择器(query selector)：
querySelector类似jQuery

console.log(document.querySelector('.container'));
console.log(document.querySelector('h1'));

若有多个h1,则只选择第一个

1.2 multiple element selector 多元素选择器:

console.log(document.querySelectorAll('.item'));

调试器输出：
NodeList(3) [li.item, li.item, li.item]
0: li.item
1: li.item
2: li.item
length: 3
[[Prototype]]: NodeList

console.log(document.querySelectorAll('.item'));

main01.js完成代码如下：

//dom文档对象模型(document object model)
//selection选择 select things from the Dom
console.log(window);
window.alert(1);//和直接alert(1)效果相同，所以不用写window. 
//一切皆是window对象（anything is in window）
//调试器也可以看到其他对象：
//例如localStorage 浏览器中存储的一种方式
//例如fetch API 发起http请求的方法(HTTP requests)
//例如document DOM 可以看到各种属性

//window对象是浏览器的父对象(parent object)
//single element selector 单元素选择器:

const form1 = document.getElementById('my-form');
//通过id获取
console.log(form1);

//查询选择器(query selector)
//querySelector类似jQuery
console.log(document.querySelector('.container'));
console.log(document.querySelector('h1'));
//若有多个h1,则只选择第一个

//multiple element selector 多元素选择器:
console.log(document.querySelectorAll('.item'));
/**
 * 调试器输出：
 NodeList(3) [li.item, li.item, li.item]
0: li.item
1: li.item
2: li.item
length: 3
[[Prototype]]: NodeList
 */
console.log(document.querySelectorAll('.item'));

2.练习动态处理

获取items里的li标签

const ul = document.querySelector('.items');

若在之后执行ul.remove();
remove之后，三个item都不见了

若执行ul.lastElementChild.remove();
则删除最后一项

ul.firstElementChild.textContent = 'Hello';
//将第一项改为Hello
ul.children[1].innerText = 'Brad';
//将第二项改为Brad

ul.lastElementChild.innerHTML = '<h1>HAHAHAHA</h1>';

innerHTML可以动态添加html

动态处理：下面来改变一些样式

const btn = document.querySelector('.btn');
btn.style.background = 'red';

例如：在点击按钮之后按钮变色或变大小时可以用到这种动态处理

main02.js完整代码如下：

//获取items里的li标签
const ul = document.querySelector('.items');

//ul.remove();
//remove之后，三个item都不见了

//ul.lastElementChild.remove();
//删除最后一项

ul.firstElementChild.textContent = 'Hello';
//将第一项改为Hello

ul.children[1].innerText = 'Brad';
//将第二项改为Brad

ul.lastElementChild.innerHTML = '<h1>HAHAHAHA</h1>';
//innerHTML可以动态添加html

//动态处理：下面来改变一些样式
const btn = document.querySelector('.btn');
btn.style.background = 'red';
//例如：在点击按钮之后按钮变色或变大小时可以用到这种动态处理

3.练习事件

const btn = document.querySelector('.btn');

先创建事件监听 create an event listener 使用 addEventListener
第一个参数为事件，第二个参数为函数
这里事件为click，使用箭头函数实现输出
想要的效果是点击按钮后在调试器输出一些信息

btn.addEventListener('click',(e) => {
    e.preventDefault();

不加这一句的话会有click闪现，因为点击submit按钮时，实际上是提交文件，当对submit按钮使用click事件或提交表单时，必须要阻止默认行为，
调用preventDefault

    console.log('click');

依次查看event object
target会给出事件作用的元素

    console.log(e);
    console.log(e.target);
    //<input ....>
    console.log(e.target.className);
    //btn

    document.querySelector('#my-form').style.background = '#ccc';

这里my-form是id所以用#，如果是class用.
点击submit后背景变成深灰色

    document.querySelector('.items').lastElementChild.innerHTML = '<h1>HELLO<h1>';
//点击后最后一个item变成HELLO
})

main03.js完整代码如下：

const btn = document.querySelector('.btn');

//创建事件监听 create an event listener 使用 addEventListener
//例如：第一个参数为事件，第二个参数为函数
//这里事件为click，使用箭头函数实现输出
//点击按钮后在调试器输出信息
btn.addEventListener('click',(e) => {
    e.preventDefault();
    /**
     * 不加这一句的话会有click闪现
     * 因为点击submit按钮时
     * 实际上是提交文件
     * 当对submit按钮使用click事件或提交表单时
     * 必须要阻止默认行为，调用preventDefault
     */
    console.log('click');

    //查看event object
    console.log(e);
    //target会给出事件作用的元素
    console.log(e.target);
    //<input ....>
    console.log(e.target.className);
    //btn

    document.querySelector('#my-form').style.background = '#ccc';
    //这里my-form是id所以用#，如果是class用.
    //点击submit后背景变成深灰色

    document.querySelector('.items').lastElementChild.innerHTML = '<h1>HELLO<h1>';
    //点击后最后一个item变成HELLO
})

4.小程序应用实例

一个小程序，输入名字和邮箱并显示
如果有一个空则提示错误，如果都输入，在下面输出名字:邮箱

注意:用到querySelector时，类名前加点，id前加井号

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');

users和msg是空的，要添加
users是预留的用户信息，msg是预留的提示信息

myForm.addEventListener('submit', onSubmit);

onSubmit是自定义函数如下：

function onSubmit(e) {
    e.preventDefault();

    //console.log(nameInput);
    console.log(nameInput.value);

    if(nameInput.value === '' || emailInput.value === ''){
        //alert('请输入完整信息')

//若执行这一行，则以警告窗口的形式提示
让提示在输入框上部标出，html中已经预留了空的.msg

        msg.classList.add('error');
        //设置提示的样式为在css文件中定义好的error
        msg.innerHTML = '请输入完整信息';
        console.log('请输入完整信息');

为了更合理，令提示显示2.5秒

        setTimeout(() => msg.remove(), 2500);

必须将name和email都输入才能成功运行：

    }else{
        //alert('成功输入');
        //console.log('成功输入');
        const li = document.createElement('li');
        //创建元素插入dom
        li.appendChild(document.createTextNode(`${nameInput.value} 的邮箱是 ${emailInput.value}`));
        userList.appendChild(li);
        //向空users加入

最后为了持续加入用户和邮箱的信息，需要每次输入成功后清空输入框

        nameInput.value = '';
        emailInput.value = '';
    }
}

完整的style01.css在开头
完整的domAPP.html和mainAPP.js如下：
完整的domAPP.html文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>JS For Beginners</title>
    <link rel="stylesheet" href="style01.css">
  </head>
  <body>
    <header>
      <h1>JS For Beginners</h1>
    </header>

    <section class="container">
      <form id="my-form">
        <h1>Add User</h1>
        <div class="msg"></div>
        <div>
          <label for="name">Name:</label>
          <input type="text" id="name">
        </div>
        <div>
          <label for="email">Email:</label>
          <input type="text" id="email">
        </div>
        <input class="btn" type="submit" value="Submit">
      </form>

      <ul id="users"></ul>

      <!-- <ul class="items">
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
        <li class="item">Item 3</li>
      </ul> -->
    </section>
    

    <script src="mainAPP.js"></script>
  </body>
</html>

完整的mainAPP.js文件：

//一个小程序，输入名字和邮箱并显示
//如果有一个空则提示错误，如果都输入，在下面输出名字:邮箱

//注意:用到querySelector时，类名前加点，id前加井号
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');
//#users和.msg是空的，要添加

myForm.addEventListener('submit', onSubmit);

function onSubmit(e) {
    e.preventDefault();

    //console.log(nameInput);
    console.log(nameInput.value);

    if(nameInput.value === '' || emailInput.value === ''){
        //alert('请输入完整信息')
        //以警告窗口的形式提示

        //让提示在输入框上部标出，html中已经预留了空的.msg
        msg.classList.add('error');
        //设置提示的样式为在css文件中定义好的error
        msg.innerHTML = '请输入完整信息';
        console.log('请输入完整信息');
        //令提示显示2.5秒
        setTimeout(() => msg.remove(), 2500);

    }else{
        //alert('成功输入');
        //console.log('成功输入');
        const li = document.createElement('li');
        //创建元素插入dom
        li.appendChild(document.createTextNode(`${nameInput.value} 的邮箱是 ${emailInput.value}`));
        userList.appendChild(li);
        //向空users加入

        //清空输入框
        nameInput.value = '';
        emailInput.value = '';
    }
}