JavaScript-进阶-学习笔记①

最新推荐文章于 2024-10-16 11:23:07 发布

李祈愿

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量523

点赞数

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

本文链接：https://blog.csdn.net/qq_36228801/article/details/125683669

版权

学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前言：这个学习笔记是跟着“黑马前段教程”学习而记录下来的，进阶课程共有7节，故分为①②③④⑤⑥⑦这五个笔记。进阶教程主讲内容为Web API，精讲了BOM和DOM。

本节学习对象：DOM-获取/操作元素、定时器

一、Web API介绍

1.作用：就是使用JS去操作html和浏览器

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

二、DOM介绍

1.DOM（Document Object Model——文档对象模型）是用来呈现以及与任意html或xml文档交互的api

2.白话介绍：DOM就是浏览器提供的一套专门用来操作网页内容的功能

3.DOM作用：开发网页内容特效和实现用户交互

4.DOM对象：浏览器根据html标签生成的JS对象，所有的标签属性都可以在这个对象上面找到，修改这个对象的属性会自动映射到标签上，DOM的核心思想也就是把网页内容当做对象来处理。

三、获取DOM元素（对象）

1.根据css选择器来获取DOM元素

1.1选择匹配的第一个元素

<body>

<div>我是第一个盒子</div>
<div class="two">我是第二个盒子</div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    let div = document.querySelector('div')
    let two = document.querySelector('.two')
    let li =  document.querySelector('ul li:last-child')
</script>


</body>

1.2选择匹配的多个元素

使用该语法返回的是一个伪数组：

①有长度有索引号的数组

②但没有pop()、push()等数组方法

③哪怕只有一个元素，返回的也是伪数组，里面只有一个元素罢了