关于HTML DOM 学到触发事件的总结

最新推荐文章于 2023-10-19 22:32:47 发布

陈漂亮beauty

最新推荐文章于 2023-10-19 22:32:47 发布

阅读量389

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/dyyay521/article/details/105023134

版权

前端学习专栏收录该内容

20 篇文章 1 订阅

订阅专栏

----------------本篇总结是基于菜鸟教程带给我的知识----------------------

首先我们要知道JS在HTML DOM中能够做的事情：

改变页面中的所有 HTML 元素
改变页面中的所有 HTML 属性
改变页面中的所有 CSS 样式
对页面中的所有事件做出反应

知道功能之后，我们要知道怎么使用它们：

1.改变页面中的所有 HTML 元素

要想改变其中的元素，首先要知道如何找到这些元素，分为三种情况，其实和css差不多：

1.通过 id 找到 HTML 元素
var x=document.getElementById("intro");
//intro就是要找的id名称；
2.通过标签名找到 HTML 元素
var x=document.getElementById("main");//跟上一步一样，区别就是继续往里寻找了；
var y=x.getElementsByTagName("p");
3.通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");
//就跟css一样，用定义class类名来锁定目标；

找到；定位之后，想要改变HTML内容，只需要一个innerHTML:

document.getElementById(id).innerHTML=新的 HTML

JS表示我能改变的不只是内容，还有属性（虽然很少用）：

document.getElementById(id).attribute=新属性值

难道这就结束了吗？我治得了HTML，治不了CSS？当然可以，我还能改变样式！

document.getElementById(id).style.property=新样式

这个可以用例子说明：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
 
</body>
</html>

好的，接下来！就到了DOM的灵魂了！触发事件！

当用户点击鼠标时，当网页已加载时，当图像已加载时，当鼠标移动到元素上时，当输入字段被改变时，当提交 HTML 表单时，当用户触发按键时.......很多这种事件都是由JS来完成的。

1.简单的，当用户在 <h1> 元素上点击时，会改变其内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>

<h1 onclick="changetext(this)">点击文本!</h1>     // onclick就是一个触发事件

</body>
</html>