search

博客列表 >JS的获取元素和事件操作（0813）

JS的获取元素和事件操作（0813）

丶久而旧之丶
丶久而旧之丶原创
2020年09月20日 17:28:17853浏览

JS的DOM操作和事件

节点

  1.  // 1.文档节点
  2.  console.log(document);
  3.  // 节点三要素
  4.  // 节点类型
  5.  console.log(document.nodeType);
  6.  // 节点名称
  7.  console.log(document.nodeName);
  8.  // 节点的值
  9.  console.log(document.nodeValue);
  11.  // 查看文档类型
  12.  console.log(document.doctype);
  13.  // 查看根节点(html)
  14.  console.log(document.documentElement);
  15.  // 查看头节点
  16.  console.log(document.head);
  17.  // 查看标题
  18.  console.log(document.title);
  19.  // 查看主体
  20.  console.log(document.body);
  21.  // 操作节点
  22.  document.body.style.backgroundColor = 'lightgreen';

获取元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>DOM操作</title>
  8. </head>
  10. <body>
  11.     <div id='container'>
  12.         <ul class='poster' name='poster'>
  13.             <li name='active'>上午学习PHP</li>
  14.             <li>下午学习JAVA</li>
  15.             <li>晚上学习CSS</li>
  16.         </ul>
  17.     </div>
  18.     <script>
  19.         // 获取元素
  20.         // 1.根据标签获取(返回一个对象集合)
  21.         var ul = document.getElementsByTagName('ul');
  22.         console.log(ul);
  23.         // 返回的是一个对象集合要获取其中某个需要通过键获取
  24.         console.log(ul[0]);
  25.         console.log(ul.item(0));
  27.         // 2.根据id获取(因为html中的id唯一性是人为遵守的，所以是返回具有指定id的第一个元素)
  28.         var div = document.getElementById('container');
  29.         console.log(div);
  30.         // 也可以在对象集合中获取具有指定名称的元素
  31.         console.log(ul.namedItem('poster'));
  32.         // 获取指定的一个<li>
  33.         var li = document.getElementsByTagName('li').namedItem('active');
  34.         li.style.color = 'lightgreen';
  35.         // 也可以在元素级别调用方法
  36.         var li1 = ul.item(0).getElementsByTagName('li');
  37.         console.log(li1);
  39.         // 3.根据class获取(和标签一样返回对象集合)
  40.         var ul1 = document.getElementsByClassName('poster');
  41.         console.log(ul1);
  42.         ul1.item(0).style.border = '2px solid lightblue';
  44.         // 4.使用queryselector方法（推荐）参数为CSS选择器
  45.         // querySelector()返回满足条件的第一个元素
  46.         var li2 = document.querySelector('#container li');
  47.         console.log(li2);
  48.         // 获取第二个<li>
  49.         var li3 = document.querySelector('li:nth-of-type(2)');
  50.         console.log(li3);
  51.         // querySelmectorAll()返回满足条件的元素集合(可以看做数组使用但是上面返回的对象集合不能)
  52.         var lis = document.querySelectorAll('.poster>li');
  53.         console.log(lis);
  54.         lis.item(1).style.backgroundColor = 'lightcoral';
  55.     </script>
  56. </body>
  58. </html>

NodeList

  1.  // NodeList
  2. var div = document.querySelector('.act');
  3. // 打印节点数
  4. console.log(div.childNodes);
  5. // 文档中的换行，回车都是文本节点(nodeType === 3)
  6. console.log(div.childNodes.item(0).nodeType);
  7. // 元素节点（nodeType === 1）
  8. console.log(div.childNodes.item(1).nodeType);
  9. // 对于节点过滤
  10. for (var i = 0; i < div.childNodes.length; i++) {
  11.     var cuName = div.childNodes.item(i);
  12.     if (cuName.nodeType === 1) {
  13.         console.log(cuName.tagName.toLowerCase());
  14.     }
  15. }
  16. // 也可以通过children直接返回元素节点
  17. console.log(div.children);
  18. // 获取元素子节点
  19. console.log(div.firstElementChild);//第一个子节点
  20. console.log(div.children.item(1));//第二个子节点
  21. console.log(div.lastElementChild);//最后一个子节点
  23. // 获取父节点
  24. var p = document.querySelector('p');
  25. console.log(p.parentNode);

元素添加

  1. // 元素动态添加
  2. // 1.创建元素
  3. var p = document.createElement('p');
  4. // 2.设置元素样式或内容
  5. p.innerHTML = '<span style="color:lightcoral">JavaScript</span>真好玩';
  6. // 3.添加到页面中，必须在父节点上面添加
  7. document.querySelector('.item').appendChild(p);
  8. // 添加多个元素
  10. for (var i = 0; i < 5; i++) {
  11.     var li = document.createElement('li');
  12.     li.innerHTML = '列表项' + (i + 1);
  13.     document.querySelector('.tain').appendChild(li);
  14. }
  15. // 上面方式建议不使用因为每添加一次页面就会渲染一次（可以把元素放在片段中最后一次性添加到页面中）
  16. var frag = document.createDocumentFragment();
  17. for (var a = 0; a < 5; a++) {
  18.     var li1 = document.createElement('li');
  19.     li1.innerHTML = '<span style="color:lightpink">列表项' + (a + 6) + '<span>';
  20.     frag.appendChild(li1);
  21. }
  22. // 最后把片段添加到页面中
  23. document.querySelector('.tain').appendChild(frag);

