Web APIs获取对象、操作元素内容 | 前端笔记（十一）

前端学习记录之路

已于 2023-04-30 12:53:07 修改

阅读量57

点赞数

文章标签：前端笔记 javascript

于 2023-04-19 20:17:21 首次发布

本文链接：https://blog.csdn.net/weixin_55901142/article/details/130252367

版权

本文介绍了WebAPIs中的DOM和BOM概念，DOM用于动态修改HTML，而BOM处理浏览器对象。通过document对象，可以使用querySelector和querySelectorAll选择和操作HTML元素。innerText和innerHTML属性分别用于设置不解析和解析HTML标签的文本内容。

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

（二）Web APIs

1.基本认知

（1）作用与分类

1.作用：使用js去操作html和浏览器。

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

（2）DOM

1.定义

DOM 是用来动态修改 HTML 的，其目的是开发网页特效及用户交互。

2.DOM树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-10EhPDTi-1681906621742)(C:/Users/20703/Desktop/%E7%AC%94%E8%AE%B0%E5%9B%BE%E7%89%87/web-api.jpg)]

3.DOM对象

1.浏览器根据html标签生成的js对象，把html标签当作DOM对象。

2.document对象是最大的对象，属性和方法都用来访问和操作网页内容的，网页所有内容都在document里面。

2.获取DOM对象

（1）根据CSS选择器获取

1.选择匹配的第一个元素

语法：document.querySelector('css选择器')

参数：包含一个或多个CSS选择器字符串

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

<body>
  <div class="box">123</div>
  <p id="nav">导航栏</p>
  <ul class="nav">
    <li>测试1</li>
    <li>测试2</li>
  </ul>
  <script>
//1. 获取匹配的第一个元素
const box = document.querySelector('div')
//或者const box = document.querySelector('.box')
console.log(box)
const nav = document.querySelector('#nav')
console.log(nav)
//可以直接修改
nav.style.color = 'red'
//获取第一个小 ul li
const li = document.querySelector('ul li:first-child')
  </script>
</body>

2.选择匹配的多个元素

语法：document.querySelectorALL('css选择器')

参数：包含一个或多个CSS选择器字符串

返回值：CSS选择器匹配的NodeList对象集合。如果没有匹配到，返回null。

备注：得到的是一个伪数组：

1.有长度有索引号的数组

2.没有pop( )、push( )等数组方法

3.想要得到每一个对象，需要遍历(for)。

//选择所有的小li
const lis = document.querySelectorAll('ul li')

for (let i = 0; i < lis.length; i++) {
    console.log(lis[i]) // 每一个小li对象
}

//就算只有一个p，也得到伪数组
const p = document.querySelectorAll('#nav')
console.log(p)
p[0].style.color = 'red'

（2）其他获取方法

1.根据id获取一个元素：document.getElementById('nav')

2.根据标签获取一类元素：document.getElementsByTagName('div')

3.根据类名获取元素：document.getElementsByClassName('w')

3.操作元素内容

（1）innerText属性

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

<body>
  <div class="box">我是文字的内容</div>
  <script>
//获取元素
const box = document.querySelector('.box')
//修改文字内容  对象.innerText 属性
console.log(box.innerText)  // 获取文字内容
box.innerText = '我是一个盒子'  // 修改文字内容
box.innerText = '<strong>我是一个盒子</strong>'  // 显示纯文本，不解析标签
  </script>
</body>

（2）innerHTML属性

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

console.log(box.innerHTML)
box.innerHTML = '我要更换'
box.innerHTML = '<strong>我要更换</strong>'  //解析标签

中包含的标签会被解析。

console.log(box.innerHTML)
box.innerHTML = '我要更换'
box.innerHTML = '<strong>我要更换</strong>'  //解析标签

备注：如果文本内容中包含 html 标签时推荐使用 innerHTML，否则建议使用 innerText 属性。

前端学习记录之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web APIs获取对象、操作元素内容 | 前端笔记（十一）

DOM 是用来动态修改 HTML 的，其目的是开发网页特效及用户交互。
复制链接

扫一扫