博主信息
小辰
博文
26
粉丝
0
评论
2
访问量
4375
积分:0
P豆:52

DOM与事件及Todolist案例(0227)

2020年03月10日 23:40:16阅读数:118博客 / 小辰/ js学习

1. DOM简介

DOM: 文档对象模型
JS将整个HTML/XML文档看一个对象,也称为DOM树
DOM树由各种类型的节点组成

2. 获取DOM元素的四种方法

标签: document.getElementsByTagName()
ID: document.getElementById()
class: document.getElementsByClassName()
API: document.querySelector() / document.querySelectorAll()

控制台效果图

代码
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>获取元素的四种方法</title>
  5. <meta charset="utf-8">
  6. </head>
  7. <body>
  8. <!-- 1 学习查询手册, 学习常用的DOM操作方法
  9. 2 将课堂上所有的涉及的属性与方法全部上机实战
  10. 3 独立完成最后的Todolist案例 -->
  11. <div id="list">
  12. <ul class="poster">
  13. <li name="active">第一行内容</li>
  14. <li name="ct">第二行内容</li>
  15. <li>第三行内容</li>
  16. </ul>
  17. </div>
  18. <script type="text/javascript">
  19. // document定义一些快速接口
  20. console.log(document);
  21. console.log(window.document === document);
  22. console.log(document.doctype);
  23. console.log(document.documentElement);
  24. console.log(document.head);
  25. console.log(document.body);
  26. console.log(document.title);
  27. //标签名:返回一个HTML对象集合
  28. var ul = document.getElementsByTagName('ul');
  29. console.log(ul);
  30. console.log(ul[0]);
  31. //ID: 返回一个元素对象
  32. var list = document.getElementById('list');
  33. console.log(list);
  34. //替代语法, 用方法来访问: namedItem(id)
  35. var div = document.getElementsByTagName('div');
  36. console.log(div);
  37. console.log(div.namedItem('list'));
  38. // namedItem(name属性值)
  39. var active = document.getElementsByTagName('li').namedItem('active');
  40. console.log(active);
  41. active.style.color = 'blue';
  42. //选择ul数组的元素的li集合
  43. var lis = ul.item(0).getElementsByTagName('li');
  44. console.log(lis);
  45. lis.item(2).style.backgroundColor = 'yellow';
  46. lis.namedItem('ct').style.backgroundColor = 'red';
  47. //class: 返回一个HTML集合, 一个类数组
  48. var poster = document.getElementsByClassName('poster')
  49. console.log(poster);
  50. console.log(poster[0]);
  51. //在class=poster的ul加边框
  52. poster.item(0).style.border = '2px solid'
  53. //直接使用css选择器来获取元素
  54. //querySelector():返回匹配选择器的第一个元素
  55. var div = document.querySelector('#list');
  56. console.log(div);
  57. var li = document.querySelector('li');
  58. console.log(li);
  59. // querySelectorAll(): 返回所有匹配选择器的元素集合NodeList
  60. var lis = document.querySelectorAll('.poster > li');
  61. console.log(lis);
  62. // 返回一个NodeList类型的类数组集合,但是它可以使用forEach()遍历
  63. console.log(lis.item(0));
  64. lis.item(0).style.backgroundColor = 'lightgreen';
  65. </script>
  66. </body>
  67. </html>

3. 节点与元素集合

NodeList: 所有类型的节点集合,包括了元素,文本,注释,片断,文档,属性…
HTMLColletion: HTML元素的节点集合 NodeList > HTMLCollection, 是NodeList一个子集
页面元素返回二种类型的集合: HTMLCollection, NodeList
Node节点对象有三个非常重要的属性: nodeName, nodeType, nodeValue
nodeValue: 只有文本节点,这个属性才有意义

下面是演示的效果图

主要代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Node,NodeList对象</title>
  6. </head>
  7. <body>
  8. <div id="box">
  9. <h2>第一行</h2>
  10. <p>第二行</p>
  11. <li>第三行</li>
  12. </div>
  13. <p><a href="https://www.baidu.cn">百度一下</a></p>
  14. <script>
  15. var link = document.links.item(0);
  16. console.log(link.nodeName);
  17. // 1: 元素节点, 2: 属性, 3: 文本节点
  18. console.log(link.nodeType);
  19. console.log(link.nodeValue); // 元素节点的值没有意义,null
  20. console.log(link.firstChild.nodeValue);
  21. // 遍历<div>
  22. var div = document.querySelector('div');
  23. console.log(div.childNodes);
  24. // 返回是7而不是我们看到的3, 原因是把换行符当成了文本节点
  25. // childNodes,返回值中包括了所有类型的节点
  26. for (var i = 0; i < div.childNodes.length; i++) {
  27. var currentNode = div.childNodes.item(i);
  28. //currentNode.nodeType === 1
  29. if (true) {
  30. var name = currentNode.nodeName;
  31. var type = currentNode.nodeType;
  32. var value = currentNode.nodeValue;
  33. console.log((i + 1) + ': 名称: ' + name + ', 类型: ' + type + ', 值: ' + value);
  34. }
  35. }
  36. console.log(div.childNodes);
  37. // children: 只返回集合中的元素节点
  38. console.log(div.children);
  39. //遍历div的元素节点
  40. for (var i = 0; i < div.childElementCount; i++) {
  41. console.log(div.children.item(i));
  42. }
  43. // //通过判断是否元素节点,遍历元素节点
  44. // div.childNodes.forEach(function (ele) {
  45. // if (ele.nodeType === 1) console.log(ele );
  46. // });
  47. // Array.from(): 将类数组转为真正的数组对象
  48. // Array.from(div.children).forEach(function (ele) {
  49. // console.log(ele );
  50. // });
  51. // 获取div的子元素
  52. // 第一个
  53. // console.log(div.firstElementChild);
  54. // 最后一个
  55. // console.log(div.lastElementChild);
  56. // 用索引获取指定的元素
  57. console.log(div.children.item(2));
  58. // 获取父元素
  59. var li = document.querySelector('li');
  60. console.log(li.parentElement);
  61. console.log(li.parentNode);
  62. console.log(li.parentNode === li.parentElement);
  63. </script>
  64. </body>
  65. </html>

