学习笔记【JavaWeb-第四节：BOM 、DOM 、事件快速入门】

最新推荐文章于 2022-10-31 18:59:08 发布

十月花

最新推荐文章于 2022-10-31 18:59:08 发布

阅读量98

点赞数

分类专栏： # Java Web 文章标签： js java javascript

本文链接：https://blog.csdn.net/qq_53273362/article/details/112124053

版权

Java Web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

DOM简单学习

具体的在后面。

功能： 控制html文档的内容
代码： 获取页面标签（元素）对象 Element：document.getElementById(id值)：通过元素的id获取元素对象。

操作Element对象
设置属性值：

明确获取的对象是哪一个
查看API文档，查看其中有哪些属性可设置

修改标签体内容：
属性：innerHTML

获取元素对象
使用innerHTML属性修改标签体内容

事件简单学习

**概念：**某些组件被执行了某些操作后，触发某些代码的执行。

如何绑定事件
直接在html标签上，指定事件的属性。属性值就是js代码。

事件： onclick----单击事件

通过js获取元素对象，指定事件属性，设置一个函数

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
</head>
<body>
    <img src="img/1.jpg" id="jpg1" width="200" height="200">
    <script>
        var jpg1 = document.getElementById("jpg1");

        var flag=false;
        jpg1.onclick=function (){
            if (flag){
                jpg1.src="img/1.jpg";
                flag=false;
            }else {
                jpg1.src="img/2.jpg";
                flag=true;
            }

        }
    </script>
</body>
</html>

BOM

Browser Object Model 浏览器对象模型

组成：

Window：窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

Window窗口对象

创建

方法：

A 与弹出框有关的方法

alert()：显示带有一段信息和一个确认按钮的警告框
confirm()：显示到有一段信息以及确认和取消按钮的对话框。如果用户点击确定返回true，点击取消返回false
prompt()：显示可提示用户输入的对话框。返回值为用户输入的值

alert("请点确定！");

let flag = confirm("请点击确认");
if (flag) alert("你真棒！");
else alert("手别抖啊！")

let result = prompt("请输入用户名：");
alert(result);

B 与打开关闭有关的方法

open();打开一个新窗口
close();关闭浏览器窗口。谁调用就关谁

C 与定时器有关的方法

setTimeout()：在指定的毫秒数后调用函数或计算表达式。参数：①函数或方法；②毫秒数。
clearTimeout()：取消由setTimeout()方法设置的timeout。
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()：取消由setInterval()设置的timeout。

属性

获取其他BOM对象，如window.history
获取DOM对象：document

特点：

Window对象不需要创建可以直接使用window使用。window.方法名();
window引用可以省略。

Location 地址栏对象

创建：

window.location
location

方法：
reload()：重新加载当前文档。刷新

属性：
href：设置或返回完整的URL

DOM

Document Object Model 文档对象模型

将标记语言文档的各个组成部分，封装成对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

W3C DOM 标准被分为3个不同的部分

核心 DOM-针对任何结构化文档的标准模型

document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
Node：节点对象，以上5个的父对象

XML DOM-针对XML文档的标准模型
HTML DOM-针对HTML文档的标准模型

核心 DOM

Document 文档对象

创建：

window.document
document

方法：

获取Element对象：

getElementById()：根据id属性获取元素对象。id属性一般唯一
getElementByTagName()：根据元素名称获取元素对象们。返回值是一个数组
getElementByClassName()：根据class属性值获取元素对象们。返回值是一个数组
getElementByName()：根据name属性值获取元素对象们。返回值是一个数组

创建其他DOM对象：

createAttribute(name)
createComment()
createElement()
createTextNode()

属性

Element 元素对象

获取/创建：通过document来获取和创建
方法：

removeAttribute()：删除属性
setAttribute()：设置属性

Node 节点对象

特点：
所有dom对象都可以认为是一个节点

方法：
CRUD dom树：

appendChild()：向节点的子节点列表的结尾添加新的子节点。
removeChild()：删除（并返回）当前节点的指定子节点。
replaceChild()：用新节点替换一个子节点。

属性：
parentNode 返回当前节点的父节点

HTML DOM

A 标签体的设置和获取：innerHTML

B 使用html元素对象的属性

C 控制元素样式

使用元素的style代码进行设置，如：div1.style.border="1px solid red";
提前定义好类选择器的样式，通过元素的className属性来设置其class属性值，如：div1.className="d1";

事件

其实这里学的是：事件监听机制

某些组件被执行了某些操作后，触发了某些代码的执行。

事件简单理解：某些操作，如：单击、双击、键盘按下，鼠标移动到…

事件源：组件，如按钮，文本输入框…

监听器：一些代码

注册监听：事件源与监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器的代码。

常见的事件：

1.点击事件

onclick：单击事件
ondblclick：双击事件

2.焦点事件

onblur：失去焦点，一般用于表单验证
onfocus：获得焦点

3.加载事件

onload：一张页面或图片完成加载，

4.鼠标事件

onmousedown：鼠标被按下，定义方法时可以定义一个形参，接受event对象。event的button对象可以获取哪个按键被点击了。
onmouseup：鼠标被松开
onmousemove：鼠标被移动
onmouseover：鼠标移到某元素上
onmouseout：鼠标被移开某元素

5.键盘事件

onkeydown：某个键盘按键被按下
onkeyup：某个键盘按键被松开
onkeypress：某个键盘按键被按下并松开

6.选中和改变

onchange：域中内容被改变
onselect：文本被选中

7.表单事件

onsubmit：确认按钮被点击
onreset：重置按钮被点击

十月花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记【JavaWeb-第四节：BOM 、DOM 、事件快速入门】

DOM简单学习具体的在后面。功能：控制html文档的内容代码：获取页面标签（元素）对象 Element：document.getElementById(id值)：通过元素的id获取元素对象。操作Element对象设置属性值：明确获取的对象是哪一个查看API文档，查看其中有哪些属性可设置修改标签体内容：属性：innerHTML获取元素对象使用innerHTML属性修改标签体内容事件简单学习**概念：**某些组件被执行了某些操作后，触发某些代码的执行。如何绑定事件直接
复制链接

扫一扫