JS HTML DOM

最新推荐文章于 2022-12-23 23:47:13 发布
最新推荐文章于 2022-12-23 23:47:13 发布
阅读量304 收藏
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Care_about/article/details/52908644
版权

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=“new HTML”

改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value

JavaScript HTML DOM - 改变 CSS

改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style

JavaScript HTML DOM 事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
οnclick=JavaScript
HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
实例

<body onload="checkCookies()">

onchange 事件

onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
实例

<input type="text" id="fname" onchange="upperCase()">

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

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

</body>
</html>

这里写图片描述
这里写图片描述

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>

</body>
</html>

这里写图片描述
这里写图片描述

一滴墨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript HTML DOM元素 节点操作汇总
10-16
主要介绍了JavaScript HTML DOM元素 节点操作汇总,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js过滤器常见形式
沉淀，积累、进步
01-21 1103
过滤器常见形式
js字符串转换成大写 toUpperCase方法
peter的博客
09-22 752
const item = "abc" console.log(item.toUpperCase()); //ABC
JavaScript 技术篇-js字符串大小写转换，toLocalUpperCase()和toUpperCase()的区别详解
小蓝枣的博客
08-02 5403
正常大小写转换原理都是改变对应的 ASCII 码的值来实现的，比如十进制 A 对应 65，a 对应 97，把 a 转化为 A 只要把 97 改为 65 就好了。 一般语言的字符集比如 GBK，UTF-8 等，包含的特殊字符集是和标准的 ASCII 码一致的。 但有一些特殊语言的字符集，比如土耳其语，对应的特殊字符集就跟我们的不一样，它的 A 不是 65 了，a 也不是 67 了，用 toUpperCase() 就不行了，需要用 toLocalUpperCase()，一般情况下使用效果是一样的。
js转大小写的函数
weixin_35755434的博客
12-23 877
在 JavaScript 中，可以使用以下函数将字符串转换为大写： function toUpperCase(str) { return str.toUpperCase(); } 也可以使用以下函数将字符串转换为小写： function toLowerCase(str) { return str.toLowerCase(); } 这些函数都是 JavaScript 中内置的字符串方法，...
javascript基础学习教程（一）
mubaiyang2019的博客
07-28 100
JavaScript最最基础和简单的学习教程
JavaScript HTML DOM
01-19
JavaScript HTML DOM 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为...
js HTML DOM EventListener功能与用法实例分析
10-15
主要介绍了js HTML DOM EventListener功能与用法,结合实例形式分析了js HTML DOM EventListener事件监听相关用法及操作注意事项,需要的朋友可以参考下
JavaScript HTML DOM EventListener
01-19
JavaScript HTML DOM EventListener addEventListener() 方法 实例 在用户点击按钮时触发监听事件： document.getElementById(myBtn).addEventListener(click, displayDate); addEventListener() 方法用于向...
JavaScript toUpperCase() 方法和 toLowerCase() 方法
diaojilu3861的博客
08-25 542
1，toUpperCase() 方法用于把字符串转换为大写。 一个新的字符串，在其中 stringObject 的所有小写字符全部被转换为了大写字符。 语法为： stringObject.toUpperCase() 2，toLowerCase() 方法用于把字符串转换为小写。 一个新的字符串，在其中 stringObject 的所有大写字符全部被转换为了小写字符...
JS基础知识整理
程序员小周的博客
08-27 509
对代码行进行折行您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：document.write("Hello \ World!");不过，您不能像这样折行：document.write \ ("Hello World!");向未声明的 JavaScript 变量来分配值 如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。这条语句：carname="Volvo";将
js中toLowerCase()方法的作用
q285661571的专栏
04-05 9628
把字符中的所有字母全部转换为小写
JS toLowerCase()方法 toUpperCase()方法
John的专栏
11-28 8737
toLowerCase()方法； 定义：toLowerCase() 方法用于把字符串转换为小写。 语法：var str = "String"; str .toLowerCase();// string toUpperCase()方法； 定义：toUpperCase()方法用于把字符串转换为大写。 语法：var str = "string"; str.toUpp
vuejs20-过滤器uppercase
weixin_34290000的博客
02-07 213
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title></head><body><d...
angularjs里对JS的lowercase和uppercase的完善
weixin_30900589的博客
12-01 121
读angularjs的源码开头。 var lowercase = function (string) { return isString(string) ? string.toLowerCase() : string; }; var uppercase = function (string) { return isString...
JSON取值(key是中文或者数字)方式详解
热门推荐
Care_about的博客
08-10 1万+
先准备一个json对象用于演示var json = {'name':'zhangsan', '年龄':23, 404:'你可能迷路了'};使用JS中with关键字with(json) { console.log(name);//输出:zhangsan console.log(年龄);//输出:23 console.log(404);//输出:404,用这种方法读取key是数字
JavaScript 条件语句
Care_about的博客
10-23 430
条件语句用于基于不同的条件来执行不同的动作。 条件语句通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。 在 JavaScript 中，我们可使用以下条件语句： if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码 if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码 if…else i
JavaScript 使用
Care_about的博客
10-23 368
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。<script> 标签 如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。 <script> 和 </script> 会告诉 JavaScript 在何处开始和结束。 <script> 和 </scrip
js 解析 html dom
最新发布
09-01
JS 解析 HTML DOM 是指使用 JavaScript 代码来操作和获取 HTML 文档中的元素和属性。 要解析 HTML DOM，可以使用 JavaScript 提供的 DOM API。DOM（Document Object Model）是将 HTML 文档表示为树状结构，每个元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值