DOM #第二天

最新推荐文章于 2022-11-01 10:14:54 发布
最新推荐文章于 2022-11-01 10:14:54 发布
阅读量144 收藏
点赞数
文章标签： css html node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52809337/article/details/120003684
版权

目录

一、操作节点

二、操作class

一、操作节点

1.node.style：只能获取/修改行内的样式，不能够操作选择器里面的样式

2.getComputedStyle(node)：获取元素当前的所有样式

  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: pink
    }
  </style>
 
   <div class="box">内容</div>

   <script>
    let box = document.querySelector('.box');

    // 1.node.style 只能获取/修改行内的样式，不能够操作选择器里面的样式
    box.style.color = 'red';
    console.log(box.style.width); // 空字符串

    // 2.getComputedStyle(node) 获取元素当前的所有样式
    // console.log(getComputedStyle(box));
  </script>

【案例】点击之后当前盒子变为宽高的一半

  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: pink
    }
  </style>

  <div class="box">内容</div>

  <script>
    let box = document.querySelector('.box');
    // 点击之后当前盒子变为宽高的一半 
    box.onclick = function() {
      // 给box设置行内的width 覆盖了选择器里面的width
      box.style.width = parseFloat(getComputedStyle(box).width)*0.5 + 'px';
      box.style.height = parseFloat(getComputedStyle(box).height)*0.5 + 'px';
    }  
  </script>

【案例】高亮

  <input type="text">
  <button>搜索</button>
  <div class="box">
    省公安厅交通警察总队（省公安厅交通管理局）党委书记、
    总队长（局长）张建芬涉嫌严重违纪违法，警察主动投案，
    目前正接受省纪警察委监委纪律审查和监察调查。
  </div>
  <script>
    var btn = document.querySelector('button');
    btn.onclick = function() {
      var keywords = document.querySelector('input').value;
      var contents = document.querySelector('.box').innerText;
      document.querySelector('.box').innerHTML = contents.replace(new RegExp(keywords, 'g'), `<span style = "color: red">${keywords}</span>`)
    }
  </script>

【案例】全选

  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">
          <input type="checkbox" name="selected" id="">
        </th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">
          <input type="checkbox" name="selected" id="">
        </th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">
          <input type="checkbox" name="selected" id="">
        </th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
      <tr>
        <th scope="row">
          <input type="checkbox" name="selected" id="">
        </th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">
          <input type="checkbox" name="selected" id="" value="12">
        </th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

  <input type="text">
  <input type="text">
  <input type="text"> +
  <input type="button" value="添加">
  <hr>

  <input type="button" value="全选" class="selectall">
  <input type="button" value="不选" class="selectno">
  <input type="button" value="反选" class="selectchange">

  <script>
    let selectall = document.querySelector('.selectall');
    let selectno = document.querySelector('.selectno');
    let selectchange = document.querySelector('.selectchange')


    selectall.onclick = click;
    selectno.onclick = click;
    selectchange.onclick = click;

    function click() {
      console.log(1111);

      let selected = document.getElementsByName('selected');
      for (let i = 0; i < selected.length; i++) {
        if (this.classList.contains('selectall')) {
          selected[i].checked = true;
        }
        if (this.classList.contains('selectno')) {
          selected[i].checked = false;
        }
        if (this.classList.contains('selectchange')) {
          selected[i].checked = !selected[i].checked;
        }
      }
    }


    // 全选
    // selectall.onclick = function() {
    //   for (let i = 0; i < selected.length; i++) {
    //     selected[i].checked = true;
    //   }
    // }

    // // 全不选
    // selectno.onclick = function() {
    //   for (let i = 0; i < selected.length; i++) {
    //     selected[i].checked = false;
    //   }
    // }

    // // 反选
    // selectchange.onclick = function() {
    //   // console.log(11);
    //   for (let i = 0; i < selected.length; i++) {
    //     selected[i].checked ? selected[i].checked = false : selected[i].checked = true; 方式一
    //      selected[i].checked = !selected[i].checked; // 方式二
    //   }
    // }
  </script>

二、操作class

操作class的方法方法功能
node.className修改、添加元素的类名

node.classList

classList.add()

