内容操作 描述
    innerText 从开始位置到结束位置
    去除标签、空格、换行
    innerHTML 从开始位置到结束位置
    包括标签、空格、换行    		 
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>元素操作</title>
    8.     <style>
    9.       div {
    10.         font-size: 24px;
    11.         line-height: 30px;
    12.         text-align: center;
    13.         color: black;
    14.         background-color: white;
    15.       }
    16.       .border {
    17.         border: 5px solid red;
    18.       }
    19.     </style>
    20.   </head>
    22.   <body>
    23.     <div>时间：<span></span></div>
    24.     <button id="date">获取时间</button>
    25.     <button id="color">颜色切换</button>
    26.     <button id="border">边框</button>
    27.     <script>
    28.       const btn = document.getElementById('date')
    29.       const color = document.getElementById('color')
    30.       const border = document.getElementById('border')
    31.       const div = document.querySelector('div')
    32.       const span = document.querySelector('span')
    34.       date.onclick = function () {
    35.         span.innerText = new Date()
    36.       }
    38.       color.onclick = () => {
    39.         div.style.color = div.style.color === 'white' ? 'black' : 'white'
    40.         div.style.backgroundColor =
    41.           div.style.backgroundColor === 'black' ? 'white' : 'black'
    42.       }
    43.       border.onclick = () => {
    44.         div.className = div.className === 'border' ? '' : 'border'
    45.       }
    46.     </script>
    47.   </body>
    48. </html>