Web API —— DOM 学习（一）

COLDEHY

已于 2024-03-22 10:32:10 修改

阅读量410

点赞数 8

文章标签：前端学习 javascript java html5

于 2024-03-18 21:25:02 首次发布

本文链接：https://blog.csdn.net/qq_63342197/article/details/136814053

版权

本文详细介绍了DOM（文档对象模型）的概念、DOM树结构，以及如何通过CSS选择器、JavaScript获取和操作DOM对象，包括innerText和innerHTML的区别，元素样式属性的修改方法，表单元素属性的处理，以及HTML5自定义属性的使用。最后展示了随机抽奖的代码示例。

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

（一）通过 CSS 选择器获取 DOM 元素（主要）

3.通过 classList 操作类控制 css

（三）操作表单元素属性

（四）自定义属性

LAST：小练习

一、 DOM 介绍

DOM 是文档对象模型是用来表现与 HTML 或 XML 文档交互的API

是浏览器提供的用来操作网页内容的功能

用来开发网页特效和实现用户交互

二、 DOM 树

将 html 文档以树状结构表现出来叫做文档树或 DOM 树就是把 html 中的标签中父亲儿子的关系以一种树状图的结构展示出来，它直观的体现了标签和标签之间的关系。

API 是通过 js 的形式来操纵标签

三、 DOM 对象

浏览器根据html 标签自动生成的 js 对象具有对象的性质有属性和方法

每个标签都是一个对象并且可以看到它的属性和方法

所有的标签属性都能在这个对象上找到如果修改这个对象的属性，对应的标签也会相应的发生变化，等于修改了标签的属性。

总之就是：在 html 叫标签在 js 里面叫 DOM 对象

<body>
  <script>
   const div = document.querySelector9('div')
   console.dir(div)
  </script>
</body>

核心思想：就是把网页内容当对象处理

document是 DOM 里最大的一个的对象它提供的属性和方法都是用来访问和操作网页内容的

例如： doucument.write()

网页所有内容都在 document 里面

四、获取 DOM 对象

（一）通过 CSS 选择器获取 DOM 元素（主要）

1.选择匹配的第一个元素，通过 css 选择器名选取只能选一个，而且必须用单引号包围 ‘’，别忘了前面的. # 符号 ! ! !

‘’里面的格式和 css 选择器一模一样返回值是一个对象

如果没有匹配到就返回null

返回单个对象能直接修改元素，nav.style.color = 'red' 类名为red 的标签的文字颜色变红了

返回多个对象存在数组中，就不能直接修改元素只能循环依次修改

如果要获取 body 对象就不用 querySelector 获取了直接document.body 即可

<body>
  <div class="box"></div>
  <script>
  const box = document.querySelector('div')
  console.log(box)
  </script>
</body>

<style>
  .box {
    width: 10px;
    height: 120px;
  }
</style>
<body>
  <div class="box"></div>
  <script>
  const box = document.querySelector('.box')
  console.log(box)
  </script>
</body>

返回多个对象：返回一个数组对象返回 ul 中所有的 li

但是它是一个伪数组有长度有索引号没有pop() push() 方法

想得到里面的每一个对象，需要用循环来遍历这个数组。

<body>
 <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>
  <script>
  const box = document.querySelectorAll('ul li')
  console.log(box)
  </script>
</body>

（二）通过其他获取 DOM 元素（了解）

document.getElementById('nav')

根据 id 获取一个元素里面写 id 名不写井号（获取单个元素不是伪数组）

document.getElementsByTagName('div')

根据标签获取元素获取页面所有 div 标签（获得伪数组因为有s）

document.getElementsByClassName('w')

根据类名获取元素，获取页面所有类名为 w 的元素（获得伪数组因为有s）

五、操作元素内容

为了修改元素内的文本内容就是更换元素的文本内容例如倒计时数字文本不断变化

DOM 对象都是根据标签生成的，操作标签就是操作 DOM 对象

本质就是利用获取的对象然后对象.内容更改对象标签的内容

（一）innerText 属性

显示纯文本不解析标签意思就是更改 box 里面的文字状态如果想给文字加标签的形式来实现是没用的它不解析里面的标签例如下面的 <strong>我变成加粗的文字了</strong> 只会显示这段文本而不会让里面的文字加粗。

<body>
  <div class="box">我是文字的内容</div>
  <script>
    const box = document.querySelector('.box')
    console.log(box.innerText)
    box.innerText = '<strong>我变成加粗的文字了</strong>'
  </script>
</body>

（二）innerHTML 属性

