WebApis学习笔记更新完毕 2022最新黑马程序员

「已注销」

已于 2022-08-07 10:25:26 修改

阅读量1.8k

点赞数 2

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

于 2022-07-20 16:38:25 首次发布

本文链接：https://blog.csdn.net/m0_62602850/article/details/125895289

版权

Web Apis第一天

Dom获取&属性操作

WebAPi基本认知

作用和分类

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

分类:DOM(文档对象模型) BOM(浏览器对象模型)

什么是DOM

用来呈现以及与任意HTML或XML文档交互的API

DOM是浏览器提供的一套专门用来操作网页内容的功能

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

DOM树

将HTML文档以树状结构直观的表现出来,称为文档树或DOM 描述网页内容关系的名词

作用:文档树直观的体现了标签与标签之间的关系

DOM对象重

浏览器根据html标签生成的Js对象

所有的标签属性都可以在这个对象上面找到

修改这个对象的属性会自动映射到标签身上

DOM的核心思想 ==> 把网页内容当作对象来处理

document对象 ==> 是DOM里提供的一个对象所以它提供的属性和方法都是 用来访问和操作网页内容的 如 document.write()

网页所有内容都在document 里面

获取DOM对象重

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

查找元素DOM元素就是利用Js选择页面中标签元素.

1.选择匹配的第一个元素
document.querySelector('css选择器')

query ==>查询 Selector选择

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

返回值 CSS选择器匹配的 第一个元素 一个HTML Element对象没匹配到返回null

选择匹配的多个元素:

document.querySelectorAll('css选择器')

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

返回值 CSS选择器匹配的 NodeList对象集合

得到的是一个 伪数组: ==>又长度又索引号的数组但是没有pop() push()等数组方法

想要得到里面的每一个对象, 需遍历(for)的方式获得

其他获取DOM元素方法(了解)

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

// 根据 标签获取 一类元素 获取页面 所有div
document.getElementsByTagName('div')

// 根据 类名获取元素 获取页面 所有类名为 w的
document.getElementsByClassName('w')

操作元素内容

对象 .innerText属性

元素 innerText属性 ==> 将文本内容添加/更新到任意标签位置 == 显示纯文本不解析标签

对象innerHTML属性

将文本内容添加/更新到任意标签位置 == 会解析标签多标签建议使用模板字符

操作元素属性

操作元素常用属性

可以通过JS设置/修改标签元素属性比如通过 src更换图片

最常见的属性比睿:href title src等

语法:

对象.属性 = 值

举例说明:

// 1 获取元素
const pic = document.querySelector('img')
// 2 操作元素
pic.src = './images/b01.jpg'
[ic.title = '刘德华黑马演唱会'

操作元素样式属性

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

==> 通过轮播图小圆点自动更换颜色样式

==> 点击按钮可以滚动图片这是移动的图片位置left等等

通过style属性操作CSS

语法:
对象.style.样式属性 = 值

通过类名操作CSS

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

// 语法:
// active 是一个css类名
元素.className = 'active'

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

通过classList操作类控制CSS 常用

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

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

操作表单元素属性

表单很多情况需要修改属性比如点击眼睛可以看到密码本质是把表单类型转为文本框

正常的有属性有取值的跟其他的标签属性没有任何区别

获取: DOM对象.属性名

设置: DOM对象.属性名 = 新值

表单.value = '用户名'
表单.type = 'password'

表单属性中添加就有效果移除就没效果一律使用布尔值表示如果为true 代表添加了该属性如果是false代表移除了该属性

比如 disabled ==> 禁用吗?

checked ==> 勾选

selected ==> 下拉菜单

<script>
        // 接收布尔值
        //  1 获取
        const input = document.querySelector("input");
    //   console.log(input.checked);  // false   只接收布尔值
    input.checked = true; // 勾选
    //   input.checked = "true"; // 会选中 不提倡 有隐式转换

    //   1 获取
    const button = document.querySelector("button");
    //   默认false  不禁用    disabled ==> 禁用吗?
    //   console.log(button.disabled);
    button.disabled = true; // 禁用按钮
</script>

自定义属性

标准属性: 标签天生自带的属性比如 class id title 等可以直接使用点语法操作比如 disabled checked selected

自定义属性:

在html5中推出来了专门的data-自定义属性

在标签上一律以data-开头

在DOM对象上一律以dataset对象方式获取

<body>
    <div class="box" data-id="10">盒子</div>
	<script>
        const box = document.querySelector('.box')
		console.log(bix.dataset.id)
	</script>
</body>

    <script>
        // 自定义属性
        const one = document.querySelector("div");
    //    怎么拿到自定义属性
    console.log(one.dataset.id); // 想获取里面的1 加一个.id
    console.log(one.dataset.sm); // 打印出什么
    </script>