事件

  1. // 事件
  2. // 先获取按钮
  3. var btn = document.querySelector('button');
  4. console.log(btn);
  5. // 绑定事件
  6. btn.addEventListener('mouseover', function (ev) {
  7.     // ev.target为事件的触发者
  8.     ev.target.style = 'width:80px;height:80px;background:lightpink;outline:lightpink groove 8px;border:none;font-size:150%';
  9. })
  10. // 取消元素的默认行为
  11. // 获取a连接(document.links可以获取文档所有连接)
  12. var a = document.links.item(0);
  13. a.onclick = function (ev) {
  14.     // 禁用a标签的默认行为
  15.     ev.preventDefault();
  16.     btn.style = null;
  17. };
  18. var div = document.querySelector('.container');
  19. div.addEventListener('mouseover', function (ev) {
  20.     ev.target.style = 'border-radius:40px;width:200px; transition:all 0.5s ease-out';
  22. })
  23. div.addEventListener('mouseout', function (ev) {
  24.     ev.target.style = null;
  25.     ev.target.style = 'transition:0.5s ease-out';
  26. })

ToDoList

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>todolist</title>
  8.     <style>
  9.         .status {
  10.             display: none;
  11.         }
  13.         .item {
  14.             width: 400px;
  15.             overflow: hidden
  16.         }
  18.         .act1 {
  19.             float: right;
  20.             padding-left: 5px;
  21.             box-sizing: border-box;
  22.             background-color: lightseagreen;
  23.             border-radius: 10px;
  24.             clear: both;
  25.             line-height: 1.5;
  27.         }
  29.         .action {
  30.             float: left;
  31.             box-sizing: border-box;
  32.             background-color: lightblue;
  33.             padding-left: 5px;
  34.             border-radius: 10px;
  35.             line-height: 1.5;
  36.             clear: both;
  37.         }
  39.         li {
  40.             list-style: none;
  41.         }
  42.     </style>
  43. </head>
  45. <body>
  46.     <form action='' name='comment' method='POST'>
  47.         <label for="content">请留言：</label>
  48.         <input type='text' name='content' id='content'>
  49.         <button>提交</button>
  50.         <div class='item'>
  51.             <ul></ul>
  52.         </div>
  54.     </form>
  55.     <ul></ul>
  56.     <div class="status">对方正在输入...</div>
  58.     <script>
  59.         // 获取表单
  60.         var form = document.forms['comment'];
  61.         // 获取ul
  62.         var ul = document.querySelector('ul');
  63.         // 获取div
  64.         var div = document.querySelector('.status');
  65.         // 问题和回答数组
  66.         var arrq = ["你好", "你叫什么", "你几岁了", "你叫什么", "你在哪里"];
  67.         var arra = ["你好哇", "我是小姐姐呀", "你问这个干什么", "嘤嘤酱", "我在你的内心深处"];
  69.         // 绑定事件
  70.         form.addEventListener('submit', function (ev) {
  71.             // 禁用表单的默认行为
  72.             ev.preventDefault();
  73.             // 获取input的值
  74.             var val = form.content.value.trim();
  75.             // 判断input是否为空
  76.             if (val.length != 0) {
  77.                 // 创建li
  78.                 var li = document.createElement('li');
  79.                 // 设置li内容
  80.                 li.innerHTML = val;
  81.                 // 给li设置class
  82.                 li.className = 'act1';
  83.                 // 把li添加到页面中
  84.                 ul.appendChild(li);
  85.                 // 添加完input清空并重新获取焦点
  86.                 form.content.value = "";
  87.                 form.content.focus();
  88.                 // 显示div
  89.                 div.style.display = "block";
  90.                 var vel = " ";
  91.                 // 获取问题数组的索引
  92.                 var index = arrq.indexOf(val);
  93.                 // 判断问题是否在问题数组中
  94.                 if (index >= 0) {
  95.                     // 存在则赋值
  96.                     vel = arra[index];
  97.                 } else {
  98.                     vel = '对不起回答不了您的问题';
  99.                 }
  100.                 // 创建回答li
  101.                 var ali = document.createElement('li');
  102.                 // 给回答li设置内容
  103.                 ali.innerHTML = vel;
  104.                 // 设置回答时间
  105.                 setTimeout(function () {
  106.                     ul.appendChild(ali);
  107.                     ali.className = "action";
  108.                     div.style.display = "none";
  109.                 }, 1000);
  110.             } else {
  111.                 alert("内容不能为空！");
  112.                 form.content.value = "";
  113.                 form.content.focus();
  114.             }
  115.         });
  118.     </script>
  119. </body>
  121. </html>

总结

1.了解了js的DOM操作和事件绑定
2.还需多敲代码熟记，编辑器没有提示时都不知怎么写了

上一条：选项卡案例（javacript原生代码）下一条：Laravel实现后台登录页面
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多