也显示文本区别是可以解析标签如果是数据就不用加 '' 了

<body>
  <div class="box">我是文字的内容</div>
  <script>
    const box = document.querySelector('.box')
    console.log(box.innerText)
    box.innerHTML = '<strong>我变成加粗的文字了</strong>'
  </script>
</body>

六、操作元素属性

（一）操作常用属性

比如图片的 src 属性，可以通过更改 src 来更换图片还例如 href title src 等

也是对象.属性 = 值的形式来修改

<body>
  <img src="i.png" alt="">
  <script>
    const photo = document.querySelector('img')
    photo.src = 'image.png'
  </script>
</body>

（二）操作元素样式属性

通过 js 来设置修改标签元素的样式属性 有三种方式

1.通过 style 属性修改

写多个属性比较麻烦。

对象.style.样式属性 = 值的形式如

长度高度原本在 css 中就是后面带单位 px 的所以它应该是以字符串的形式来存储的

所以在 box.style.width = '300px' 应该加 ‘’

<body>
  <script>
    const box = document.querySelector('.box')
    box.style.width = '300px'
  </script>
</body>

如果把长度width 换成复杂的单词中间带 - 的就要用小驼峰命名法来书写。

例如在 css 中的 background-color 属性应写为 backgroundColor

<body>
  <script>
    const box = document.querySelector('.box')
    box.style.backgroundColor = 'pink'
  </script>

2.通过操作类名操作 css 修改

经常用在样式比较多的情况下，就是新给标签添加一个类名，如果标签之前有类名，就会覆盖原来的类名。类名里面的性质需要到 css 里面具体定义。

‘’ 里面的东西和 class = ‘’ 写的相一致，如果想同时添加两个类名就写 ‘nav box’

<style>
    div {
      width: 200px;
      height: 100px;
      background-color: red;
    }
    .box {
      width: 300px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    div.className = 'box'
  </script>
</body>

3.通过 classList 操作类控制 css

为了解决 className 容易覆盖原来类名的问题，所用className 来追加和删除类名。

div.classList.add = '类名' 增加类名
div.classList.remove = '类名' 删除类名
div.classList.toggle = '类名' 切换类名有就删掉没有就追加类名

<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    div.classList.add = 'box'
    div.classList.remove = 'box'
    div.classList.toggle = 'box'   
  </script>
</body>

（三）操作表单元素属性

获得表单中的数据不用 innerHTML 它是属性而不是文本内容

修改值： uname.value = '234'

<body>
  <input type="text" value="123">
  <script>
    const uname = document.querySelector('input')
    console.log(uname.value)
  </script>
</body>

给多选框打对勾，js 中用布尔类型控制改变 checked 属性就行，选中就是 true。

不加引号加引号也会成功，因为字符串默认布尔类型转换成 true

如果要全选写个循环把属性全改成 true就行

button.disabled = true (禁用按钮)

<body>
  <input type="checkbox">
  <script>
    const uname = document.querySelector('input')
    uname.checked = true
  </script>
</body>

（四）自定义属性

html5 新出的，用 data-什么的形式来命名自定义属性

调用就用 dataset 指的是自定义属性的对象，可以拿到所有的自定义属性，自定义属性就是里面的属性，用哪个属性就直接单独调用就行。例如： dataset.id

<body>
  <div data-id='1' data-spm="123">1</div>
  <div data-id='2'>2</div>
  <div data-id='3'>3</div>
  <script>
    const one = document.querySelector('div')
    console.log(one.dataset.id)
    console.log(one.dataset.spm)
  </script>
</body>

LAST：小练习

随机抽奖

结果展示：

代码部分：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  </style>

<body>
  <div class="wrapper">
    <strong>抽奖</strong>
    <h1>一等奖：<span id="one">111</span></h1>
    <h3>二等奖：<span id="two">111</span></h3>
    <h5>三等奖：<span id="three">111</span></h5>
  </div>
  <script>
    const personArr = ['张三', '李四', '王五', '刘六']
    
    const random = Math.floor(Math.random() * personArr.length)
    const one = document.querySelector('#one')
    one.innerHTML = personArr[random]
    personArr.splice(random, 1)
    
    const random1 = Math.floor(Math.random() * personArr.length)
    const two = document.querySelector('#two')
    two.innerHTML = personArr[random1]
    personArr.splice(random1, 1)
   
    const random2 = Math.floor(Math.random() * personArr.length)
    const three = document.querySelector('#three')
    three.innerHTML = personArr[random2]
    personArr.splice(random2, 1)
  </script>
</body>


<ml>