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

news2025/5/9 16:07:49

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>