JavaScript知识点整理（十三）- DOM -（2）操作元素 - 案例练习

最新推荐文章于 2024-05-05 21:38:48 发布
最新推荐文章于 2024-05-05 21:38:48 发布
阅读量386 收藏 4
点赞数
分类专栏： JavaScript笔记 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JHY97/article/details/123121339
版权

目录

一、百度换肤效果

二、表格隔行变色

三、表单全选取消全选案例

四、自定义属性的操作

4.1 获取属性值

4.2 设置属性值

4.3 移除属性

4.5 案例练习 - tab栏切换（重点案例）

五、H5自定义属性

5.1 设置H5自定义属性

5.2 获取H5自定义属性

一、百度换肤效果

案例分析

  1. 给一组元素注册事件
  2. 给4个小图片利用循环注册点击事件
  3. 点击图片，把背景改为当前的图片
  4. 核心算法：把当前图片的src路径获取过来，给body作为背景即可
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: url(img/mao1.png) no-repeat center top;
            background-size: 100%;
        }
        li{
            list-style: none;
        }
        .baidu{
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
        .baidu li{
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        .baidu img{
            width: 100px;
        }
    </style>
    <ul class="baidu">
        <li><img src="img/mao1.png"></li>
        <li><img src="img/mao2.png"></li>
        <li><img src="img/mao3.png"></li>
        <li><img src="img/night.JPG"></li>
    </ul>
    <script>
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // 循环注册事件
        for(var i = 0; i < imgs.length; i++){
            imgs[i].onclick = function(){
                // 将this.scr赋值给body
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>

二、表格隔行变色

 案例分析：

  1. 用到鼠标事件 鼠标经过onmouseover  鼠标离开onmouseout
  2. 核心思路：鼠标经过tr行，当前行的改变背景颜色，鼠标离开去掉当前的背景颜色
    <style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        tbody tr {
            height: 30px;
        }
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        .bg {
            background-color: orange;
        }
    </style>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001234</td>
                <td>测试用基金</td>
                <td>1.7400</td>
                <td>1.7405</td>
                <td>1.7309</td>
                <td>+1.28%</td>
            </tr>
            <tr>
                <td>001234</td>
                <td>测试用基金</td>
                <td>1.7400</td>
                <td>1.7405</td>
                <td>1.7309</td>
                <td>+1.28%</td>
            </tr>
            <tr>
                <td>001234</td>
                <td>测试用基金</td>
                <td>1.7400</td>
                <td>1.7405</td>
                <td>1.7309</td>
                <td>+1.28%</td>
            </tr>
            <tr>
                <td>001234</td>
                <td>测试用基金</td>
                <td>1.7400</td>
                <td>1.7405</td>
                <td>1.7309</td>
                <td>+1.28%</td>
            </tr>
            <tr>
                <td>001234</td>
                <td>测试用基金</td>
                <td>1.7400</td>
                <td>1.7405</td>
                <td>1.7309</td>
                <td>+1.28%</td>
            </tr>
        </tbody>
    </table>
    <script>
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        for(var i = 0; i < trs.length; i++){
            // 鼠标经过事件 onmouseover
            trs[i].onmouseover = function(){
                this.className = 'bg';
            }
            // 鼠标离开事件 onmouseout
            trs[i].onmouseout = function(){
                this.className = '';
            }
        }
    </script>

三、表单全选取消全选案例

案例分析

  1. 全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随 全选按钮即可
  2. 下面复选框需要全部选中，上面全选才能选中的做法：给下面所有的复选框绑定事件，每次点击，都要循环查看下面所有复选框是否有没选中的，如果有一个没选中，上面的全选就不选中
  3. 可以设置一个变量，来控制全选是否选中
    <style>
        table {
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
        }
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        tbody tr {
            height: 30px;
        }
        tbody td {
            border-bottom: 1px solid #d7d7d7;
        }
    </style>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="cbAll">
                    </th>
                    <th>商品</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iPhone13</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iPad pro</td>
                    <td>4000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iPad Air</td>
                    <td>3000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var cbAll = document.getElementById('cbAll');
        var tbs = document.getElementById('tb').getElementsByTagName('input');
        cbAll.onclick = function(){
            for(var i = 0; i < tbs.length; i++){
                tbs[i].checked = this.checked;
            }
        }
        for(var i = 0; i < tbs.length; i++){
            tbs[i].onclick = function(){
                // 定义一个变量flag，用于控制全选按钮是否等于true
                var flag = true;
                for(var i = 0; i < tbs.length; i++){
                    if(!tbs[i].checked){
                        flag = false;
                    }
                }
                cbAll.checked = flag;
            }
        }
    </script>

四、自定义属性的操作

4.1 获取属性值

  • element.属性 获取属性值
  • element.getAttribute('属性')

区别：

  • element.属性 获取内置属性值（元素本身自带的属性）
  • element.getAttribute('属性')；主要获取得自定义的属性（标准）

4.2 设置属性值

  • element.属性= '值'  设置内置属性值
  • element.setAttribute('属性','值')

区别：

  • element.属性  设置内置属性值
  • element.setAttribute(''属性)；主要设置自定义的属性（标准）

4.3 移除属性

  • element.removeAttribute('属性')

4.5 案例练习 - tab栏切换（重点案例）

当鼠标点击上面相应的选项卡（tab），内容跟谁变化

案例分析：

  1. Tab栏切换有2个大模块
  2. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想）修改类名的方式
  3. 下面的模块内容，会跟随上面的选项卡变化
  4. 规律：下面的模块显示内容和上面的选项卡一一对应，相匹配
  5. 核心思路：给上面的tab_list里面的所有小li添加自定义属性，属性值从0开始编号
     <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .tab {
            padding: 100px;
        }
        .tab_list{
            width: 988px;
            border-bottom: 1px solid #e4393c;
            overflow: hidden;
            background-color: rgb(230, 225, 225);
        }
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #e4393c;
            color: #fff;
            cursor: default;
        }
        .item {
            display: none;
        }
    </style>
<div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（500）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（500）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>
        </div>
    </div>
    <script>
        var tab_list = document.querySelector('.tab_list');
        var list = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        for(var i = 0; i < list.length; i++){
            // 给5个小li设置索引号
            list[i].setAttribute('index', i);
            list[i].onclick = function(){
                // 其余的li清除 class这个类
                for(var i = 0; i < list.length; i++){
                    list[i].className = '';
                }
                this.className = 'current';
                var index = this.getAttribute('index');
                for(var i = 0; i <items.length; i++){
                    items[i].style.display = 'none';
                }
                items[index].style.display = 'block';
            }
        }
    </script>

五、H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute('属性')获取

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性

H5给我们新增了自定义属性：

5.1 设置H5自定义属性

H5规定自定义属性data开头做为属性名并且赋值

例如：<div data-index = '1'></div>

或者使用JS设置

element.setAttribute('data-index','1');

5.2 获取H5自定义属性

  1. 兼容性获取 element.getArribyte('data-index');
  2. H5 新增 element.dataset.index 或者 element.dataset['index'] ie 11 才开始支持，只能获取data开头的自定义属性
  3. dataset 是一个集合里面存放了所有以data开头的自定义属性；注意：如果自定义属性里面有多个-链接的单词，获取时采用驼峰命名法；例如：data-list-name = '1'，获取：element.dataset['listName']
JHY97
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Javascript标准DOM_Range操作 - 百度文库.doc
07-02
Javascript标准DOM_Range操作 - 百度文库.doc
JavaScript知识点整理（十三）- DOM -（2）操作元素
JHY97的博客
02-22 758
JavaScript的DOM操作可以改变页面内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。 一、改变元素内容 element.innerText 从其实位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉 element.innerHTML 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行 案例练习 - innerText - 点击按钮获取当前时间 <button>显示当前系统时间</bu.
JavaScript知识点整理（十三）- DOM -（3）节点操作
JHY97的博客
03-03 733
一、为什么学习节点操作 获取元素通常使用的两种方式： 1. 利用DOM提供的方法获取元素 document.getElementById() document.getElementsByTagName() document.quertSelector 等 逻辑性不强、繁琐 2. 利用节点层级关系获取元素 利用父子兄节点关系获取元素 逻辑性强，但兼容性稍差 二、节点概述 页面中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。 HTML DOM树中的所有节
JavaScript知识点整理（十三）- DOM -（1）简介、获取元素、事件基础
JHY97的博客
02-17 229
目录 一、DOM简介 1.1 什么是DOM 1.2 DOM树 二、获取元素 2.1 如何获取页面元素 2.2 根据ID获取 2.3 根据标签名获取 2.4 通过HTML5新增的方法获取 2.5 获取特数元素（body，html） 三、事件基础 3.1 事件概述 3.2 执行事件的步骤 3.3 常见的鼠标事件 一、DOM简介 1.1 什么是DOM 文档类型对象，是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口 W3C已经定义了一系列的DOM接口，通过这些
JavaScript知识点整理（十五）- BOM
JHY97的博客
03-15 1135
一、BOM概述 1.1 什么是BOM BOM 即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性 DOM： 文档对象模型 DOM就是把 文档 当作一个 对象 来看代 DOM的顶级兑现格式document DOM主要学习的是操作页面元素 DOM是W3C标准规范 BOM： 浏览器对象模型 把浏览器 当作一个 对象来看待 BOM的顶级对象是window BOM学习的是浏览器窗口交互的
JavaScript知识点整理（十四）- 事件
JHY97的博客
03-14 355
一、注册事件 1.1 注册事件概述 给元素添加事件，称为注册事件或者绑定事件 注册事件有两种反射光hi：传统方式和方法监听注册方式 传统注册方式 利用on 开头的事件，例如：onclick btn.onclick = function(){} <button onclick ="alter(...)"></button> 特点：注册事件的唯一性 同一个元素同一个事件只能设置同一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数 <button&g
javaScript知识点整理（BOM、DOM）
weixin_45947759的博客
09-03 462
JS语法页面文档对象模型浏览器对象模型JSECMAScriptDOMBOM DOM操作 1. 获取元素 1.1 getElementById() 注意： 可以打印返回的元素对象，更好的查看里面的属性和方法 1.3 getElementsByClassName() 类名选择器HTML5新增的返回指定选择器的第一个对象 1.5 querySelectorAll() 返回指定选择器的所有对象集合 用法和querySelector()一样获取body元素获取html元素JavaScript使我们有能力创建动态页面，
JavaScript核心知识第三章---BOM 浏览器对象模型（含大量代码分析）
最新发布
2401_84098058的博客
05-05 272
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-cLtpNUvH-1714916317697)]
03-JavaScript高级-函数知识点总结
qq_45052568的博客
06-17 391
学习目标: 理解面向对象开发思想 掌握 JavaScript 面向对象开发相关模式 掌握在 JavaScript 中使用正则表达式 typora-copy-images-to media JavaScript 高级 课程介绍 课程大纲 在线地址：JavaScript 高级 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XyZZSVCX-1575291392...
web前端练习27----Dom3,js操作css(class,内联样式,getComputedStyle)案例练习（列表刷新加载，二级菜单）
翟浩浩Android专栏
11-09 333
0.修改class(修改类选择器) 操作class就是修改元素对象的className 语法：元素对象.className='类选择器名称'; 代码示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie...
Javascript-DOM编程艺术研究.docx
11-17
Javascript-DOM编程艺术研究.docx
第十五章JavaScript-HTMLDOM对象2022优秀文档.ppt
11-14
第十五章JavaScript-HTMLDOM对象2022优秀文档.ppt
js-dom-fundamentals:JavaScript和DOM基础
05-18
JavaScript和DOM基础 如果您对JavaScript的基本知识充满热情，那么掌握它非常重要。 如果您具有扎实JavaScript基础知识，那么在开始使用新框架时，唯一需要熟悉的就是语法。 基本规则将是相同的，因为在所有抽象层下...
simple-dom:dom的基本元素
05-14
简单dom dom的基本元素 在进步...
基于Springboot的家具网站
趙兴晨的博客
05-03 575
本文介绍了一款基于现代Web技术构建的家具网站，旨在通过互联网技术优化家具产品的展示与销售，提高用户的购物体验，同时为家具制造商和零售商提供一个高效的在线销售平台。本研究的主要目的是设计并实现一个高效、易用的家具网站，通过系统化的产品展示流程和智能化的购物功能，提升家具产品的在线销售效率和管理水平。本研究通过设计和实现家具网站，有效地解决了传统家具销售中的展示局限性和购物效率低下的问题，提高了家具产品的在线销售效率和用户的购物体验，并为相关领域的研究和实践提供了有益的参考。
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
XING的博客
05-03 1262
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 485
注释很详细，直接上代码……
50个前端实战项目之04：隐藏的搜索小组件
前端开发博客
05-03 1129
大家好，我是宝哥。今天讲50个前端实战项目之04：隐藏的搜索小组件。源码下载地址https://github.com/bradtraversy/50projects50days/tree/master/hidden-search前端实战项目系列正在更新：04/5001：可展开卡片02：进度条03：旋转导航动画04：隐藏的搜索小组件项目介绍本项目演示了一个简洁实用的隐藏式搜索小部件。点击搜索按钮后，...
javascript学习手册十三：html dom——文档元素的操作（一）
06-28
### 回答1： HTML DOM（文档对象模型）是一种编程接口，允许程序访问和操作HTML文档中的元素。使用JavaScript来操作HTML DOM可以让网页具有交互性和动态性。 在JavaScript中，可以使用getElementById，getElementsByTagName和getElementsByClassName等方法来获取页面上的元素。例如，通过getElementById("myId")可以获取id为"myId"的元素。 操作元素的属性和内容也很简单，可以使用如下方法： - 修改元素的属性：element.attribute = new value - 访问元素的属性：element.attribute - 修改元素的内容：element.innerHTML = new content - 访问元素的内容：element.innerHTML 通过操作HTML DOM，可以实现各种交互效果和动态效果。例如，可以在点击按钮时显示或隐藏元素，或在输入框中输入文本时实时更新页面内容等。 ### 回答2： HTML DOM是JavaScript操作网页中元素和属性的主要方式之一。在HTML DOM中，文档元素是指HTML页面中所有元素的根节点。文档元素的操作包括获取元素、创建元素、删除元素、修改元素属性等。 获取元素是HTML DOM操作的重要一环。在JavaScript中，可以使用getElementById()、getElementsByTagName()、getElementsByClassName()等方法获得HTML页面中的元素。其中getElementById()方法可以通过元素的ID获取该元素的引用，常用于根据ID修改元素的属性或内容。而getElementsByTagName()方法可以通过标签名获取HTML页面中所有该标签的元素，例如获取所有的h1元素，常用于对整个页面的控制。getElementsByClassName()方法可以通过class属性获取HTML页面中所有具有该class的元素。 创建元素是向HTML页面中添加元素的重要方式。可以使用createElement()方法创建一个新元素，然后使用appendChild()方法将其添加到现有元素中。例如，创建一个新的p元素，并将其添加到body元素中可以使用以下代码： var newPara = document.createElement("p"); var textNode = document.createTextNode("This is a new paragraph."); newPara.appendChild(textNode); document.body.appendChild(newPara); 删除元素也是HTML DOM中的一个常用操作。可以使用removeChild()方法删除现有元素，例如： var parent = document.getElementById("parent-id"); var child = document.getElementById("child-id"); parent.removeChild(child); 修改元素属性是HTML DOM中的另一个核心操作。可以使用setAttribute()方法修改元素的属性值，例如： var element = document.getElementById("my-id"); element.setAttribute("class", "new-class"); 可以通过HTML DOM操作文档元素，实现对页面元素和属性的各种操作。掌握HTML DOM的知识，可以更好地控制和管理HTML页面。 ### 回答3： HTML DOM是JavaScript操作网页元素的主要方式之一，它的核心在于文档对象模型（DOM，Document Object Model），需要熟悉DOM才能灵活操作网页元素。文档元素是HTML页面中的根元素，它是其他所有元素的祖先元素，也是HTML DOM操作的基础。 一、获取元素 在JavaScript中，我们可以通过各种方式来获取文档元素，例如getElementById()、getElementsByTagName()、getElementsByClassName()等。其中，通过id、标签名和类名获取元素是最常用的三种方法。 1. getElementById() 此方法用于获取具有指定id属性的元素，其语法为document.getElementById(id)。id属性在整个HTML文档中应该是唯一的。 示例：获取id为“demo”的元素 ``` var demo = document.getElementById("demo”); ``` 2. getElementsByTagName() 此方法用于获取具有指定标签名的元素，其语法为document.getElementsByTagName(tagname)。 示例：获取所有p元素 ``` var pList = document.getElementsByTagName("p"); ``` 3. getElementsByClassName() 此方法用于获取具有指定类名的元素，其语法为document.getElementsByClassName(classname)。 示例：获取类名为“red”的元素 ``` var redList = document.getElementsByClassName("red"); ``` 二、改变元素 有很多种方法可以改变文档元素的属性和样式，下面列举一些常见的方法： 1. 修改元素的文本内容 我们可以通过innerHTML属性和innerText属性来修改元素的文本内容。 innerHTML属性用于改变元素的HTML内容，其语法为element.innerHTML=new html content； innerText属性用于改变元素的纯文本内容，其语法为element.innerText=new text content； 2. 修改元素的样式 我们可以通过style属性来修改元素的样式，其中style属性包含了元素的所有样式属性。 示例：将id为“demo”的元素背景色改为红色 ``` document.getElementById("demo").style.backgroundColor = "red"; ``` 3. 创建新元素 我们可以使用document.createElement()方法来创建新元素，并通过appendChild()方法将其加入到指定的元素内。 示例：创建一个新的p元素 ``` var newP = document.createElement("p"); ``` 4. 删除元素 我们可以使用parentNode.removeChild()方法来删除指定的元素。 示例：删除id为“demo”的元素 ``` var demo = document.getElementById("demo"); demo.parentNode.removeChild(demo); ``` 三、总结 通过这篇文章的学习，我们了解了HTML DOM的基础知识和基本操作方法，例如获取元素、改变元素的属性和样式以及创建和删除元素等。掌握这些操作方法可以帮助我们更好地操作网页元素，从而实现丰富多彩的网页效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JHY97

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值