Javascript学习摘抄，DOM文档树结构_const document.quer-CSDN博客

本文链接：https://blog.csdn.net/Paul_77777/article/details/120107696

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="style.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="main.js"></script>
  </body>
</html>

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;
  }

了解全局window

console.log(window); //浏览器的父亲元素
window.alert(1);

如何从DOM中选取元素

Single element selectors 单元素选择器（推荐使用querySelector抓取单元素）

console.log(document.getElementById('my-form'));   //通过getElementById直接打印
console.log(document.querySelector('h1'));     //通过querySelector选中，像选中类和标签，几乎是任何东西。querySelector运行很像JQuery。推荐使用！

如何保存选取元素

const form = document.getElementById('my-form');  //也可以通过赋值将其储存在变量中
console.log(form);       //和直接打印一样的作用

multiple element selectors 多元素选择器（推荐使用querySelectorAll抓取多元素）

console.log(document.querySelectorAll('.item'));        //得到数组一样的nodelist，可以直接对其使用数组一样的方式，egg. forEach，推荐使用！
console.log(document.getElementsByClassName('item'));       //，按照类抓取，得到的Html Collection 不是一个数组，必须手动转化成数组。不推荐使用
console.log(document.getElementsByTagName('li'));       //按照标签抓取，得到的Html Collection 不是一个数组，必须手动转化成数组。不推荐使用

循环遍历

querySelectorAll抓取的可以直接按照数组处理，使用forEach遍历。这里仅仅为演示querySelectorAll的功能。

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

操控和修改DOM

const ul = document.querySelector('.items');
console.log(ul);
// ul.remove();
// ul.lastElementChild.remove();
ul.firstElementChild.textContent = 'Hello';
ul.children[1].innerText = 'Brad';  //索引【1】选中第二个元素，注意索引顺序
ul.lastElementChild.innerHTML  = '<h1>Hello</h1>';  //动态添加html内容使用innerHTML.

const btn = document.querySelector('.btn'); //  通过类btn用querySelector抓取按钮，
btn.style.background = 'red';   //  为什么有CSS还要写，可以写成时间和函数，使其动态处理。例如单机时改变颜色，大小，可以在页面中实时操控大小。

监听器

const btn = document.querySelector('.btn'); //通过类btn用querySelector抓取按钮，

btn.addEventListener('mouseover', (e) => {      //给btn这个元素增加一个click动作 的监听器，内容为箭头函数内的内容。MDN学习。
    e.preventDefault();     //直接打印click会出现闪烁，submit button提交按钮使用click事件，需阻止默认行为。
    // console.log('click');
    // console.log(e.target);  //打印事件作用的元素
    document.querySelector('#my-form').style.background = '#ccc';   //抓取ID改变背景色
    document.querySelector('body').classList.add('bg-dark');    //抓取body增加CSS预先准备好的样式、
    document.querySelector('.items').lastElementChild.innerHTML = '<h1>Hello</h1>';
});

输入值和获取值的小应用

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);    //整个表单增加submit监听，创建onSubmit函数
function onSubmit(e){
    e.preventDefault();     //一旦提交，组织默认行为
    console.log(nameInput.value);       //打印name表格的值
    if(nameInput.value === '' || emailInput.value === ''){
        msg.classList.add('error');     //抓取msg增加CSS预先准备好的样式、
        msg.innerHTML = 'Pls enter all fields';
        setTimeout(() => msg.remove(),3000);    //settimeFunction 三秒后消失
    }else{
        const li = document.createElement('li');    //凭空创造一个新节点li
        li.appendChild(document.createTextNode(`${nameInput.value} : ${emailInput.value}`));    //插入带有输入框文本值的节点

        userList.appendChild(li);   //在用户列表插入节点li

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