简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 0227作业+DOM与事件的原理与运用+10期线上班
Blogger Information
Blog 25
fans 1
comment 1
visits 17286
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
0227作业+DOM与事件的原理与运用+10期线上班
江川林
Original
727 people have browsed it

关于DOM

DOM是document object model的简写，文档对象模型

当网页被加载时，浏览器会创建页面的文档对象模型（DOM），我们可以通过DOM，访问所有的HTML元素，连同它们所包含的文本和属性

-可改变页面中的所有HTML元素(createElement/removeElement)
-可改变页面中的所有HTML属性（.属性名 =）
-可改变页面中的所有CSS样式(.style.样式名 =)
-能够对页面中的所有事件作出反应

可以通过以下几点查找元素的
1，通过标签名
document.getElementsByTagName('标签名')
-返回HTMLCollection集合
2，通过ID
document.getElementById('ID名')
-返回第一个id元素，不是集合
3，通过class
document.getElementsByClassName('类名')
-返回HTMLCollection集合
4，通过CSS控制器
document.querySelector()
-返回第一个CSS控制器的第一个元素
document.querySelectorAll()
返回CSS控制器的所有元素的nodeList集合

以下是实操代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>DOM与事件的原理与运用</title>
  6. </head>
  7. <body>
  8. <div class="container">
  9.     <p id="item">DOM与事件的学习</p>
  10.     <ul class="uls">
  11.         <li class="list">努力</li>
  12.         <li>认真</li>
  13.         <li>坚持</li>
  14.     </ul>
  15. </div>
  16. <script>
  17.     // 通过标签获取元素
  18.     var p = document.getElementsByTagName('p');
  19.     // console.log(typeof p);
  20.     // console.log(p);
  21.     // console.log(p.item(0).firstChild.nodeValue);
  22.     var div = document.getElementsByTagName('div');
  23.     // console.log(div[0].children.item(0))
  24.     // 通过ID获取元素
  25.     var item = document.getElementById('item');
  26.     // console.log(item);
  27.     // console.log(typeof item.firstChild);
  28.     // 通过class获取元素
  29.     var li = document.getElementsByClassName('list');
  30.     // console.log(li);
  31.     // console.log(li.item(0));
  32.     var uls = document.getElementsByClassName('uls');
  33.     // console.log(uls);
  34.     // console.log(uls.item(0).firstElementChild);
  35.     // 通过API
  36.     var api = document.querySelector('li');
  37.     // console.log(api.firstElementChild);
  38.     // console.log(typeof api);
  39.     var apis = document.querySelectorAll('li');
  40.     // console.log(apis);
  42. </script>
  43. </body>
  44. </html>

备注

其中元素节点有三大重要属性：
-nodeName:节点名称
-nodeType:节点类型
-ndeValue:节点值(此属性必须是文本节点才有的)

还有

-firstChild:获取第一个节点
-firstElementChild:获取第一个元素节点
-children:获取所有元素节点
-parentElement:获取该元素的父元素

元素的新增

1，创建新元素
-document.createElment
2，给新元素添加HTML内容
-element.innerHTML/innerText
3，获取需要新增元素的父级元素
4，将新元素新增到HTML页面中
-parentelement.appendChild

注：
如果需要新增多个元素，最好创建一个片段，然后将新增元素添加在片段中，最后将片段新增到父元素下，来提升页面的加载效率
-document.createDocumentFragment:创建元素片段

元素的删除

元素的删除和新增流程大致一样，删除代码是：
-document.removeElement:移除元素

以下是实操代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>元素的新增和删除</title>
  6. </head>
  7. <body>
  8. <div class="container">
  9.     <p id="item">DOM与事件的学习</p>
  10.     <ul class="uls">
  11.         <li class="list">努力</li>
  12.         <li>认真</li>
  13.         <li>坚持</li>
  14.     </ul>
  15. </div>
  16. <script>
  17.     // 元素的单个新增
  19.     // 创建新增元素
  20.     var p = document.createElement('p');
  21.     // 为新元素增加HTML内容
  22.     p.innerText= '我在PHP中文网学习';
  23.     // console.log(typeof p.innerText);
  24.     // 将新增元素附加到现在元素中，例如：添加在div里面
  25.     var div = document.querySelector('div');
  26.     // console.log(div);
  27.     div.appendChild(p);
  29.     // 添加在BODY中
  30.     // document.body.appendChild(p);
  32.     // 添加多个元素，运用片段
  33.     var frag = document.createDocumentFragment();
  34.     // 创建元素
  35.     // for (var i = 0; i<20;i++){
  36.     //     var li = document.createElement('li');
  37.     //     li.innerText = '第：' + (i+1) +'个';
  38.     //     frag.appendChild(li);
  39.     //     var ul = document.querySelector('ul');
  40.     // }
  41.     // ul.appendChild(frag);
  43.     // 删除元素
  44.     var ul = document.querySelector('ul');
  45.     var li = ul.children.item(0);
  46.     console.log(li);
  47.     ul.removeChild(li);
  48. </script>
  49. </body>
  50. </html>

