Dom 对象

目录

  1. DOM 树, DOM 节点, DOM 对象是什么
  2. 利用 DOM 对象对 DOM 节点进行增删改查操作
  3. 事件绑定
  4. 事件常见类型
  5. 事件对象
  6. 事件冒泡和事件捕获

(一) Dom 树, Dom 节点和 Dom 对象

DOM 树 (见图)

domTree.png

2. DOM 节点

3. DOM 对象


4. 全称 Document object Model, 中文名称文档对象模型

作用: 用来的元素节点进行操作, 比如修改元素节点的内容, 修改元素节点的样式

(二) Dom 节点操作(增删改查)

2.1 获取 DOM 节点,获取 DOM 节点的属性,样式和内容

1. 获取 DOM 节点

  1. <body>
  3.     <div id="app">app</div>
  4.     <ul>
  5.         <li class="item">1</li>
  6.         <li class="item">2</li>
  7.         <li class="item">3</li>
  8.         <li class="item">4</li>
  9.         <li class="item">5</li>
  10.     </ul>
  13.     <script>
  14.         var $app = document.querySelector('#app');
  15.         console.log('app', $app);
  16.         var $item = document.querySelector('.item');
  17.         console.log('item', $item);
  19.         var $items = document.querySelectorAll('.item');
  20.         console.log('$items', $items);
  21.     </script>
  22. </body>
  1. document.getElementById('xxx');  //根据id来获取dom节点,xxx是id名,id是唯一的
  2. document.querySelector('xxx');  // 根据选择器来获取dom节点(只能获取一个),xxx可以是任意选择器
  3. document.querySelectorAll();    // 根据选择器来获取dom节点(获取全部),xxx可以是任意选择器
  5. dir(xxx) 可以在控制台查看对象的属性

2. 获取 DOM 节点的属性和样式

  1. <style>
  2.         a {
  3.             color: red;
  4.         }
  5.     </style>
  6. </head>
  8. <body>
  9.     <a href="http://www.baidu.com" style="font-size: 20px;background-color: gray;">百度</a>
  12.     <script>
  13.         // 获取a标签的href属性
  14.         var $a = document.querySelector('a');
  15.         console.log('href属性:', $a.href); //
  16.         // 获取a标签的样式
  17.         console.log('a标签的样式', $a.style.fontSize, $a.style.backgroundColor);
  18.         // 获取a标签的字体颜色
  19.         console.log('a标签的字体样式', $a.style.color); // 获取不到
  20.         console.log('a标签的字体样式', window.getComputedStyle($a, null).color); // 了解
  21.     </script>
  22. </body>
  1. (1)获取属性 - 见demo
  2. (2)获取样式 - 见demo

3. 获取 dom 节点的内容

  1. <body>
  2.     <div id="app">
  3.         <div>
  4.             aaaaaa
  5.             <p>
  6.                 bbbbbb
  7.             </p>
  8.         </div>
  9.     </div>
  11.     <script>
  12.         var $app = document.querySelector('#app');
  13.         // 获取标签和文本
  14.         console.log('innerHTML=', $app.innerHTML);
  15.         // 只获取文本
  16.         console.log('innerText=', $app.innerText);
  17.     </script>
  18. </body>
  1. innerHTML 获取内容连同元素节点
  2. innerText 只获取文本内容

2.2 添加节点

1. 创建节点和插入节点

  1. <body>
  2.     <ul id="list">
  3.         <li>1</li>
  4.         <li>2</li>
  5.         <li>3</li>
  6.     </ul>
  8.     <script>
  9.         // 创建li节点
  10.         var $li = document.createElement('li');
  11.         $li.innerText = 4;
  13.         // 把li节点插入到ul里面
  14.         var $list = document.querySelector('#list');
  15.         $list.appendChild($li);
  16.     </script>
  17. </body>

2. 通过点击事件插入节点

  1. <body>
  2.     <button onclick="add();">添加节点</button>
  3.     <ul id="list">
  4.         <li>1</li>
  5.         <li>2</li>
  6.         <li>3</li>
  7.     </ul>
  9.     <script>
  10.         var num = 4;
  12.         function add() {
  13.             // 创建li节点
  14.             var $li = document.createElement('li');
  16.             $li.innerText = num++;
  17.             console.log(num);
  19.             // 把li节点插入到ul里面
  20.             var $list = document.querySelector('#list');
  21.             $list.appendChild($li);
  22.         }
  23.     </script>
  24. </body>

