什么是Dom？

不悲不康
148 阅读6分钟

Web API 基本认知

作用: 就是使用 JS 去操作 html 和浏览器 分类：DOM (文档对象模型)、BOM（浏览器对象模型）

什么是DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API 白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能 DOM作用

  • 开发网页内容特效和实现用户交互

DOM树

DOM树是什么 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 描述网页内容关系的名词 作用：文档树直观的体现了标签与标签之间的关系

Snipaste_2022-03-24_11-31-28

DOM对象

DOM对象：浏览器根据html标签生成的 JS对象

  • 所有的标签属性都可以在这个对象上面找到
  • 修改这个对象的属性会自动映射到标签身上

DOM的核心思想

  • 把网页内容当做对象来处理

document 对象

  • 是 DOM 里提供的一个对象

  • 所以它提供的属性和方法都是用来访问和操作网页内容的

    • 例：document.write()

  • 网页所有内容都在document里面

获取

获取DOM对象

查找/获取DOM对象

提问：我们想要操作某个标签首先做什么？

  1. 肯定首先选中这个标签，跟 CSS选择器类似，选中标签才能操作
  1. 查找元素DOM元素就是选择页面中标签元素

根据CSS选择器来获取DOM元素 (重点)

选择匹配的第一个元素 语法：

document.querySelector('css选择器')

参数:

包含一个或多个有效的CSS选择器 字符串

返回值：

CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有获取到元素，则返回null

选择匹配的多个元素

语法：

document.querySelectorAll('css选择器')

参数:

包含一个或多个有效的css选择器 字符串

返回值：

css选择器匹配的NodeList 对象集合

如果没有获取到满足条件的元素，也会返回一个空的伪数组

  • 哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

得到的是一个伪数组： 有长度有索引号的数组 但是没有 pop() push() 等数组方法 想要得到里面的每一个对象，则需要遍历（如 for）的方式获得。

document.querySelectorAll('ul li')

其他获取DOM元素方法

根据id获取一个元素

document.getElementById('nav')

根据标签获取一类元素 获取页面 所有div

document.getElementByTagName('div')

根据类名获取元素 获取页面 所有类名为w的元素

document.getElementByClassName('w')

修改元素的文本更换内容

方法：

  • document.write() 方法

只能将文本内容追加到 前面的位置 文本中包含的标签会被解析

  • 对象.innerText 属性

将文本内容添加/更新到任意标签位置 文本中包含的标签不会被解析

  • 对象.innerHTML 属性

将文本内容添加/更新到任意标签位置 文本中包含的标签会被解析

设置/修改元素常用属性

还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片 最常见的属性比如： href、title、src 等

对象.属性=值
//获取元素
let pic=document.querySlector('img')
//操作元素
pic.src='./images/b02.jpg'
pic.title='这是一个图片'
​

设置/修改元素样式属性

还可以通过 JS 设置/修改标签元素的样式属性。

  • 比如通过 轮播图小圆点自动更换颜色样式
  • 点击按钮可以滚动图片，这是移动的图片的位置 left 等等

学习路径：

通过 style 属性操作CSS
对象.style.样式属性=值
let box=document.querySlector('.box')
​
.box.style.backgroundColor='red'
.box.style.width='300px'
.box.style.marginTop='50px'

注意： 修改样式通过style属性引出 如果属性有-连接符，需要转换为小驼峰命名法 赋值的时候，需要的时候不要忘记加css单位

操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

由于class是关键字, 所以使用className去代替 className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

元素.className='类名'
通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')

总结

  1. Web API阶段我们学习那两部分？ DOM BOM

  1. DOM 是什么？有什么作用？ DOM 是文档对象模型 操作网页内容，可以开发网页内容特效和实现用户交互

  2. DOM 树是什么？ 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 作用：文档树直观的体现了标签与标签之间的关系

  3. DOM对象怎么创建的？ 浏览器根据html标签生成的 JS对象（DOM对象） DOM的核心就是把内容当对象来处理

  4. document 是什么？ 是 DOM 里提供的一个对象 网页所有内容都在document里面

  5. 获取一个DOM元素我们使用谁？ querySelector()

  6. 获取多个DOM元素我们使用谁？ querySelectorAll()

  7. querySelector() 方法获取到的元素能直接操作修改吗？ 可以

  8. querySelectorAll() 方法获取到的元素能直接修改吗？ 如果不能可以怎么做到修改？ 不可以， 只能通过遍历的方式。依次给里面的元素做修改

  9. 获取页面中的标签我们最终常用那两种方式？ querySelectorAll() ； querySelector()

  10. 他们两者的区别是什么？ querySelector() 只能选择一个元素， 可以直接操作

querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素

  1. 他们两者小括号里面的参数有神马注意事项？

里面写css选择器 必须是字符串，也就是必须加引号

  1. 设置/修改DOM元素内容有哪3钟方式？ document.write() 方法 元素.innerText 属性 元素.innerHTML 属性

  2. 三者的区别是什么？ document.write() 方法 只能追加到body中 元素.innerText 属性 只识别内容，不能解析标签

元素.innerHTML 属性 能够解析标签 如果还在纠结到底用谁，你可以选择innerHTML

  1. 设置/修改元素样式属性通过style属性引出来

  2. 如果需要修改一个div盒子的样式，比如 padding-left, 如何写？ element.style.paddingLeft = ‘300px’ 小驼峰命名法

  3. 因为我们是样式属性，一定别忘记，大部分数字后面都需要加单位

  4. 使用 className 有什么好处？ 可以同时修改多个样式

  5. 使用 className 有什么注意事项？ 直接使用 className 赋值会覆盖以前的类名

  6. 使用 className 和classList的区别？ 修改大量样式的更方便 classList 修改不多样式的时候方便 className classList 是追加和删除不影响以前类名

avatar
文章
阅读
粉丝