当前位置：首页 > news >正文

前端快速入门——JavaScript函数、DOM

news 来源：原创 2025/5/2 17:52:42

1.JavaScript函数

函数是一段可重复使用的代码块，它接受输入(参数)、执行特定任务，并返回输出。
函数使用语法

<scricpt>function add(a,b){return a+b;}let c=add(5,10);console.log(c);
</script>

2.JavaScript事件

在这里插入图片描述
JavaScript绑定事件的方法：
（1）HTML属性
（2）DOM属性
（3）addEventListener方法

    <button id="btn" onclick="showAlert()">这是一个点击事件按钮</button><script>function showAlert() {alert("按钮被点击了！");}// alert("这是一个弹窗！");</script>

3.JavaScrip DOM

在 Web 开发中，DOM 通常与 JavaScript 一起使用。
当网页被加载时，浏览器会创建页面的文档对象模型，也就是 DOM(Document Object Model)
每个 HTML或 XML, 文档都可以被视为一个文档树，文档树是整个文档的层次结构表示。
文档节点是整个文档树的根节点。
DOM为这个文档树提供了一个编程接口，开发者可以使用JavaScript 来操作这个树状结构。
在这里插入图片描述

<body><div id="fox1">这是一个ID选择器标签</div><div class="box2">这是一个类选择器标签</div><div>这是一个普通的DIV标签</div><button id="btn1">按钮1</button><script>let element_id=document.getElementById("fox1");console.log(element_id);element_id.style.color="red";element_id.style.fontSize="30px";element_id.style.backgroundColor="blue";let element_class=document.getElementsByClassName("box2");console.log(element_class[0]);let element_tag=document.getElementsByTagName("div")[0];console.log(element_tag);element_id.innerHTML="修改内容";// DOM属性绑定事件let btn_element=document.getElementById("btn1");btn_element.onclick=function(){alert("按钮被点击了！");}// DOM属性绑定事件的另一种写法      btn_element.addEventListener("click",function(){alert("按钮被点击了！2222");});// DOM属性绑定事件的另一种写法btn_element.addEventListener("click",click_event)function click_event(){alert("按钮被点击了！3333");}</script></body>