学习周记6[JavaScript HTML DOM]

最新推荐文章于 2023-01-24 15:15:53 发布

1ridescence

最新推荐文章于 2023-01-24 15:15:53 发布

阅读量58

点赞数 1

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/IR_Mokou/article/details/115524836

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学习周记6

[JavaScript HTML DOM]

1、什么是DOM

DMO：Document Object Model（文档对象模型）
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
1）JavaScript 能够改变页面中的所有 HTML 元素
2）JavaScript 能够改变页面中的所有 HTML 属性
3）JavaScript 能够改变页面中的所有 CSS 样式
4）JavaScript 能够对页面中的所有事件做出反应

2、DOM HTML输出

时间流输出：document.write(Date());
改变内容：document.getElementById(id).innerHTML=新的 HTML
改变属性：document.getElementById(id).attribute=新属性值

3、DOM 使用事件

<html>
<head>
<meta charset="utf-8">
<title>     </title>
</head>
<body>

<h1 id="test">色值</h1>
<button type="button" onclick="document.getElementById('test').style.color='red'">
改变颜色按钮</button>

</body>
</html>

在这里插入图片描述

4、JavaScript HTML DOM 事件

对事件做出反应：我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
HTML 事件的例子：
1）当用户点击鼠标时
2）当网页已加载时
3）当图像已加载时
4）当鼠标移动到元素上时
5）当输入字段被改变时
6）当提交 HTML 表单时
7）当用户触发按键时

<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<h1 onclick="this.innerHTML='点击后'">点击前</h1>

</body>
</html>

在这里插入图片描述

4、onload 和 onunload 事件

onload 和 onunload 事件可用于处理 cookie。

<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body onload="checkCookies()">

<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("Cookies 可用")
	}
	else{
		alert("Cookies 不可用")
	}
}
</script>
<p>弹窗-提示浏览器 cookie 是否可用。</p>
	
</body>
</html>

在这里插入图片描述

5、onchange 事件

onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
当你离开输入框后，函数将被触发，将小写字母转为大写字母。

<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

</body>
</html>

在这里插入图片描述

6、onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

1ridescence

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习周记6[JavaScript HTML DOM]

学习周记6[JavaScript HTML DOM]1、什么是DOMDMO：Document Object Model（文档对象模型）通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。1）JavaScript 能够改变页面中的所有 HTML 元素2）JavaScript 能够改变页面中的所有 HTML 属性3）JavaScript 能够改变页面中的所有 CSS 样式4）JavaScript 能够对页面中的所有事件做出反应2、DOM HTML输出时间流输出
复制链接

扫一扫