search

博客列表 >front 19 DOM选择、添加、删除（0813thu）

front 19 DOM选择、添加、删除（0813thu）

老黑
老黑原创
2020年08月20日 21:19:39485浏览

主要内容：

  1. 查看DOM对象
  2. 选择、获取DOM对象（标签、id、class、querySelector、querySelectorAll）
  3. nodelist：child、parent
  4. DOM元素的动态添加与删除
  5. 事件，及一个典型的ToDoList操作

1. DOM基本知识 （DOM与事件）

1-1. DOM

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

1-2. 获取 DOM 元素

  • 标签: document.getElementsByTagName()
  • ID: document.getElementById()
  • class: document.getElementsByClassName()
  • API（推荐用）: document.querySelector() / document.querySelectorAll()

1-3. 节点与元素集合

  • NodeList: 所有类型的节点集合,包括了元素,文本,注释,片断,文档,属性…
  • HTMLColletion: HTML 元素的节点集合 NodeList > HTMLCollection, 是 NodeList 一个子集

1-4. 元素的新增,删除

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

1-5. 事件

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

2. 查看DOM对象

    1. 节点是dom中的最小单元
    1. 节点有: 元素, 文本节点, 注释节点, 片断节点, 文档节点
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <title>dom对象</title>
  5.   </head>
  6.   <body>
  7.     <!-- 我们的网站 -->
  8.     <h3>hello php.cn</h3>
  9.     <p>大家晚上好呀</p>
  10.     <script>
  11.       // 文档节点
  12.       console.log(document);
  13.       // 节点类型
  14.       console.log(document.nodeType);
  15.       // 节点名称
  16.       console.log(document.nodeName);
  17.       // 节点的值
  18.       console.log(document.nodeValue);
  20.       // 查看文档类型
  21.       console.log(document.doctype);
  22.       // 根节点<html>
  23.       console.log(document.documentElement);
  24.       // 头元素
  25.       console.log(document.head);
  26.       // 标题
  27.       console.log(document.title);
  28.       // 主体
  29.       console.log(document.body);
  30.       document.body.style.backgroundColor = "yellow";
  31.     </script>
  32.   </body>
  33. </html>

3. 选择、获取DOM对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <title>如何获取页面元素</title>
  5.   </head>
  6.   <body>
  7.     <div id="list">
  8.       <ul class="poster">
  9.         <li name="active">战胜疫情, 指日可待</li>
  10.         <li>全民动员, 支持国家</li>
  11.         <li>我宅家,我骄傲,我为国家省口罩</li>
  12.       </ul>
  13.     </div>
  15.     <!-- <div id="list">hello</div>
  16.     <div id="list">world</div> -->
  18.     <script>
  19.       // 1. 标签: 返回的是一个元素对象的集合
  20.       var ul = document.getElementsByTagName("ul");
  21.       //   console.log(ul);
  22.       //   console.log(ul[0]);
  23.       //   console.log(ul.item(0));
  24.       // 以上三者的结果是一样的，因为只有一个ul
  26.       // 2. id: 只返回具有指定id的第一个元素(唯一)
  27.       var list = document.getElementById("list");
  28.       //   console.log(list);
  29.       // id的替代语法
  30.       var div = document.getElementsByTagName("div");
  31.       //   在返回的div集合中, 选择具有'list'这个标识符的div
  32.       //   namedItem(id)
  33.       console.log(div.namedItem("list"));
  34.       console.log(div.namedItem("list") === list);
  35.       //   namedItem(name)
  36.       var lis = document.getElementsByTagName("li");
  37.       console.log(lis);
  38.       console.log(lis.namedItem("active"));
  40.       // 这个很管用，下面是链式获取，并进行格式属性修改。
  41.       var active = document.getElementsByTagName("li").namedItem("active");
  42.       console.log(active);
  43.       active.style.color = "red";
  45.       //   在元素级别调用以上的api方法来获取元素
  46.       var lis = ul.item(0).getElementsByTagName("li");
  47.       console.log(lis);
  49.       lis.namedItem("active").style.backgroundColor = "yellow";
  51.       // 3. class, 返回一个html集合
  52.       var poster = document.getElementsByClassName("poster");
  53.       console.log(poster);
  54.       poster.item(0).style.border = "1px solid";
  56.       // 4. 推荐使用下面的方式
  57.       // querySelector(css选择器): 获取满足条件的集合中的第一个元素(类似于id)
  58.       // querySelectorAll(css选择器): 获取满足条件的全部元素组成的集合
  59.       var div = document.querySelector("#list");
  60.       console.log(div);
  61.       var li = document.querySelector("#list li");
  62.       var li = document.querySelector("#list li:nth-of-type(2)");
  63.       var li = document.querySelector("#list li:last-of-type");
  64.       console.log(li);
  66.       // 获取多个
  67.       var lis = document.querySelectorAll(".poster > *");
  68.       // 这个地方返回的是nodelist节点列表，而非数组。
  69.       console.log(lis);
  70.       console.log(lis.item(2));
  71.       lis.item(2).style.backgroundColor = "green";
  72.     </script>
  73.   </body>
  74. </html>

