DOM与事件的原理与运用

关于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>
posted @ 2020-03-18 16:31  笨笨韩  阅读(287)  评论(0)    收藏  举报