JavaScript中的DOM（二）

最新推荐文章于 2022-11-12 10:25:59 发布
原创 最新推荐文章于 2022-11-12 10:25:59 发布 · 427 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文详细介绍了在HTML5中如何利用排他思想实现按钮背景切换、鼠标悬停效果，并讲解了属性操作，包括获取和设置内置与自定义属性，以及移除属性。此外，还展示了如何在Tab栏切换中运用这些技巧，以及H5中自定义属性的正确使用和获取方法。

DOM（二）

目录

一、排他操作

1、排他思想简介
排他思想，简单理解就是排除掉其他的（包括自己），然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除与设置当前元素
案例1演示：在同一组元素中，想要某一个元素实现某种样式，使用循环的排他思想算法来实现
⑤编写HTML结构代码

<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
</body>

②编写JS代码，单击按钮，改变当前按钮背景色

<script>
  // 1. 获取所有按钮元素， btns得到的是类数组对象
  var btns = document.getElementsByTagName('button');
  for (var i = 0; i < btns.length; i++) { // 里面的每一个元素btns[i]
     btns[i].onclick = function () {
      for (var i = 0; i < btns.length; i++) { // (1) 先把所有的按钮背景颜色去掉
        btns[i].style.backgroundColor = '';
      }
      this.style.backgroundColor = 'pink'; // (2) 然后设置当前的元素背景颜色
    }
  }

案例2：鼠标经过时背景变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .bg{
        background-color: blueviolet;
    }
</style>
<body>
    <table border="1" align="center">
        <thead>
            <tr>
                <th width='80'>代码</th>
                <th width='100'>名称</th>
                <th width='100'>最新公布净值</th>
                <th width='100'>累计净值</th>
                <th width='100'>前单位净值</th>
                <th width='100'>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <td>002143</td>
                <td>定期开放债券</td>
                <td>1.352</td>
                <td>1.962</td>
                <td>1.306</td>
                <td>+0.353%</td>
            </tr>
            <tr align="center">
                <td>002143</td>
                <td>定期开放债券</td>
                <td>1.352</td>
                <td>1.962</td>
                <td>1.306</td>
                <td>+0.353%</td>
            </tr>
            <tr align="center">
                <td>002143</td>
                <td>定期开放债券</td>
                <td>1.352</td>
                <td>1.962</td>
                <td>1.306</td>
                <td>+0.353%</td>
            </tr>
            <tr align="center">
                <td>002143</td>
                <td>定期开放债券</td>
                <td>1.352</td>
                <td>1.962</td>
                <td>1.306</td>
                <td>+0.353%</td>
            </tr>
        </tbody>
    </table>

    <script>
        var trs = document.querySelector('tbody').querySelectorAll('tr')    //获取tbody下的所有行
        for(var i = 0;i < trs.length;i++){
            trs[i].onmouseover = function(){
                this.className = 'bg';
            }
            trs[i].onmouseout = function(){
                this.className = '';
            }
        }
    </script>
</body>
</html>

二、属性操作

1、获取属性值

  • 获取元素的内置属性值：element.属性 或 getAttribute(‘属性’)
  • 获取元素的自定义属性值：getAttribute(‘属性’)
<body>
    <p id="p1" class="ps" value='asda' title="asf">邮电大学</p>
    <script>
        var pt = document.querySelector('p')
        console.log(pt.id)
        console.log(pt.title)
        console.log(pt.getAttribute('value'))
        console.log(pt.getAttribute('class'))
        console.log(pt.getAttribute('id'))
    </script>
</body>

2、设置属性值

  • 设置内置属性的值：element.属性 = 值
  • 设置自定义属性的值：setAttribute(‘属性’,‘值’)
<body>
  <div></div>
  <script>
    var div = document.querySelector('div');
    div.id = 'test';                        // 设置id值为test
    div.className = 'navs';        // 设置class类名为navs
    div.setAttribute('index', 2);  // 设置属性名为index，值为2
  </script>
</body>

另外，也可以使用setAttribute()方式设置元素的类名