4. node及nodelist：child、parent

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <title>node, nodelist</title>
  5. </head>
  7. <body>
  8.   <div id="box">
  9.     <h2>JavaScript</h2>
  10.     <p>通用前端脚本语言</p>
  11.     <li>学习让我感到很充实</li>
  12.   </div>
  13.   <p><a href="https://www.php.cn">PHP中文网</a></p>
  15.   <script>
  16.     // 页面元素返回类型: HTMLCollection,NodeList
  18.     var div = document.querySelector("div");
  19.     console.log(div.childNodes);
  20.     // nodeType = 3: 文本节点
  21.     // console.log(div.childNodes.item(0).nodeType);
  22.     // nodeType = 1: 元素节点
  23.     // console.log(div.childNodes.item(1).nodeType);
  25.     // 过滤掉节点集合中的非元素节点
  26.     for (var i = 0; i < div.childNodes.length; i++) {
  27.       var currentNode = div.childNodes.item(i);
  28.       if (currentNode.nodeType === 1) {
  29.         console.log(currentNode.tagName.toLowerCase());
  30.       }
  31.     }
  33.     // chirdren: 只返回父节点中的元素子节点
  34.     console.log(div.children);
  35.     console.log(div.firstChild); // #text, 文本节点
  37.     // 如果只想获取第一个子元素级的节点
  38.     console.log(div.firstElementChild);
  39.     console.log(div.lastElementChild);
  40.     console.log(div.children.item(1));
  42.     var li = document.querySelector('li');
  43.     console.log(li.parentNode);
  45.     // 充当父节点永远不可能是文本或属性,只能是元素或文档
  46.     console.log(li.parentElement);
  47.     console.log(li.parentElement === li.parentNode);
  48.     // 这两个的意思其实是相同的。
  49.   </script>
  50. </body>
  52. </html>

5. DOM元素的动态添加与删除

  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>元素的动态添加与删除</title>
  8. </head>
  10. <body>
  11.     <ul></ul>
  13.     <script>
  14.         // 创建元素并添加到页面中
  15.         var h2 = document.createElement('h2');
  16.         // 给元素添加内容
  17.         h2.innerText = '大家辛苦了';
  18.         // 如果添加的内容带有html标签
  19.         // h2.innerText = '大家<span style="color:red">辛苦了</span>';
  20.         h2.innerHTML = '大家<span style="color:red">辛苦了</span>';
  22.         // 添加到页面中, 必须在父节点上面进行添加
  23.         document.body.appendChild(h2);
  25.         // 添加多个
  26.         var ul = document.querySelector('ul');
  28.         // for (var i = 0; i < 10; i++) {
  29.         //     var li = document.createElement('li');
  30.         //     li.innerText = '列表项 ' + (i + 1);
  31.         //     ul.appendChild(li);
  32.         // }
  34.         // 为防止每添加一个元素导致页面dom树重新渲染一次
  35.         // 借助文档片断来解决这个问题
  36.         // 先创建一个临时文档片断
  37.         var frag = document.createDocumentFragment();
  39.         // 将生成的10个li添加到内存中的这个文档片断节点中
  40.         for (var i = 0; i < 10; i++) {
  41.             var li = document.createElement('li');
  42.             li.innerText = '列表项 ' + (i + 1);
  43.             frag.appendChild(li);
  44.         }
  45.         // 将这个文档片断一次性添加到页面, 此时页面只会渲染一次
  46.         ul.appendChild(frag);
  47.     </script>
  48. </body>
  50. </html>

6. 事件基础

  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>事件基础</title>
  8. </head>
  10. <body>
  11.     <!-- 将事件作为元素的一个特殊属性添加到元素上面,用 on为前缀 -->
  12.     <button onclick="alert(this.firstChild.nodeValue)">点击我</button>
  13.     <button>点我试试看</button>
  15.     <a href="https://php.cn">php中文网</a>
  17.     <script>
  18.         // 获取第二个按钮
  19.         var btn = document.querySelector('button:nth-of-type(2)');
  21.         // 绑定事件
  22.         // addEventListener(type, callback, false)
  23.         // 鼠标移入事件: mouseover
  24.         btn.addEventListener('mouseover', function (ev) {
  25.             // console.log(ev.target);
  26.             // ev.target: 触发事件的对象
  27.             // console.log(this === ev.target);
  28.             ev.target.style = 'width:100px;height:50px;background: lightgreen;outline:none;border:none';
  29.         }, false);
  31.         // 鼠标移出事件: mouseout
  32.         // btn.addEventListener('mouseout', function (ev) {
  33.         //     // console.log(ev.target);
  34.         //     // ev.target: 触发事件的对象
  35.         //     // console.log(this === ev.target);
  36.         //     ev.target.style = 'none';
  37.         // }, false);
  39.         // 获取链接
  40.         var link = document.links.item(0);
  41.         link.onclick = function (ev) {
  42.             // 禁止原对象的默认行为
  43.             ev.preventDefault();
  45.             btn.style = 'none';
  46.         };
  47.     </script>
  48. </body>
  50. </html>