关于事件

DOM时间允许JS在HTML文档元素中注册不同的时间处理程序，
时间通常与函数结合使用，函数不会在发生前被执行
HTML时间的例子：
-当用户点击鼠标时
-当网页加载时
-当图像加载时
-当鼠标移动到元素上时
-当输入字段被改变时
-当提交HTML表单时
-当用户出发按键时
on事件名称用来在HTML文档属性里面添加

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件</title>
  6. </head>
  7. <body>
  8.     <div class="contaier">
  9.         <p>点击这个按钮，看它会发生什么</p>
  10.         <button onclick="alert('欢迎你')">点我</button>
  11.     </div>
  12. </body>
  13. </html>

监听器：addEventListener()

-addEventListener（）方法用于向指定元素添加事件句柄
-事件监听器的可添加多次，且不会覆盖已存在的时间句柄
-可以向任何DOM对象添加事件监听器，不仅仅是HTML
addEventListener(‘事件类型，例click’，函数，false冒泡/true捕获)
事件类型里面不用加on

  1.     <div class="container">
  2.         <p>点击这个按钮，看它会发生什么</p>
  3.         <button onclick="alert('欢迎你')">点我</button>
  4.         <p id="study"></p>
  5.     </div>
  6. <script>
  7.     // 获取需要监听的元素
  8.     var button = document.querySelector('button');
  9.     // console.log(button);
  10.     // 设置监听事件
  11.     button.addEventListener('mouseenter', function (ev) {
  12.             // ev.preventDefault()
  13.         document.querySelector('#study').innerHTML = 'PHP中文网';
  14.     },false)
  15. </script>

事件方法

事件方法就是匿名函数，可以用在给HTML元素添加事件属性

  1.     // 函数表达式/匿名函数
  2.     button.onclick = function (ev) {
  3.         alert('欢迎你');
  4.     }

ToDoList实战

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>ToDoList</title>
  6. </head>
  7. <body>
  8. <form action="">
  9.     <label for="container">请输入留言内容</label>
  10.     <input type="text" id="container">
  11.     <button>提交</button>
  12. </form>
  13. <div style="border: 1px solid black; width: 400px; height: 400px;margin-top: 20px">
  14.     <p>留言区</p>
  15.     <ul>
  16.     </ul>
  17. </div>
  19. <script>
  20.     // 获取表单
  21.     var form = document.forms.item(0);
  22.     // 监听提交事件submit
  23.     // 获取提交元素
  24.     var button = document.querySelector('button');
  25.     // 监听提交事件
  26.     form.addEventListener('submit', function (ev) {
  27.         // 1,禁止提交按钮跳转
  28.         ev.preventDefault();
  29.         // 2,获取留言框
  30.         var ul = document.querySelector('ul');
  31.         // 3,创建留言新增元素
  32.         var li = document.createElement('li');
  33.         // 4,获取留言内容
  34.         // var value = document.querySelector('input').value;
  35.         var value = form.container.value;
  36.         // 判断留言内容是否为空
  37.         if (value.trim().length === 0) {
  38.             alert('留言内容不能为空');
  39.             form.container.focus();
  40.             return false;
  41.         } else {
  42.             // 5,为留言元素增长HTML文档
  43.             li.innerHTML = value;
  44.         }
  45.         // 改变留言顺序
  46.         if (ul.childElementCount === 0){
  47.             // 6,将留言新增元素添加到留言框
  48.             ul.appendChild(li);
  49.         }else {
  50.             ul.insertBefore(li, ul.firstElementChild);
  51.         }
  52.         // 7,清空留言输入框
  53.         form.container.value = ' ';
  54.         form.container.focus();
  55.     },false);
  57. </script>
  58. </body>
  59. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：完成的很认真
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！