div.setAttribute('class', 'footer');//class为类名，footer为属性名

3、移除属性值：element.removeAttribute(‘属性’)

<style>
    .tt{
        width: 100px;
        height: 100px;
        background-color: blue;
        color: chartreuse;
    }
</style>
<body>
    <div class="tt">万里长城</div>
    <button id="btn">移除属性</button>
    <script>
        var dt = document.querySelector('div')
        // dt.id = 'd1'
        // // dt.className = 'df'
        // dt.setAttribute('index','3')
        // dt.setAttribute('class','tt')
        btn.onclick = function(){
            dt.removeAttribute('class')
        }
    </script>
</body>

4、案例：Tab栏切换
标签栏在网站中的使用非常普遍，它的优势在于可以在有限的空间内展示多块的内容，用户可以通过标签在多个内容块之间进行切换

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      li {
        list-style-type: none;
      }

      .tab {
        width: 978px;
        margin: 100px auto;
      }

      .tab_list {
        height: 39px;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
      }

      .tab_list li {
        float: left;
        height: 39px;
        line-height: 39px;
        padding: 0 20px;
        text-align: center;
        cursor: pointer;
      }

      .tab_list .current {
        background-color: #c81623;
        color: #fff;
      }

      .item_info {
        padding: 20px 0 0 20px;
      }

      .item {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="tab">
      <div class="tab_list">
        <ul>
          <li class="current">商品介绍</li>
          <li>规格与包装</li>
          <li>售后保障</li>
          <li>商品评价（50000）</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">商品评价（50000）模块内容</div>
        <div class="item">手机社区模块内容</div>
      </div>
    </div>
    <script>
      // 获取标签部分的所有元素对象
      var tab_list = document.querySelector('.tab_list');
      var lis = tab_list.querySelectorAll('li');
      // 获取内容部分的所有内容对象
      var items = document.querySelectorAll('.item');
      for (var i = 0; i < lis.length; i++) {	// for循环绑定点击事件
        lis[i].setAttribute('index', i);		// 开始给5个小li设置索引号
        lis[i].onclick = function () {
          for (var i = 0; i < lis.length; i++) {
            lis[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>
  </body>
</html>

三、H5中自定义属性

HTML5新增了自定义属性的规范，在HTML5中规定通过“data-属性名”的方式设置自定义属性

<div data-index='2'></div> -->H5的写法,'data-'是自定义属性的前缀，便于区分自定义属性和内置属性
<div id="dt" index='2'></div>  -->H5以前版本的写法

1、设置属性值
元素对象名.dataset.属性名 = 值
元素的“data-*”自定义属性有两种设置方式，分别如下
①在HTML中设置自定义属性

// 在div元素上设置data-index属性
<div data-index="2"></div>   //data-表示前缀，index是自己定义的属性名

②在JavaScript中设置自定义属性
在JavaScript代码中，可以通过setAttribute(‘属性’, 值)或者“元素对象.dataset.属性名=‘值’”两种方式设置自定义属性。需要注意的是，通过后者的方式只能设置以“data-”开头的自定义属性

<body>
    <div class="div" data-index="5"></div>
    <div id="pt" getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var dt = document.querySelector('.div')
        var pt = document.querySelector('#pt')

        dt.dataset.name = '张三'    //自定义属性data-name
        // dt.setAttribute('data-index','2')      //自定义属性data-index
        console.log(dt.dataset.index)
        console.log(pt.dataset['index'])
    </script> 
</body>

2、获取属性值

  • 对象名.dataset.属性（有兼容性问题）
  • 对象名.dataset[‘属性’]（有兼容性问题）
  • getAttribute(‘属性’)
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
  var div = document.querySelector('div');
  console.log(div.getAttribute('data-index'));       // 结果为：2
  console.log(div.getAttribute('data-list-name')); // 结果为：andy
  // HTML5新增的获取自定义属性的方法，只能获取“data-”开头的属性
  console.log(div.dataset); // DOMStringMap {index:"2",listName:"andy"}
  console.log(div.dataset.index);           // 结果为：2
  console.log(div.dataset['index']);        // 结果为：2
  console.log(div.dataset.listName);      // 结果为：andy
  console.log(div.dataset['listName']);  // 结果为：andy
</script>

注：dataset是一个集合，里面存放了所有以data开头的自定义属性，如果自定义属性里面包含有多个连字符（-）时，获取的时候采取驼峰命名法

标签
#bom #javascript
JavaScript【排他思想及其优化】
Coding
04-02 2140
JavaScript【排他思想及其优化】
Web APIs第02天笔记——排他思想、自定义属性操作、节点操作
m0_55879104的博客
08-14 531
/ 1. 获取元素的属性值 // (1) element.属性 console . log(div . id);//(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index console . log(div . getAttribute('id'));自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。............
JavaScript之排他思想详述
m0_48375854的博客
11-25 4253
在前面的博客中，小熊更新了相关操作元素的方法，但是如果有同一组元素，我们想要某一个元素实现某种样式，这时需要怎么办呢？ 这里就要用到循环的排他思想。 排他思想的算法就是： 排除掉其他的（包括自己），然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除与设置当前元素。 可以简单理解为： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 需要注意的是：这里的顺序不能颠倒。 比如，页面有五个按钮，我们想要给它实现循环点击事件：当点到哪个按钮，就让哪个按钮变
编程思维---排他思想
m0_73596760的博客
10-13 1871
JS 排他思想
排他思想(算法)
休思_J的博客
05-29 5307
排他思想(算法) 给一组相同的元素添加相同的事件，利用for循环来实现。 代码验证 <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> // 1.
Javascript中的DOM(二) DOM中的对象类型
dreamingbaobei的博客
07-03 657
HTML DOM 对象类型 document对象 每个载入浏览器的 HTML 文档都会成为 Document 对象。document对象是HTML文档的根节点，可以使我们从脚本中对HTML页面中的所有元素进行访问。Document 对象是宿主对象，Window 对象的一部分，可通过 window.document 属性对其进行访问,因为window是全局对象，也可用document直接访问docu...
js—— DOM中的node类型（二）
weixin_30430169的博客
08-19 122
DOM中的node类型 DOM1中定义了一个Node接口，这个接口在js中作为Node类型实现，除IE外，其他浏览器都可以访问到这个类型。Js中所以节点类型都继承自Node类型，节点类型都享有共同的·基本属性和方法。 每个节点都有nodeType属性，表明节点类型，由12个常量表示，任何节点必居其一。 Node.ELEMENT_NODE 1 元素节点 Node.ATTRIBUTE...
从零开始的JS生活（二）——BOM、DOM与JS中的事件
u011927449的博客
06-23 449
上回书说道，JS中变量、运算符、分支结构、循环和嵌套循环等内容。本回就由本K给大伙唠唠JS中的BOM、DOM和事件。 一、“花心大萝卜”——BOM 1、震惊，FFF团为何对BOM举起了火把——BOM简介 BOM(Browser Object Model) 是指浏览器对象模型，在JS中BOM是个不折不扣的花心大萝卜，因为它有很多个对象，其中代表浏览器窗口的Window对象是BOM的“正室”、也就是最重要的，其他对象都是正室的下手、或者叫侧室也不足为过。 2、细数BOM的那些风流——BOM对象详解 2...
JS学习之DOM及案例
huangql517的博客
05-28 2168
1&gt;DOM简介    当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model，简称DOM）。    即当浏览器载入HTML文档时, 它就会成为DOM对象，而在JS中，所有的事物都是节点，    元素、文本等都是节点。可以通过节点进行DOM对象的增删改查。    既然HTML在被浏览器加载时会对应的生成DOM对象，而JS又可以通过节点来操作DOM，所以，JS...
JavaWeb (二) js中的事件与DOM 模型
喜欢历史的码农
09-22 288
一、JS 事件 1、什么是时间？ 事件是电脑输入设备与页面进行交互的响应。我们称之为事件。 常用的事件： onload 加载完成事件 常用于页面被浏览器加载完成之后自动做一些初始化工作. onclick 单击事件 常用于按钮被单击之后的响应工作 onblur 失去焦点时间 常用于输入框失去焦点后，验证其中的内容是否合法 onc...
《JavaScript+DOM编程艺术》的摘要（二）---DOM中的几个方法
dfc16711的博客
07-16 123
//DOM： //对象是一种独立的数据集合，与某个特定对象相关联的变量被称为这个对象的属性，通过某个特定对象可以为之调用的函数被称为这个对象的方法 // //4个非常实用的DOM方法： //检索特定元素节点的方法： //document.getElementById:与document相关联的函数，在脚本代码里，函数后面必须跟有一组圆括号 //document.g...
JavaScript系列（二）---JavaScript中的BOM和DOM知识汇总
UtopiaOfArtoria的博客
10-19 489
BOM和DOM的简介 JavaScript是一种网络脚本（客户端）语言，实际上包含了三部分的内容：ECMAScript，BOM和DOM。 ECMAScript，描述该语言的语法和对象； 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口； 文档对象模型（DOM），描述处理网页内容的方法和接口。 BOM汇总 BOM（浏览器对象模型）提供了很多东西（对象），用于访问浏览器的功能，这些对象与...
JavaScript——DOM事件
Abby_zzy的博客
03-16 335
事件对用户操作做出反应： 1.当用户点击鼠标时 2.当网页已加载时 3.当图像已加载时 4.当鼠标移动到元素上时 5.当输入字段被改变时 6.当提交 HTML 表单时 7.当用户触发按键时 DOM事件-使用方法 方法一： &lt;h1 onclick="this.innerHTML='谢谢!'"&gt;请点击该文本&lt;/h1&gt; 方法二（从事件处理器调用一个函数）： &lt;!DOCTY...
JavaScript学习二——DOM基础
qq_57985179的博客
10-03 896
一、什么是DOM DOM（全称 Document Object Model），即文档对象模型。通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。包括以下能力：改变页面中的所有 HTML 元素、改变页面中的所有 HTML 属性、改变页面中的所有 CSS 样式、对页面中的所有事件做出反应。 （1）查找 HTML 元素 通过 JavaScript，我们可以操作 HTML 元素。 1、通过 id 找到 HTML 元素 在 DOM 中查找 HTML 元素的最简....
JavaScript包括三块：ECMAScript、DOM、BOM
qq_45554909的博客
12-21 876
1、JavaScript包括大块： ECMAScript： JS的核心语法（ES规范 / 是ECMA制定的262标准），JavaScript和JScript都遵守这个标准，ECMAScript是JavaScript核心语法 DOM： Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程。HTML文档被当做一棵DOM树来看待。编程是通过JavaScript对HTML中的dom节点进行操作，DOM是有规范的，DOM规范是W3C制定的。 var domObj =
一文吃透JavaScript中的DOM知识及用法
不迁怒，不贰过。小知识，大智慧。
11-12 4984
一文带你吃透DOM的知识和用法，绝对实用。 DOM是网页的核心结构，无论是HTML、CSS还是JavaScript，都和DOM 密切相关。HTML的作用是构建DOM结构，CSS的作用是设定样式，JavaScript的作用是读取以及控制、修改DOM。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
JS中的DOM
m0_60489011的博客
11-24 8243
一、理解JS中的DOM 1.DOM是文档对象模型：当网页被加载时，浏览器会创建页面的文档对象模型。 2.通过 DOM，可访问 JavaScript HTML 文档的所有元素。 3.DOM 模型被构造为对象的树：通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面...
JavaScript DOM基础
程序员柒的博客
07-18 2402
本文简单的讲解了JavaScript的DOM基础，适合初学的朋友们，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。以下是本篇文章正文内容一个完整的JavaScript实现由以下3个不同部分组成核心（ECMAScript）语言核心部分，描述了该语言的语法和基本对象。文档对象模型（DocumentObjectModel，DOM）网页文档操作标准，描述处理网页内容的方法和接口。浏览器对象模型（BOM）客户端和浏览器窗口操作基础，描述与浏览器进行交互的方法和接口。编程接口。......
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值