在不影响原始class的情况下追加新的class

classList.remove()

删除指定的class，没指定的不会删除

classList.contains()

检查是否存在指定的class

【案例】通过添加类改变背景颜色

  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: green;
    }
    .active {
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="box"></div>

  <script>
    // 操作class 
    let box = document.querySelector('.box');

    // 1.node.className == 'class'
    box.onclick = function() {
      if (this.className == 'box active') { // 类名必须带上box 不然盒子没有样式了
        this.className = 'box';
      } else {
        this.className = 'box active';
      }
    }

    /* 2.node.classList 类数组对象
        classList.add()：在不影响原始class的情况下追加新的class
        classList.remove()：删除指定的class，没指定的不会删除
        classList.contains()：检查是否存在指定的class
    */
    box.onclick = function() {
      if (!this.classList.contains('active')) {
        this.classList.add('active');
      } else {
        this.classList.remove('active');
      }
    }

  </script>

【案例】点击切换标签页

  <style>
    .outer div{
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 10px;
      display: none;
    }
    .outer .text2 {
      background-color: red;
    }
    .outer .text3 {
      background-color: green;
    }
    .outer .text4 {
      background-color: blue;
    }
    .outer > .text {
      display: block;
    }
    .active {
      background-color: black;
      color: #fff;
    }
  </style>
</head>
<body>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>

  <div class="outer">
    <div class="text">文本1
    </div>
    <div class="text2">文本2</div>
    <div class="text3">文本3</div>
    <div class="text4">文本4</div>
  </div>

  <script>
    let btn = document.querySelectorAll('button');
    let divs = document.querySelectorAll('.outer div');
    for (let i = 0; i < btn.length; i++) {
      btn[i].onclick = function() {
        for (let i = 0; i < divs.length; i++) {
          divs[i].classList.remove('text');
          btn[i].classList.remove('active');
        }
        divs[i].classList.add('text');
        this.classList.add('active');
      }
    }
  </script>

【案例】弹出模态框

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .button {
      background-color: black;
      color: #fff;
      width: 50px;
      height: 30px;
    }
    .outer {
      width: 100vw;
      height: 100vh;
      background-color: black;
      opacity: 0.4;
      position: fixed;
      top: 0;
      left: 0;
      display: none;
    }
    .box {
      width: 300px;
      height: 400px;
      background-color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -150px;
      margin-left: -200px;

    }
    .close {
      width: 30px;
      height: 30px;
      background-color: #ccc;
      color: black;
      position: absolute;
      right: -10px;
      top: -10px;
      text-align: center;
      line-height: 30px;
      border-radius: 50px;
    }
    .close:hover {
      cursor: pointer;
    }
    .block {
      display: block;
    }
  </style>
</head>
<body>
  <button class="button">登录</button>
  <div class="outer">
    <div class="box">
      <div class="close">x</div>
    </div>
  </div>

  <script>
    let btn = document.querySelector('button');
    let close = document.querySelector('.close');
    let outer = document.querySelector('.outer');

    // btn.onclick = function() {
    // console.log(11);
    // 1.点击登录按钮弹出模态框
    //   outer.classList.add('block');
    // }
    // 2.点击关闭按钮隐藏模态框
    // close.onclick = function() {
    //   outer.classList.remove('block');
    // }
    // outer.onclick = function() {
    //   outer.classList.remove('block');
    // }

    btn.onclick = motai;
    close.onclick = motai;
    outer.onclick = motai;

    function motai() {
      if (this.classList.contains('button')) {
        outer.classList.add('block');
      }
      if (this.classList.contains('close') || this.classList.contains('outer')) {
        outer.classList.remove('block');
      }
    }


  </script>

三、自定义属性

操作方法含义
获取元素属性值element.属性

获取元素固定的属性，如class、id，不能获取自定义属性

element.getAttribute('属性名')

获取元素的自定义属性，也可用来获取固定属性

element.dataset.属性 / [属性]

只能获取data-开头的自定义属性！

设置元素属性值

element.setAttribute('属性', '值')

设置元素的自定义属性，通常以data-开头

  <!-- index = "1" 为自定义属性 -->
  <div id="demo" index = "1"></div> 

  <script>
    let div  = document.querySelector("div");
    // 1.获取元素的属性值
    // （1）获取元素固定的属性：element.属性
    console.log(div.id); // demo
    console.log(div.index); // undefined 不能用来获取自定义的属性
    
    // (2)获取元素的自定义属性：element.getAttribute('属性名')
    console.log(div.getAttribute('index')); // 1
    console.log(div.id); // demo 也可以获取固定属性
    
    // 2.设置元素属性值
    // （1）设置元素固定的属性：element.属性 = '值'
    div.id = 'test'; // <div id="test" index = "1"></div> 

    // (2)设置元素的自定义属性：element.setAttribute('属性', '值')
    div.setAttribute('index1', '2') // <div id="demo" index = "1" index1 = "2"></div> 
    

  </script>
  <div gettime = '43' data-index = "2" data-list-name = "andy"></div>
  <script>
    let div = document.querySelector("div");
    // 1.为了区分自定义的属性和固定属性 通常以data-开头定义自定义属性
    console.log(div.getAttribute('data-index')); // 2
    div.setAttribute("data-time", "20"); // <div data-index = "2" data-time = "20"></div>

    // 2.h5新增的获取自定义属性的方法 它只能获取data-开头的自定义属性！
    console.log(div.dataset); // <div data-index = "2" data-list-name = "andy"></div>
    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>

【案例】点击按钮切换图片

    <style>
        img {
            width: 400px;
            height: 300px;
        }
    </style>

    <img src="./img/5.jpg" alt="">
    <div data-src="./img/14.jpg">按钮1</div>
    <div data-src="./img/17.jpg">按钮2</div>
    <div data-src="./img/18.jpg">按钮3</div>
    <div data-src="./img/19.jpg">按钮4</div>

    <script>
        //案例：点击按钮，切换图片
        let btns = document.querySelectorAll("img~div");
        for (let i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                document.querySelector("img").src = this.dataset.src
            }
        }
    </script>
