WebAPI—DOM （HTTL、CSS、Java Script应用及案例）_综合

WebAPI—DOM （HTTL、CSS、Java Script应用）

1. DOM 基本概念

DOM 全称为 Document Object Model

一个页面的结构是一个树形结构，称为 DOM 树

2. 选择元素 `querySelector`

querySelector

querySelector 选择器选中的元素如果有多个，只能获取到其中的第一个

let div = document.querySelector('div');
// 使用 log 打印一个元素对象 (element), 此时看到的是 html 片段
console.log(div);
// 使用 dir 打印一个元素对象，此时就能看到里面的具体属性
console.dir(div);

querySelectorAll

可以选中多个元素返回一个“伪数组”

3. 事件 `.onclick`

用户的一些操作，就会触发事件。根据用户的操作，做出不同的响应

    <!-- 点击事件 --><input type="button" value="按钮" onclick="test()"><script>// 法一function test() {
      console.log("用户点击了按钮");}</script>

    <input type="button" value="按钮"><script>// 法二let button = document.querySelector('input');button.onclick = function () {
      console.log("用户点击了按钮");}</script>

其他标签也可以实现相同效果

    <style>div {
      width: 100px;height: 50px;text-align: center;line-height: 50px;background-color: gray;color: white;}div:active {
      background-color: orange;}</style><div>按钮</div><script>let button = document.querySelector('div');button.onclick = function () {
      console.log("用户点击了按钮");}</script>

4. 元素操作`innerHTML`

操作一个HTML对应的对象

获取/修改 元素里面的内容

innerText 只能获取/修改元素里面的文本

innerHTML 可以获取/修改文本，也可以获取修改里面的嵌套的标签

let button = document.querySelector('div');
console.log(button.innerHTML);
button.innerHTML = '<span>按钮</span>';

?案例 - 显示/隐藏密码

    <input type="password" id="input"><input type="button" id="button" value="显示密码"><script>let input = document.querySelector('#input');let button = document.querySelector('#button');button.onclick = function() {
      if (input.type == 'text') {
      input.type = 'password';button.value = '隐藏密码';} else if (input.type == 'password') {
      input.type = 'text';button.value = '隐藏密码';}}</script>

?案例 - 自增

    <input type="text" id="number" value="0"><input type="button" value="自增" id="button"><script>let button = document.querySelector('#button');button.onclick = function() {
      let number = document.querySelector('#number');let value = parseInt(number.value);value += 1;number.value = value;}</script>

?案例-字体变化

    <div style="font-size: 20px;">这是一行字</div><script>// 先获取到 div 对象, 关联点击事件, let div = document.querySelector('div');div.onclick = function () {
      let fontSize = parseInt(div.style.fontSize);fontSize += 5;div.style.fontSize = fontSize + 'px';}</script>

?案例-夜间模式切换

    <!-- 切换夜间模式 --><style>.light {
      background-color: white;color: black;}.night {
      background-color: #666;color: #eee;}</style><div class="light">这是一大堆话<br>这是一大堆话<br></div><script>let div = document.querySelector('div');div.onclick = function() {
      if (div.className == 'light') {
      div.className = 'night';} else if (div.className == 'night') {
      div.className = 'light';}}</script>

5. 节点操作

新增节点 `createElement`

        let div = document.createElement('div');div.innerHTML = '这是一个div';div.style.fontSize = '30px';

插入节点 `appendChild`

不能重复插入，如果将同一个元素插入两次，则最终效果为最后一次插入的位置

appendChild 插入该类中最后位置

    <div class="container"></div><script>let div = document.createElement('div');div.innerHTML = '这是一个div';div.style.fontSize = '30px';let container = document.querySelector('.container');container.appendChild(div);</script>

insertBefore(要插入的元素, 插入的位置); 插入任意位置

    <div class="container"><div class="one">第一个元素</div><div class="two">第二个元素</div></div><script>let div = document.createElement('div');div.innerHTML = '这是一个div';div.style.fontSize = '30px';let container = document.querySelector('.container');// let two = document.querySelector('.two');let two = container.children[1];container.insertBefore(div, two);</script>

删除节点 `removeChild`

		container.removeChild(div);

?案例-猜数字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>猜数字游戏</title>
</head>
<body><input type="button" value="重新开始一局游戏" id="reset"><div><span>请输入要猜的数组：</span><input type="text" id="num"><input type="button" value="猜" id="guess"></div><div><span>已经猜的次数：</span><span id="count">0</span></div><div><span>猜的结果：</span><span id="result"></span></div><script>// 先把需要用到的 JS 对象准备好let resultButton = document.querySelector('#reset');let numInput = document.querySelector('#num');let guessButton = document.querySelector('#guess');let countSpan = document.querySelector('#count');let resultSpan = document.querySelector('#result');// 生成一个 1-100 之间的随机的整数let toGuess = Math.floor(Math.random()*100) + 1;let count = 0;console.log("toGuess: " + toGuess);guessButton.onclick = function() {
      // 用户点击 猜 这个按钮，首先先更新点击次数的显示count++;countSpan.innerHTML = count;// 读取到输入框的内容，进行判定let num = parseInt(numInput.value);console.log("num: " + num);if (num < toGuess) {
      resultSpan.innerHTML = '猜低了';resultSpan.style.color = 'red';} else if (num > toGuess) {
      resultSpan.innerHTML = '猜高了';resultSpan.style.color = 'orange';} else {
      resultSpan.innerHTML = '猜对了';resultSpan.style.color = 'green';}}resultButton.onclick = function() {
      // 把 toGuess 和 count 清空，同时重新生成一个随机的整数toGuess = Math.floor(Math.random()*100) + 1;count = 0;resultSpan.innerHTML = '';countSpan.innerHTML = '';numInput.value = '';}</script>
</body>
</html>

?案例-表白墙/留言板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墙</title>
</head>
<body><style>* {
      box-sizing: border-box;margin: 0;padding: 0;}.container {
      width: 600px;margin: 0 auto;}h1 {
      text-align: center;padding: 20px 0;}p {
      font-size: 12px;color: #666;padding: 10px 0;text-align: center;}.row {
      display: flex;height: 40px;align-items: center;justify-content: center;}.row span {
      width: 100px;}.row .edit {
      width: 200px;height: 36px;}.row .submit {
      width: 300px;height: 40px;color: #fff;background-color: orange;/* 去掉边框 */border: none;}.row .submit:active {
      background-color: green;}</style><div class="container"><h1>表白墙</h1><p>输入后点击提交，将会把消息显示在墙上</p><div class="row"><span>谁：</span><input type="text" class="edit"></div><div class="row"><span>对谁：</span><input type="text" class="edit"></div><div class="row"><span>说什么：</span><input type="text" class="edit"></div><div class="row"><input type="button" value="提交" class="submit"></div></div><script>let submitButton = document.querySelector('.submit');submitButton.onclick = function() {
      // 1. 获取到输入框里面的内容let edits = document.querySelectorAll('.edit');let from = edits[0].value;let to = edits[1].value;let message = edits[2].value;console.log(from + ", " + to + ", " + message);if (from == '' || to == '' || message == '') {
      return;}// 2. 根据输入框的内容，构造 HTML 元素，添加到页面中// 接下来的每个消息，都使用 div.row 来去表示let row = document.createElement('div');row.className = 'row';row.innerHTML = from + '对' + to + '说：' + message;let container = document.querySelector('.container');container.appendChild(row);// 3. 把上次输入的内容清空for (i = 0; i < 3; i++) {
      edits[i].value = '';}}</script>
</body>
</html>

WebAPI—DOM （HTTL、CSS、Java Script应用及案例）