JavaScriptDAY3

记录学习jblog

已于 2024-02-08 13:36:48 修改

阅读量475

点赞数 7

文章标签： javascript 前端开发语言

于 2024-02-08 00:53:17 首次发布

本文链接：https://blog.csdn.net/weixin_45982587/article/details/136018767

版权

本文介绍了如何使用JavaScript进行DOM操作，包括获取DOM对象、修改元素内容（innerText和innerHTML）、元素属性的修改、控制样式（style和classList）、表单元素属性的处理以及自定义属性的使用。

摘要由CSDN通过智能技术生成

开始进入JS的API学习。

Web API基本认知

API作用和分类

作用：使用JS去操作html和浏览器

分类：DOM（文档对象模型）、BOM（浏览器对象模型）

DOM：用于操作网页的内容，可以开发网页内容特效和实现用户交互

DOM树：用文档树的形式直观的体现了标签与标签之间的关系

DOM对象：js中的DOM对象即是html中的标签。标签中所有属性都可以在这个对象中找到，修改这个对象的属性会自动映射到标签身上。

获取DOM对象

根据CSS选择器获取DOM对象（重点）

使用document.querySeletor或document.querySeletorAll

  <script>
    // 获取匹配的第一个元素 参数是一个或多个有效的CSS选择器字符串
    const box = document.querySelector('.box')
    console.dir(box)
    // 能够直接进行修改
    box.style.color = 'red'

    // 选择匹配多个元素 参数是一个或多个有效的CSS选择器字符串 返回是NodeList对象集合
    const box2 = document.querySelectorAll('.box')
    console.dir(box2)
    // 不能直接修改 只能通过遍历的方式一次给里面的元素做修改
  </script> -->

根据CSS选择器获取DOM对象（了解）

修改元素内容

1.元素innerText属性

将文本内容添加/更新到任意标签位置

显示纯文本，不解析标签

  <div class="box">我是文字内容</div>

  <script>
    // 获取元素
    const box = document.querySelector('.box')

    console.log(box.innerText)//获取文字内容
    box.innerText = '我是一个新的内容'// 修改文字内容
  </script>

2.元素innerHTML属性

将文本内容添加/更新到任意标签位置

会解析标签，多标签建议使用模板字符

  <div class="box">我是文字内容</div>

  <script>
    // 获取元素
    const box = document.querySelector('.box')

    box.innerHTML = '<strong>我是一个新新的内容</strong>'// 修改文字内容
  </script>

修改元素属性

常用属性修改

最常用的属性比如href、title、src等

<img src="./images/1.webp" alt="">

  <script>
    // 1.获取图片元素
    const pic = document.querySelector('img')
    //2.修改元素的属性
    pic.src = "./images/2.webp"
  </script>

控制样式属性

通过style属性操作CSS

修改样式属性对象.style.样式属性='值'。

适合修改样式比较少的情况。且生成的是行内样式，权重比较高。

 <div></div>

  <script>
    // 1.获取元素
    const div = document.querySelector('div')
    // 2.修改样式属性   对象.style.样式属性='值'
    div.style.width = '1000px'
    div.style.backgroundColor = 'gray'//CSS中的background-color在js中写成backgroundColor
  </script>

通过类名（className）操作CSS

当需要修改的样式比较多时，直接用style修改会比较繁琐，故可以借助CSS类名的形式修改。

使用CSS和JS搭配去修改样式。在JS中通过className方式将旧值修改成新值。若原本这个标签有类名，在添加新类名时，注意将原来类名也给带上。

  <style>
    /* 旧值 */
    div {
      height: 300px;
      width: 300px;
      background-color: aqua;
    }

    /* 新值 */
    .box {
      height: 500px;
      width: 500px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="nav"></div>

  <script>
    // 获取元素
    const div = document.querySelector('div')
    // 添加类名 使用className关键字
    // 注意:原来div已有类名nav,className时也得带上原来div上的类名,不然会被覆盖,会导致
    // 原来div中的类名失效
    div.className = 'nav box'
  </script>

通过classList操作类控制CSS【最常用】

为了解决className容易覆盖以前的类名，可以使用classList方式追加和删除类名。此方法原先的类名还存在，只是在后面追加了新的类名。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      height: 300px;
      width: 300px;
      background-color: rebeccapurple;
    }

    .active {
      background-color: aqua;
    }
  </style>
</head>

<body>
  <div class="box">文字</div>

  <script>
    //通过classList去添加

    // 1.获取元素
    const box = document.querySelector('.box')
    // 2.修改样式
    // 2.1追加类add() 类名不加点，并且是字符串
    box.classList.add('active')
    // 2.2删除类remove() 类名不加点，并且是字符串
    box.classList.remove('box')
    //2.3切换类toggle() 之前有这个类就删除，之前没有这个类就加上
    box.classList.toggle('box')
  </script>
</body>

操作表单元素属性

1.文本框

<body>
  <input type="text" value="输入">

  <script>
    // 1.获取元素
    const uname = document.querySelector('input')
    // 2.获取值 使用表单.value
    console.log(uname.value)
    // 3.修改值 
    uname.value = '修改输入'
    // 4.将文本框变成密码框(输入密码时小眼睛功能)
    uname.type = 'password'
  </script>
</body>

2.复选框

 <input type="checkbox">

  <script>
    // 1.获取元素
    const ipt = document.querySelector('input')
    // 2.勾选勾选框
    ipt.checked = true
  </script>

自定义属性

在H5中推出用data-自定义属性的格式去声明自定义属性。

在DOM对象中用dataset对象方式获取。

<body>


  <!-- 自定义属性 data开头 -->
  <div data-id="1" data-idd="11">1</div>
  <div data-id="2">2</div>
  <div data-id="3">3</div>
  <div data-id="4">4</div>
  <div data-id="5">5</div>

  <script>
    // 获取第一个div对象
    const one = document.querySelector('div')

    // 打印自定义属性的集合, 此处打印出来的是对象data-id="1" data-idd="11"
    console.log(one.dataset)

    // 打印某一个自定义属性，此处打印出来的是1
    console.log(one.dataset.id)

  </script>
</body>