JavaScript-DOM-笔记

发布时间:2024年01月10日

1.JavaScript的组成
1)ECMAScript
ECMAScript规定了JS的编程语法和基础核心知识,如语法、类型等等。
2)DOM——文档对象模型
文档对象模型可以对页面上的各种元素进行操作(大小、位置、颜色等)
3)BOM——浏览器对象模型
浏览器对象模型可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

DOM和BOM就是网页API,其中包含了预先定义好的工具函数,直接拿来使用即可
DOM中:
文档: 一个页面就是一个文档 ----- html
节点: 文档中的所有内容 ---- 标签、属性、文本
元素: 标签
文档中包含节点,节点包含元素

2.根据id名、类名、标签名获取元素
1)根据id名获取元素? ? document.getElementById('id名')
id是唯一的 获取的就是元素
2)根据类名获取元素? ? document.getElementsByClassName('类名')
类名可以重复。使用类名获取的结果是一个伪数组,获取具体的元素需要使用下标
document.getElementsByClassName('类名')[下标]
3)根据标签名获取元素? ?document.getElementsByTagName('标签名')
标签名可以重复。使用标签名获取的结果是一个伪数组,获取具体的元素需要使用下标
document.getElementsByTagName('标签名')[下标]

3.使用选择器获取元素
通配符选择器、id选择器、类选择器、标签选择器、后代选择器、子元素选择器
id选择器:#id名 类选择器:.类名 标签选择器:标签名
document.querySelector('选择器'): 根据选择器,只获取第一个
document.querySelectorAll('选择器'):根据选择器,获取所有 --- 伪数组 使用下标获取具体元素

4.获取特殊元素
获取body : document.body
获取html : ?document.documentElement

5.事件三要素
1)事件源: 操作了谁
2)事件类型: 干了什么事
3)事件处理函数: 做出的反应

6.绑定事件的三步
1)获取事件源
2)确定事件类型
3)绑定事件处理函数 元素.事件类型 = function(){ 代码 }

7.常见的事件类型
onclick? ?鼠标点击左键触发
onfocus? 获取鼠标焦点触发
onblur? 失去鼠标焦点触发
onmouseenter/onmouseleave? ?鼠标移入/移出某元素触发
onmouseover/onmouseout? ?鼠标悬停/离开某元素触发
onmousemove? ? 鼠标移动触发
onmousedown/onmouseup? ? 鼠标按下/弹起触发

8.获取、修改元素的文本内容
1)获取:元素.innerText
2)修改:元素.innerText = '值'

9.获取、修改元素内部html结构
1)获取:元素.innerHTML
2)修改:元素.innerHTML = '值'

10.获取、修改元素的属性
1)获取:元素.属性名
2)修改:元素.属性名 = '值'


11.表单元素的特殊属性
input标签中的特殊属性type:
? ? ? ? text:文本框 password:密码框 radio:单选按钮 checkbox:复选框
特殊属性:
? ? ? ? disabled(禁用)、checked(选中)、selected(下拉菜单被选中),readonly(只读),这些属性的值是布尔型,不能加引号

文章来源:https://blog.csdn.net/pinbodeshaonian/article/details/135495943
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。