4.元素的添加与删除

创建元素: createElement()
创建一个元素的片断: createDocumentFragment()

下面演示结果

代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>元素的添加与删除</title>
  6. </head>
  7. <body>
  8. <ul></ul>
  9. <script>
  10. // 添加元素到页面中
  11. // 添加一个元素
  12. // 1. 创建一个元素
  13. var h2 = document.createElement('h2');
  14. // 2. 给元素添加内容
  15. h2.innerHTML = 'h2标签';
  16. // 3. 添加到页面已经存在的父节点中
  17. document.body.appendChild(h2);
  18. // 添加多个
  19. var ul = document.querySelector('ul');
  20. for (var i =0; i <3; i++) {
  21. var li = document.createElement('li');
  22. li.innerText = '多个' + (i+1);
  23. ul.appendChild(li);
  24. }
  25. // 借助文档片断来优化元素的增删操作
  26. var frag = document.createDocumentFragment();
  27. for (var i =0; i < 4; i++) {
  28. var li = document.createElement('li');
  29. li.innerText = '第' + (i+1)+'行';
  30. // 添加到临时挂载点
  31. frag.appendChild(li);
  32. }
  33. ul.appendChild(frag);
  34. </script>
  35. </body>
  36. </html>

5.事件基本

事件属性: on事件名称
监听器: addEventListernaer()
事件方法: 函数表达式/匿名函数

效果图

代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>事件基本</title>
  6. </head>
  7. <body>
  8. <button onclick="alert(this.firstChild.nodeValue)">快戳我</button>
  9. <button>不要点</button>
  10. <a href="https://www.baidu.cn">百度</a>
  11. <script>
  12. var bt2 = document.querySelectorAll('button').item(1);
  13. // addEventListener(事件名称字符串, 事件的回调函数, false);
  14. bt2.addEventListener('mouseover', function (ev) {
  15. // console.log(ev.target);
  16. // console.log(ev.type);
  17. ev.target.style = 'width:100px;height:50;background: lightgreen;border:none;outline: none;'
  18. }, false);
  19. bt2.addEventListener('mouseout', function (ev) {
  20. ev.target.style = 'width:100px;';
  21. }, false);
  22. // 给元素对象添加事件属性
  23. // 将当前的<a>标签的默认点击后会跳转的行业禁用掉
  24. var link = document.links.item(0);
  25. link.onclick = function (ev) {
  26. ev.preventDefault();
  27. // btn.style.display = 'none';
  28. };
  29. </script>
  30. </body>
  31. </html>

6.todolist案例

创建过程
  1. 禁用默认的提交行为, 由用户自己处理
    ev.preventDefault();
  2. 创建一条新留言
    var li = document.createElement('li');
  3. 将用户留言添加到项目中,form.content.value;留言内容
    li.innerHTML = form.content.value;
  4. 将项目添加到留言列表中
    ul.appendChild(li);
  5. 清空留言板
    form.content.value = ''; form.content.focus();
要注意的问题
  1. 内容为空应该禁止提交
  2. 最新留言应该显示在第一条
效果图

代码
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>todolist案例</title>
  5. <meta charset="utf-8">
  6. </head>
  7. <body>
  8. <form action="" name="comment" method="post">
  9. <label for="content">请留言:</label>
  10. <input type="text" name="content">
  11. <button>提交</button>
  12. </form>
  13. <ul></ul>
  14. <script >
  15. //获取表单
  16. var form = document.forms.namedItem('comment');
  17. //留言区
  18. var ul = document.querySelector('ul');
  19. //提交表单
  20. form.addEventListener('submit',function(ev){
  21. ev.preventDefault();
  22. var li = document.createElement('li');
  23. //为空禁止提交
  24. if (form.content.value.trim().length===0) {
  25. alert('留言内容不能为空');
  26. form.content.focus();
  27. return false;
  28. }else {
  29. li.innerHTML = form.content.value+'<a href="" onclick="del(this)">删除</a>';;
  30. }
  31. // li.innerHTML = form.content.value;
  32. // ul.appendChild(li);
  33. // 如果已经有留言了, 就插入到第一条留言之前
  34. if (ul.childElementCount === 0) {
  35. ul.appendChild(li);
  36. } else {
  37. // insertBefor(要插入的元素, 要插入的位置/哪个元素之前)
  38. ul.insertBefore(li, ul.firstElementChild);
  39. }
  40. //清空留言板
  41. form.content.value = '';
  42. form.content.focus();
  43. },false)
  44. // 禁止链接的跳转行为
  45. function del(ele) {
  46. this.event.preventDefault();
  47. return confirm('是否删除?') ? ul.removeChild(ele.parentElement) : false;
  48. }
  49. </script>
  50. </body>
  51. </html>
批改老师:天蓬大人天蓬大人

批改状态:合格

老师批语:你可以有自己的想法, 不定完全模仿

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论