web前端学习720-741（DOM---操作元素，接上）

香甜的甲基橙

已于 2022-04-20 16:08:36 修改

阅读量430

点赞数

分类专栏： web前端基础学习笔记 JavaScript 文章标签：前端 javascript

于 2022-04-19 20:15:00 首次发布

本文链接：https://blog.csdn.net/weixin_51249285/article/details/124282233

版权

web前端基础学习笔记同时被 2 个专栏收录

68 篇文章 13 订阅

订阅专栏

JavaScript

41 篇文章 3 订阅

订阅专栏

文章目录

DOM
- 4 操作元素

DOM

4 操作元素

案例:分时显示不同图片,显示不同问候语

根据不同时间,页面显示不同图片,同时显示不同的问候语。
如果上午时间打开页面,显示上午好,显示上午的图片。
如果下午时间打开页面,显示下午好,显示下午的图片。
如果晚上时间打开页面,显示晚上好,显示晚上的图片。

案例分析

根据系统不同时间来判断,所以需要用到日期内置对象
利用多分支语句来设置不同的图片
需要一个图片,并且根据时间修改图片,就需要用到操作元素src属性
需要一个div元素，显示不同问候语，修改元素内容即可

<!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>
  <style>
    img {
      width: 300px;
    }
  </style>
</head>
<body>
  <img src=" images/zsh.png" alt="">
  <div>.上午好</div> 

  <script>
    // 1.获取元素
    var img = document.querySelector('img');
    var div = document.querySelector( 'div');
    // 2.得到当前的小时数
    var date = new Date();
    var h = date. getHours();
    // 3.判断小时数改变图片和文字信息
    if(h<12){
      img.src =' images/zsh.png';
      div. innerHTML = '亲，上午好， 好好写代码'; 
    }else if(h<18){
        img.src = ' images/xwh.png';
        div. innerHTML = '亲， 下午好， 好好写代码';
    } else {
        img.src = 'images/wsh.png';
        div. innerHTML = '亲，晚上好， 好好写代码';
    }

  </script>
</body>
</html>

在这里插入图片描述

4.3 表单元素的属性操作

利用DOM可以操作如下表单元素的属性:

type、value、checked. selected. disabled

eg 点击按钮，显示被点击了

<!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>
  <style>
    img {
      width: 300px;
    }
  </style>
</head>
<body>
  <button>按钮</button>
    <input type="text" value= "输入内容">
    
  <script>
    // 1.获取元素
    var btn = document.querySelector('button');
    var input = document.querySelector('input');
    // 2.注册事件处理程序
    btn.onclick = function() {
    // input . innerHTML = '点击了'; 这个是普通盒子 比如 div 标签里面的内容
    //表单里面的值文字内容是通过value 来修改的
    input.value = '被点击了';
    //如果想要某个表单被禁用 不能再点  disabled 我们想要这个按钮  button禁用
    btn.disablep = true;
    // this指向的是事件函数的调用者btn

    }

  </script>
</body>
</html>

在这里插入图片描述

4.4 样式属性操作

我们可以通过JS修改元素的大小、颜色、位置等样式。

element. style 行内样式操作
element . className 类名样式操作

点击粉色变蓝色

<!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>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    // 1.获取元素
    var div = document.querySelector('div');
    // 2.注册事件 处理程序
    div.onclick = function() {
    // div. style 里面的属性采取驼峰命名法
    this.style.backgroundColor = 'purple';
    this.style.width = '250px';
    }
  </script>
</body>
</html>

在这里插入图片描述

注意:

JS里面的样式采取驼峰命名法比如 fontsize、 backgroundColor
JS修改style样式操作,产生的是行内样式, css权重比较高
如果样式修改较多,可以采取操作类名方式更改元素样式。
class因为是个保留字，因此使用className来操作元素类名属性
className会直接更改元素的类名,会覆盖原先的类名。

总结

操作元素是DOM核心内容

在这里插入图片描述

4.6 自定义属性的操作

1.获取属性值

element.属性 获取属性值。
element . getAttribute(‘属性’);

区别:

element .属性获取内置属性值 (元素本身自带的属性)
element . getAttribute( \属性’ );主要获得自定义的属性 ( 标准)我们程序员自定义的属性

2.设置属性值

element.属性= ‘值’ 设置内置属性值。
element . setAttribute(‘属性’，‘值’);

区别:

element.属性设置内置属性值
element .setattribute(‘属性’);主要设置自定义的属性 (标准)

3.移除属性

element . removeAttribute (‘属性’) ;

<!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>
<body>
  <div id="demo" index="1" class="nav"></div>
  <script>
    var div = document.querySelector('div');
    //1.获取元素的属性值
    // (1) element.属性
    console . log(div.id);
    //(2) element . getAttribute( '属性')  get得 到获取attribute 属性的意思  我们程序员自己添加的属性我们称为自定义属性 index
    console.log(div. getAttribute('id'));
    console. log(div. getAttribute( 'index'));
    // 2.设置元素属性值
    // (1) element.属性= '值'
    div.id = 'test' ;
    // (2) element . setAttribute('属性','值'); 主要针对于自定义属性
    div.setAttribute( 'index', 2);
    div. setAttribute('class', 'footer'); // class 特殊这 里面写的就是 class  不是className
    // 3移除属性removeAttribute(属性)
    div.removeAttribute( 'index' ); 

  </script>

</body>
</html>

4.7 H5 自定义属性

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

自定义属性获取是通过getAttribute(‘属性’)获取。
但是有些自定义属性很容易引起歧义 , 不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性:

1.设置H5自定义属性

H5规定自定义属性data开头做为属性名并且赋值。
比如<div data-index= "1” > < /div>

或者使用 JS 设置
element.setAttribute( ‘data- index’ , 2)

2.获取H5自定义属性

兼容性获取element.getAttribute( ‘data- index’ );
H5新增element.dataset**.index 或者**element.dataset[ ‘index’] ie 11才开始支持

<!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>
<body>
  <div getTime="20" data-index= "2" data-list-name="andy"></div>
  <script>
    var div = document.querySelector('div');
    // console.log(div.getTime );
    console.log(div.getAttribute('getTime'));
    div.setAttribute('data-time',20);
    console.log(div.getAttribute('data-index'));
    console.log(div.getAttribute('data-list-name'));
    // h5新增的获取自定义属性的方法  它只能后去data-开头的

    //dataset是一个集合里面存放了所有以data开头的自定义属性

    console.log(div.dataset);
    console.log(div.dataset.index);
    console.log(div.dataset['index']);
    // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法
    console.log(div.dataset.listName);
    console.log(div.dataset['listName']);


  </script>
</body>
</html>

在这里插入图片描述

香甜的甲基橙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端学习720-741（DOM---操作元素，接上）

文章目录DOM4 操作元素案例:分时显示不同图片,显示不同问候语4.3 表单元素的属性操作4.4 样式属性操作DOM4 操作元素案例:分时显示不同图片,显示不同问候语根据不同时间,页面显示不同图片,同时显示不同的问候语。如果上午时间打开页面,显示上午好,显示上午的图片。如果下午时间打开页面,显示下午好,显示下午的图片。如果晚上时间打开页面,显示晚上好,显示晚上的图片。案例分析根据系统不同时间来判断,所以需要用到日期内置对象利用多分支语句来设置不同的图片需要一个图片,并且根据时间修改图
复制链接

扫一扫