2.3 删除节点

remove()

  1. <body>
  2.     <ul id="list">
  3.         <li>1</li>
  4.         <li>2</li>
  5.         <li>3</li>
  6.     </ul>
  8.     <button onclick="remove();">删除</button>
  10.     <script>
  11.         function remove() {
  12.             var $list = document.querySelector('#list');
  13.             $list.remove();
  14.         }
  15.     </script>
  16. </body>

2.4 修改节点(内容,样式,属性)

  1.   - 修改内容 节点.innerHTML=xxx; innerText=xxx;
  2.   - 修改样式 节点.style.xxx=xxx;  // style是行内样式
  3.   - 修改属性 节点.属性名=xxx;
  • 修改内容 节点.innerHTML=xxx; innerText=xxx; ```javascript 

  1. <script>
  2.     function showDiv() {
  3.         var $box = document.querySelector('.box');
  4.         var $button = document.querySelector('button');
  5.         var flag = $box.style.display;
  6.         if (flag === 'none') {
  7.             $box.style.display = 'block';
  8.             $button.innerText = '隐藏';
  9.         } else {
  10.             $box.style.display = 'none';
  11.             $button.innerText = '显示';
  12.         }
  13.     }
  14. </script>
  2. - 修改样式 节点.style.xxx=xxx;  // style是行内样式
  3. ```javascript
  4. <style>
  5.         div {
  6.             border: 1px solid;
  7.             margin-top: 20px;
  8.         }
  10.         .dsn {
  11.             display: none;
  12.         }
  13.     </style>
  14. </head>
  16. <body>
  17.     <button onclick="showDiv();">显示</button>
  18.     <div class="box">
  19.         <p>xxxxxx</p>
  20.         <p>xxxxxx</p>
  21.         <p>xxxxxx</p>
  22.     </div>
  24.     <script>
  25.         function showDiv() {
  26.             var $box = document.querySelector('.box');
  27.             var $button = document.querySelector('button');
  28.             var className = $box.className;
  29.             if (className === 'box') {
  30.                 $box.className = 'box dsn';
  31.                 $button.innerText = '隐藏';
  32.             } else {
  33.                 $box.className = 'box';
  34.                 $button.innerText = '显示';
  35.             }
  36.         }
  37.     </script>
  • 修改属性 节点.属性名=xxx; ```javascript 
  1. <button onclick="changeImg(1)">换图1</button>
  2. <button onclick="changeImg(2)">换图2</button>
  3. <div class="box">
  4.     <img src="./img/fj1.jpg" alt="">
  5. </div>
  7. <script>
  8.     function changeImg(num) {
  9.         // 修改img的src属性
  10.         document.querySelector('img').src = `./img/fj${num}.jpg`;
  11.     }
  12. </script>

  1. <a name="MsSUb"></a>
  2. ## (三)事件绑定
  4. <a name="Ah1gk"></a>
  5. ### 3.1 普通事件绑定(DOM 一级)
  7. - onxxx
  8. - xxx.click
  9. ```javascript
  10. <body>
  11.     <button onclick="alert('哈哈哈哈');">点我</button>
  12.     <button id="btn">点我2</button>
  14.     <script>
  15.         var $btn = document.querySelector('#btn');
  16.         $btn.onclick = function() {
  17.             alert('嘿嘿嘿');
  18.         }
  19.     </script>
  20. </body>

3.2 高级事件绑定(DOM 二级) addEventListener

dom一级事件绑定和dom二级事件绑定区别: 同类型事件, 前者绑定多次, 只会执行一次, 后者可以执行多次

  1. <body>
  2.     <button id="btn1" onclick="alert('哈哈哈哈');">点我</button>
  3.     <button id="btn2">点我2</button>
  5.     <script>
  6.         var $btn = document.querySelector('#btn1');
  7.         $btn.onclick = function() {
  8.             alert('再绑定一次');
  9.         }
  11.         var $btn2 = document.querySelector('#btn2');
  13.         // 参数1:事件名称 参数2:监听器(监听函数) 参数3:事件模式
  14.         $btn2.addEventListener('click', function() {
  15.             alert('dom二级事件绑定')
  16.         }, false);
  18.         // 函数也可以在外边声明
  19.         $btn2.addEventListener('click', test, false);
  21.         function test() {
  22.             alert('再绑定一次')
  23.         }
  24.     </script>
  25. </body>

