1. DOM是document object  model的缩写  文档对象模型
  2. DOM是关于如何获取、修改、添加和删除HTML元素的标准
  3. DOM是由节点组成的
  4. 节点的关系：父子兄弟

1、获取节点的方法

  1.       <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8. </head>
  9. <body>
  10.     <div id="app">app</div>
  11.     <ul>
  12.         <li class="item">1</li>
  13.         <li class="item">2</li>
  14.         <li class="item">3</li>
  15.         <li class="item">4</li>
  16.     </ul>
  17.     <script>
  18.         var $app=document.querySelector('#app');
  19.         console.log($app);
  20.         var $item=document.querySelector('.item');
  21.         console.log($item);
  22.         var $items=document.querySelectorAll('.item');
  23.         console.log($items);
  24.     </script>
  25. </body>
  26. </html>

2、获取样式和属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         a{background-color: black;}
  11.     </style>
  12. </head>
  14. <body>
  15.     <a href="https://www.qq.com" style="font-size: 20px;color: aqua;">QQ</a>
  16.     <script>
  17.         //获取a的href属性
  18.         var $a = document.querySelector('a');
  19.         console.log($a.href);
  20.         //获取a的样式
  21.         $a.style.color = 'red';
  22.         console.log('a的样式:', $a.style.fontSize, $a.style.color);
  24.         console.log('');
  25.     </script>
  26. </body>
  28. </html>

3、获取文本和标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <div>
  12.             aaaaaa
  13.             <p>
  14.                 bbbbbb
  15.             </p>
  16.         </div>
  17.     </div>
  18.     <script>
  19.         var $app = document.querySelector('#app');
  20.         console.log($app.innerHTML);
  21.         console.log($app.innerText);
  22.     </script>
  23. </body>
  24. </html>

4、添加节点

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8. </head>
  9. <body>
  10.     <ul id="list">
  11.         <li>1</li>
  12.         <li>2</li>
  13.         <li>3</li>
  14.     </ul>
  16.     <script>
  17.         //创建节点
  18.         var $li=document.createElement('li');
  19.         $li.innerText=4;
  20.         //把li节点插入到ul里面
  21.         var $list = document.querySelector('#list')
  22.         $list.appendChild($li);
  23.     </script>
  24. </body>
  25. </html>

5、通过事件添加节点

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <button onclick="add()">添加节点</button>
  13.     <ul id="list">
  14.         <li>1</li>
  15.         <li>2</li>
  16.         <li>3</li>
  17.     </ul>
  19.     <script>
  20.         var num = 4;
  22.         function add() { 
  23.             //创建节点
  24.             var $li = document.createElement('li');
  25.             $li.innerText = num;
  26.             $li.innerText = num++;
  27.             //把li节点插入到ul里面
  28.             var $list = document.querySelector('#list')
  29.             $list.appendChild($li);
  30.         }
  31.     </script>
  32. </body>
  34. </html>

6、删除节点

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <button onclick="remove()">删除节点</button>
  13.     <ul id="list">
  14.         <li>1</li>
  15.         <li>2</li>
  16.         <li>3</li>
  17.     </ul>
  18.     <script>
  19.         var num = 4;
  21.         function remove() {
  22.             var $list = document.querySelector('#list');
  23.             $list.remove();
  24.         }
  25.     </script>
  26. </body>
  28. </html>

7、修改节点样式属性（1）

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         div {
  11.             border: 1px solid;
  12.             margin-top: 20px;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <button onclick="showDiv()">显示</button>
  19.     <div style="display: none;" class="box">
  20.         <p>xxxxxx</p>
  21.         <p>xxxxxx</p>
  22.         <p>xxxxxx</p>
  23.     </div>
  24.     <script>
  25.         function showDiv() {
  26.             var $box=document.querySelector('.box');
  27.             var $button=document.querySelector('button');
  28.             var flag = $box.style.display;
  29.             if(flag=='none'){
  30.                 $box.style.display='block';
  31.                 $button.innerText='隐藏';
  32.             }else {
  33.                 $box.style.display='none';
  34.                 $button.innerText='显示';
  35.             }
  37.         }
  38.     </script>
  39. </body>
  41. </html>

8、修改节点样式属性（2）

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         div {
  11.             border: 1px solid;
  12.             margin-top: 20px;
  13.         }
  15.         .dsn {
  16.             display: none;
  17.         }
  18.     </style>
  19. </head>
  21. <body>
  22.     <button onclick="showDiv()">显示</button>
  23.     <div class="box">
  24.         <p>xxxxxx</p>
  25.         <p>xxxxxx</p>
  26.         <p>xxxxxx</p>
  27.     </div>
  28.     <script>
  29.         function showDiv() {
  30.             var $box = document.querySelector('.box');
  31.             var $button = document.querySelector('button');
  32.             var className = $box.className;
  33.             if (className == 'box') {
  34.                 $box.className = 'box dsn';
  35.                 $button.innerText = '隐藏';
  36.             } else {
  37.                 $box.className = 'box';
  38.                 $button.innerText = '显示';
  39.             }
  41.         }
  42.     </script>
  43. </body>
  45. </html>

9、修改节点元素属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8.     <style>
  9.         .box {
  10.             width: 300px;
  11.             height: 300px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <button onclick="changeImg(1)">换图1</button>
  17.     <button onclick="changeImg(2)">换图2</button>
  18.     <div class="box">
  19.         <img src="./img/fj1.jpg" alt="">
  20.     </div>
  21.     <script>
  22.         function changeImg(num){
  23.             document.querySelector('img').src=`./img/fj${num}.jpg`;
  24.         }
  25.     </script>
  26. </body>
  27. </html>