超市清单:使用DOM选择器的简单超市清单
![preview](https://csdnimg.cn/release/downloadcmsfe/public/img/white-bg.ca8570fa.png)
![preview-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/scale.ab9e0183.png)
在JavaScript的世界里,DOM(Document Object Model)是一个关键的概念,它代表了HTML或XML文档的结构化表示。DOM选择器是用于从文档中选取特定元素的工具,它们在创建交互式网页时尤其有用。在这个“超市清单”项目中,我们将会深入探讨如何利用DOM选择器来实现一个简单的功能应用。 DOM选择器允许我们精确地定位到HTML页面中的任何元素。常见的DOM选择器有: 1. **ID选择器**: 通过元素的唯一ID来选取元素,例如`#myID`。 2. **类选择器**: 通过元素的类名来选取元素,例如`.myClass`。 3. **标签选择器**: 通过元素的标签名来选取元素,例如`div`,`p`,`a`等。 4. **组合选择器**: 可以将多个选择器组合起来,如`h1+p`会选择所有紧跟在`<h1>`元素后的`<p>`元素。 5. **后代选择器**: 使用空格分隔,如`div p`会选择所有在`div`元素内的`p`元素。 6. **子元素选择器**: 使用`>`分隔,如`div > p`会选择`div`元素的直接子元素`p`。 7. **相邻兄弟选择器**: 使用`+`分隔,如`div + p`会选择紧邻在`div`元素之后的`p`元素。 8. **通用选择器**: `*`可以选取页面上的所有元素。 在超市清单的应用中,我们可能需要操作的元素包括: - 清单项(如`<li>`元素) - 添加按钮(如`<button>`元素,用于添加新的清单项) - 删除按钮(同样为`<button>`元素,用于移除已存在的清单项) 利用这些选择器,我们可以编写JavaScript代码来监听用户交互,例如点击事件,然后动态地添加、删除或者更新页面上的元素。例如: ```javascript // 获取清单元素 const checklist = document.querySelector('#checklist'); // 监听添加按钮点击事件 document.querySelector('#addButton').addEventListener('click', function() { // 创建新清单项 const newItem = document.createElement('li'); // 添加文本内容 newItem.textContent = '新商品'; // 添加删除按钮 const deleteButton = document.createElement('button'); deleteButton.textContent = '删除'; deleteButton.addEventListener('click', function() { // 删除该清单项 newItem.remove(); }); newItem.appendChild(deleteButton); // 将新清单项添加到页面 checklist.appendChild(newItem); }); ``` 此外,我们还可以使用CSS样式来美化这些元素,使界面更加用户友好。例如,我们可以设置按钮的背景色、边框、字体大小等属性,或者使用媒体查询来实现响应式设计,确保在不同设备上都能良好显示。 总结来说,这个“超市清单”项目是一个很好的实践平台,可以帮助我们掌握DOM选择器的用法,并将其应用于实际的网页开发中。通过这样的练习,我们可以提升JavaScript编程技巧,理解前端开发中元素操作的重要性,以及如何通过与用户的交互来改变页面状态。在实际工作中,这些技能对于构建动态、交互丰富的Web应用程序至关重要。
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![package](https://csdnimg.cn/release/downloadcmsfe/public/img/package.f3fc750b.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/HTML.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
- 1
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 17
- 资源: 4614
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)