search

博客列表 >DOM与事件及Todolist案例（0227）

DOM与事件及Todolist案例（0227）

小辰
小辰原创
2020年03月10日 23:40:16773浏览

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);
  28. //标签名：返回一个HTML对象集合
  29. var ul = document.getElementsByTagName('ul');
  30. console.log(ul);
  31. console.log(ul[0]);
  33. //ID: 返回一个元素对象
  34. var list = document.getElementById('list');
  35. console.log(list);
  36. //替代语法, 用方法来访问: namedItem(id)
  37. var div = document.getElementsByTagName('div');
  38. console.log(div);
  39. console.log(div.namedItem('list'));
  40. // namedItem(name属性值)
  41. var active = document.getElementsByTagName('li').namedItem('active');
  42. console.log(active);
  43. active.style.color = 'blue';
  44. //选择ul数组的元素的li集合
  45. var lis = ul.item(0).getElementsByTagName('li');
  46. console.log(lis);
  47. lis.item(2).style.backgroundColor = 'yellow';
  48. lis.namedItem('ct').style.backgroundColor = 'red';
  50. //class: 返回一个HTML集合, 一个类数组
  51. var poster = document.getElementsByClassName('poster')
  52. console.log(poster);
  53. console.log(poster[0]);
  54. //在class=poster的ul加边框
  55. poster.item(0).style.border = '2px solid'
  57. //直接使用css选择器来获取元素
  58. //querySelector():返回匹配选择器的第一个元素
  59. var div = document.querySelector('#list');
  60. console.log(div);
  61. var li = document.querySelector('li');
  62. console.log(li);
  63. // querySelectorAll(): 返回所有匹配选择器的元素集合NodeList
  64. var lis = document.querySelectorAll('.poster > li');
  65. console.log(lis);
  66. // 返回一个NodeList类型的类数组集合,但是它可以使用forEach()遍历
  67. console.log(lis.item(0));
  68. lis.item(0).style.backgroundColor = 'lightgreen';
  69. </script>
  70. </body>
  71. </html>

3. 节点与元素集合

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

下面是演示的效果图

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

5.事件基本

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

效果图

代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>事件基本</title>
  7. </head>
  9. <body>
  10.     <button onclick="alert(this.firstChild.nodeValue)">快戳我</button>
  11.     <button>不要点</button>
  12.     <a href="https://www.baidu.cn">百度</a>
  14.     <script>
  15.         var bt2 = document.querySelectorAll('button').item(1);
  16.         // addEventListener(事件名称字符串, 事件的回调函数, false);
  17.         bt2.addEventListener('mouseover', function (ev) {
  18.             // console.log(ev.target);
  19.             // console.log(ev.type);
  20.             ev.target.style = 'width:100px;height:50;background: lightgreen;border:none;outline: none;'
  21.         }, false);
  23.         bt2.addEventListener('mouseout', function (ev) {
  24.             ev.target.style = 'width:100px;';
  25.         }, false);
  27.         // 给元素对象添加事件属性
  28.         // 将当前的<a>标签的默认点击后会跳转的行业禁用掉
  29.         var link = document.links.item(0);
  30.         link.onclick = function (ev) {           
  31.             ev.preventDefault();
  32.             // btn.style.display = 'none';
  33.         };
  35.     </script>
  36. </body>
  38. </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);
  34.         // 如果已经有留言了, 就插入到第一条留言之前
  35.         if (ul.childElementCount === 0) {
  36.             ul.appendChild(li);
  37.         } else {
  38.             // insertBefor(要插入的元素, 要插入的位置/哪个元素之前)
  39.             ul.insertBefore(li, ul.firstElementChild);
  40.                 }
  42.         //清空留言板
  43.         form.content.value = '';
  44.         form.content.focus();
  45.     },false)
  47.      // 禁止链接的跳转行为
  48.     function del(ele) {
  49.     this.event.preventDefault();
  50.             return confirm('是否删除?') ? ul.removeChild(ele.parentElement) : false; 
  51.         }
  52. </script>
  53. </body>
  54. </html>
上一条：0227作业+DOM与事件的原理与运用+10期线上班下一条：CSS创建
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多