微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > front 19 DOM选择、添加、删除（0813thu）
博主信息
博文 62
粉丝 2
评论 1
访问量 58161
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
front 19 DOM选择、添加、删除（0813thu）
老黑
原创
658人浏览过

主要内容：

  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案例, 实现一个简单的在线客服系统,做一个留言与自动回复功能, 自动回复可以创建一个数组,内置一些写好的文本, 随机打乱输出即可, 试试看
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：编程之前,先做一个大致的规划,写出架构再动手, 会好很多的
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录