奋斗的小baby
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5新增的classList
lzsan_的博客
04-02 154
classList:保存控制当前元素名的各个方法和属性 在元素中切换类名： this.classList.toggle("类名"); 包含此类： this.classList.contains("类名");
DOM2级样式style
a464064368的博客
12-06 317
任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性。这个style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息，但不包含于外部样式表或嵌入样式表经层叠而来的样式。 HTML： CSS：(引用外部CSS文件或在标签中) .error{ height:100px; } JS:
js改变DOM样式的三种方式
风烟
11-16 1万+
方法一： 最简单也是最直接的方法就是直接修改DomNode的style属性： 如下面的代码`var node = document.getElementById('node'); node.style.color = 'red';方式二： 因为表现应该是表现层的也就是css所所的事，所以可以这样代码如下： var node = document.getElementById('node');
JS中~Dom和Bom方法汇总
qq_64970126的博客
05-10 163
JS中Dom和Bom属性方法获取与使用
JS获取节点的有效样式
wytccc的博客
11-01 367
JS获取节点的有效样式。node.style.属性名;node.currentStyle[属性名];getComputedStyle(node)[属性名]
超全面javaweb第4天- 07 操作DOM树二
08-31
超全面javaweb第4天-_07_操作DOM树二
超全面javaweb第6天- 16 使用dom4j支持XPATH的操作二
08-31
超全面javaweb第6天-_16_使用dom4j支持XPATH的操作二
2_react_learning:第二天React学习
05-14
对于Npm $ npm i react-media $ npm i prop-types$ npm i classnames$ npm i react-router$ npm i react-router-dom纱线用$ yarn add react-media $ yarn add prop-types$ yarn add classnames$ yarn add react-...
30-Days-Of-HTML:逐步指南，旨在在30天内学习HTML，DOM树和Web开发的概念
05-22
第十二天使用不足HTML元素 ＃ 日 话题 01 介绍 02 DOM（文档对象模型） 03 04 :orange_heart: :orange_heart: :orange_heart: 快乐编码 :orange_heart: :orange_heart: :orange_heart: 支持作者创作更多的教育...
《4天学会Ajax》教程 pdf
04-26
第二天走进JavaScript 和Ajax异步请求；第三天学习Ajax高级请求和响应；第四天利用DOM进行Web 响应。 　本文的作者是一位Ajax 专家，他演示了这些技术如何协同工作—— 从总体概述到细节的讨论—— 使高效的Web ...
JS 里元素结点的 style 属性
变心
05-15 238
DOM 里的元素结点都有一个 style 属性，用于控制元素结点的显示样式，与 CSS 里面的各属性有一一对应的关系对应方式如：node.style.color 对应 CSS 里的 color                node.style.fontSize 对应 CSS 里的 font-size                即 首单词首字母小写，其他单词首字母大写的形式style 属性是一...
严格（strict）模式下不允许分配到只读属性
yoxe_ys的博客
11-19 9719
今天工作的时候遇到了一个问题，大概就是用js了实现一个顶部齐刘海导航栏。 这个功能在chrome中没有问题，能正常显示，但是在IE中会报出：strict模式下不允许分配到只读属性 出现这个问题的原因是，在js中利用var xx = document.createElement('div') 创建了一个元素，然后直接向xx的style赋值 比如：xx.style = 'height: 6p...
原生js—classList.add()、classList.remove()、classList.contains()、classList.toggle()、
热门推荐
代码小宝宝的博客
02-21 4万+
原生js添加、移除类名（HTML5新增classList） classList.add()； 添加新的类名，如已经存在，取消添加 classList.contains(); 确定元素中是否包含指定的类名，返回值为true 、false； classList.remove()； 移除已经存在的类名; classList.toggle()； 如果classList中存在给定的值，删除它，否则，添加它...
List.contains(Object)用法浅谈
weixin_39253359的博客
08-13 1055
大家好，这是我在CSDN上的第一篇博客，请多关照。 最近在写业务侧代码时，遇到了一个我们在平时编写代码时经常遇到的问题，即：将多个不同的对象放在一个List数组中，再添加对象的过程中，我们会用到contains方法来过滤掉相同的对象(过滤string类型大家都知道，equals比较的是字符串)。 创建一个MailSenderFactory对象 public class MailSenderF...
原生js操作元素类名—classList.add()、classList.remove()、classList.contains()、classList.toggle()
u011200562的博客
11-03 3856
原生js操作元素类名 classList.add( newClassName )； classList.toggle( className )； classList.remove( oldClassName )； classList.contains( oldClassName ); classList.add( newClassName )； 添加新的类名，如已经存在，取消添加 classList.contains( oldClassName ); 确定元素中是否包含指定的类名，返回值.
JS 基础篇(classlist兼容性问题）
一点一滴
01-20 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
element.classList属性及方法应用
sky_jser
10-24 9107
element.classList属性用于返回一个元素的className集合，并且该属性拥有add，remove，toggle，contains方法，详见：https://developer.mozilla.org/en-US/docs/DOM/element.classList。 一般我们再操作dom节点的className时经常会有以下4个需求： 判断该节点是否存在某个class
classList介绍和原生JavaScript实现addClass、removeClass等
leadn的博客
12-27 7188
使用jQuery可以给元素很方便的添加class和删除class等操作，现在原生的JavaScript也可以实现这个方法了。使用classList可以方便的添加class、删除class、查询class等。 语法： let elementClass = element.classList; elementClasses 是一个 DOMTokenList 表示 element
List的contains方法
cavvv的专栏
05-12 3万+
昨天遇到一个List对象去重字符串的问题，网上查了下看到一个方法，就是在将字符串对象放入集合前进行contains方法过滤。即如果集合中不存在该元素就放入元素，否则不做任何操作，看了下评论大家都谈到了效率问题：contains方法到底会不会遍历集合？又去网上查了查，是这样的： list.contains(o)，系统会对list中的每个元素e调用o.equals(e)，方法，加入list中有n个元素
javascript dom编程艺术第二版pdf
最新发布
06-22
《JavaScript DOM编程艺术》第二版是一本非常经典的前端开发书籍，由作者Jeremy Keith和Jeffrey Sambells合作编写而成。该书主要介绍了使用JavaScript和DOM技术进行网页开发的知识，涵盖了DOM操作、事件监听、表单...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值