3.3 使用 js 触发事件

  1. <body>
  2.     <button id="btn1" onclick="console.log('哈哈哈哈');">点我</button>
  3.     <button id="btn2">点我2</button>
  5.     <script>
  6.         var $btn = document.querySelector('#btn1');
  7.         $btn.onclick = function() {
  8.             console.log('再绑定一次');
  9.         }
  11.         var $btn2 = document.querySelector('#btn2');
  13.         // 参数1:事件名称 参数2:监听器(监听函数) 参数3:事件模式
  14.         $btn2.addEventListener('click', function() {
  15.             console.log('dom二级事件绑定')
  16.         }, false);
  18.         // 函数也可以在外边声明
  19.         $btn2.addEventListener('click', test, false);
  21.         function test() {
  22.             console.log('再绑定一次')
  23.         }
  25.         // 通过js触发事件
  26.         $btn.click();
  28.         setTimeout(function() {
  29.             $btn2.click();
  30.         }, 3000)
  31.     </script>
  32. </body>

(四) 事件常见类型

1.如图

onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个 HTML 元素上移动鼠标
onmouseout 用户从一个 HTML 元素上移开鼠标
onkeydown 用户按下键盘按键
onkeyup 用户松开键盘按键
onload 浏览器已完成页面的加载
oninput 键盘输入事件
touchStart 触摸开始
touchMove 滑动 
  1. <script>
  2.         window.onload = function() {
  3.             console.log('页面加载完成');
  4.             var $button = document.querySelector('button');
  5.             $button.onclick = function() {
  6.                 alert('哈哈哈哈');
  7.             }
  8.         }
  9.     </script>
  10. </head>
  12. <body>
  13.     <button>点我</button>
  14. </body>
  1. <body>
  2.     <input type="text" name="" id="" oninput="test();" onkeydown="test2();">
  4.     <script>
  5.         function test() {
  6.             var $input = document.querySelector('input');
  7.             console.log($input.value);
  8.         }
  10.         var count = 0;
  12.         function test2() {
  13.             console.log(`键盘被按下了${++count}次`);
  14.         }
  15.     </script>
  16. </body>
  1. <body>
  2.     <p>xxxx</p>
  3.     <p>xxxx</p>
  5.     <script>
  6.         // 滚动事件
  7.         var count = 0;
  8.         window.onscroll = function() {
  9.             console.log(`滚动了${++count}次`);
  10.         }
  11.     </script>
  12. </body>

| touchEnd | 触摸结束 |

更多事件类型

  1. https://www.runoob.com/jsref/dom-obj-event.html

(五) 事件对象

1. event 对象: 每个事件被触发时,都会产生一个event对象

  1. <body>
  2.     <button onclick="clickMe();">点击我</button>
  3.     <input type="text" oninput="inputData()">
  5.     <script>
  6.         function clickMe() {
  7.             console.log(event);
  8.         }
  10.         function inputData() {
  11.             console.log(event);
  12.         }
  13.     </script>
  14. </body>

2. target 和 currentTarget

  • target表示被触发的元素(比如: 点击事件就是被点击的元素)
  • currentTarget是事件绑定的元素 ```javascript 

  1. <script>
  2.     function clickMe() {
  3.         var target = event.target; // 点击谁就是谁
  4.         var currentTarget = event.currentTarget; // div
  5.         console.log('被点击的元素是:', target);
  6.         console.log('事件绑定的元素:', currentTarget);
  7.     }
  8. </script>

  1. <a name="KZoqo"></a>
  2. ## (六) 事件冒泡和事件捕获
  4. <a name="WUUVt"></a>
  5. ### 1. 事件流(事件的传播) 
  7.    1. 事件捕获阶段
  8.    1. 目标阶段
  9.    1. 事件冒泡阶段
  10. ```javascript
  11.  <style>
  12.         #box {
  13.             width: 500px;
  14.             height: 500px;
  15.             background-color: gray;
  16.         }
  18.         #pp {
  19.             width: 300px;
  20.             height: 300px;
  21.             background-color: green;
  22.             padding: 50px;
  23.         }
  25.         #btn {
  26.             position: fixed;
  27.             bottom: 20px;
  28.             left: 20px;
  29.         }
  30.     </style>
  31. </head>
  33. <body>
  35.     <div id="box">
  36.         <p id="pp">
  37.             <button id="btn">事件源</button>
  38.         </p>
  40.     </div>
  42.     <script>
  43.         var $box = document.querySelector('#box');
  44.         var $pp = document.querySelector('#pp');
  45.         var $btn = document.querySelector('#btn');
  47.         // false表示在冒泡阶段触发, true表示在捕获阶段触发
  48.         $box.addEventListener('click', function() {
  49.             console.log('div监听到了事件');
  50.         }, false);
  52.         $pp.addEventListener('click', function() {
  53.             console.log('p标签监听到了事件');
  54.         }, false);
  56.         $btn.addEventListener('click', function() {
  57.             console.log('button标签监听到了事件');
  58.         }, false);
  59.     </script>