7. 实战-经典的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. </head>
  10. <body>
  11.     <form action="" name="comment" method="post" onsubmit="return false">
  12.         <label for="content">请留言:</label>
  13.         <input type="text" name="content">
  14.         <button>提交</button>
  15.     </form>
  16.     <ul></ul>
  18.     <script>
  19.         // 获取表单
  20.         var form = document.forms.namedItem('comment');
  21.         // 获取留言区
  22.         var ul = document.querySelector('ul');
  24.         // 监听表单的提交事件
  25.         form.addEventListener('submit', function (ev) {
  26.             // 禁止原对象的默认行为
  27.             ev.preventDefault();
  28.             // console.log('事件被监听到了');
  30.             // 1. 创建一条新留言
  31.             var li = document.createElement('li');
  33.             // form.content.value: 留言板内容
  34.             if (form.content.value.trim().length === 0) {
  35.                 alert('内容不能为空');
  36.                 // 留言框重新获取焦点
  37.                 form.content.focus();
  38.                 return false;
  39.             } else {
  40.                 li.innerHTML = form.content.value;
  41.             }
  43.             // 将留言添加到列表中
  44.             // 将最新留言放在最前面显示
  45.             // 当留言板为空的时候，直接插入,否则就插入到新一条留言之前
  46.             if (ul.childElementCount === 0) {
  47.                 ul.appendChild(li);
  48.             } else {
  49.                 // insertBefore(要插入的元素, 插入的位置)
  50.                 ul.insertBefore(li, ul.firstElementChild);
  51.             }
  52.             // 清空留言框
  53.             form.content.value = null;
  54.             form.content.focus();
  55.         }, false);
  56.     </script>
  57. </body>
  59. </html>

8. 实战：添加了删除功能的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-Plus:添加delete功能</title>
  8. </head>
  10. <body>
  11.     <form action="" name="comment" method="post" onsubmit="return false">
  12.         <label for="content">请留言:</label>
  13.         <input type="text" name="content">
  14.         <button>提交</button>
  15.     </form>
  16.     <ul></ul>
  18.     <script>
  19.         // 获取表单
  20.         var form = document.forms.namedItem('comment');
  21.         // 获取留言区
  22.         var ul = document.querySelector('ul');
  24.         // 监听表单的提交事件
  25.         form.addEventListener('submit', function (ev) {
  26.             // 禁止原对象的默认行为
  27.             ev.preventDefault();
  28.             // console.log('事件被监听到了');
  30.             // 1. 创建一条新留言
  31.             var li = document.createElement('li');
  33.             // form.content.value: 留言板内容
  34.             if (form.content.value.trim().length === 0) {
  35.                 alert('内容不能为空');
  36.                 // 留言框重新获取焦点
  37.                 form.content.focus();
  38.                 return false;
  39.             } else {
  40.                 li.innerHTML = form.content.value + '<a href="" onclick="del(this)">删除</a>';
  41.             }
  43.             // 将留言添加到列表中
  44.             // 将最新留言放在最前面显示
  45.             // 当留言板为空的时候，直接插入,否则就插入到新一条留言之前
  46.             if (ul.childElementCount === 0) {
  47.                 ul.appendChild(li);
  48.             } else {
  49.                 // insertBefor(要插入的元素, 插入的位置)
  50.                 ul.insertBefore(li, ul.firstElementChild);
  51.             }
  53.             // 清空留言框
  54.             form.content.value = null;
  55.             form.content.focus();
  56.         }, false);
  58.         function del(ele) {
  59.             // 禁止原对象的默认行为
  60.             this.event.preventDefault();
  61.             // console.log(ele.parentElement);
  62.             // removeChild()删除子节点
  64.             // if (confirm('是否删除?')) {
  65.             //     ul.removeChild(ele.parentElement);
  66.             // }
  67.             return confirm('是否删除?') ? ul.removeChild(ele.parentElement) : false;
  68.         }
  69.     </script>
  70. </body>
  71. </html>

9. 作业

  1. 实例演示获取页面元素的5种方式（操作了下，基本的东西懂了，后面就看怎么传数据）
  2. [选做]:
    按自己理解重写课堂上的: todolist案例, 实现一个简单的在线客服系统,做一个留言与自动回复功能, 自动回复可以创建一个数组,内置一些写好的文本, 随机打乱输出即可, 试试看
上一条：JSONP案例ID获取商品信息下一条：laravel--对接腾讯云短信接口
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多