2. 事件冒泡应用: 事件委托(托管)

  1. <style>
  2.         li {
  3.             border: 1px solid;
  4.             margin-top: 10px;
  5.             cursor: pointer;
  6.             width: 100px;
  7.         }
  9.         .on {
  10.             color: red;
  11.         }
  12.     </style>
  13. </head>
  15. <body>
  16.     <ul id="app" onclick="clickLi();">
  17.         <li>1</li>
  18.         <li>2</li>
  19.         <li>3</li>
  20.         <li>4</li>
  21.         <li>5</li>
  22.     </ul>
  24.     <script>
  25.         function clickLi() {
  26.             // console.log(event.target);
  27.             var target = event.target;
  28.             console.log(target);
  29.             if (target.nodeName !== 'LI') return false;
  30.             // 其他的li清除颜色
  31.             var $li = document.querySelector('.on');
  32.             if ($li) {
  33.                 $li.className = ''
  34.             }
  35.             // 被点击的li改变颜色
  36.             target.className = 'on';
  37.         }
  38.     </script>
  1. 改造计算器

Bom 对象

1. location.href 获取浏览器地址 (window.location)

2. location.href = ‘http://www.baidu.com‘ // 跳转到百度

3. location.href = ‘http://www.baidu.com?username=huruqing‘
// 跳转到百度的时候,加上参数 username=huruqing

  1. // 1.location对象
  2.     // (1) 获取url地址
  3.     var urlStr = location.href;
  4.     console.log('urlStr:', urlStr);
  6.     // (2) 用location.href进行页面跳转
  7.     location.href = 'http://www.baidu.com';
  8.     // (2) 页面参数传递,比如a页面要传数据给b页面
  9.     location.href = 'http://www.baidu.com?a=222&b=333';
  11.     // (3) location.search 获取浏览器地址?开始的参数
  12.     // 作业: 把字符 ?a=123&b=456,使用对象存起来,比如: {a:123,b:456}
  13.     // var str = '?a=123&b=456';
  14.     // var obj = {};
  15.     var params = location.search;

4. setTimeout 延迟

  1. // (4) 延迟执行 
  2.     setTimeout(function() {
  3.         console.log('一秒后执行')
  4.     }, 1000);

5. setInterval 定时器和清除定时器

  1.  // (5) setInterval 定时器
  2.     var count = 0;
  3.     var timer = setInterval(function() {
  4.         console.log(count++);
  5.         // 当count等于10的时候,清除定时器
  6.         if (count === 10) {
  7.             // 清除定时器
  8.             clearInterval(timer);
  9.         }
  10.     }, 1000);

6. navigator: userAgent 用来判断用户在使用什么设备

  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.     <h3>正在判断用户设备......</h3>
  14.     <script>
  15.         // 判断用户使用设备
  16.         //js判断是否移动端
  17.         function fIsMobile() {
  18.             return /Android|iPhone|iPad|iPod|BlackBerry|webOS|Windows Phone|SymbianOS|IEMobile|Opera Mini/i.test(navigator.userAgent);
  19.         }
  21.         setTimeout(function() {
  22.             var res = fIsMobile();
  23.             if (res) {
  24.                 location.href = './mobile.html';
  25.             } else {
  26.                 location.href = './pc.html';
  27.             }
  28.         }, 3000);
  29.     </script>
  30. </body>
  31. </html>

7. history对象 浏览器历史对象

  1. history.back();
  2. history.forward();
  3. history.go();