DOM的基础使用

最新推荐文章于 2022-09-19 16:04:49 发布

勿忘灬无期

最新推荐文章于 2022-09-19 16:04:49 发布

阅读量583

点赞数

文章标签： js

本文链接：https://blog.csdn.net/F_eve/article/details/111060559

版权

首先要了解一些必要的定义。
DOM-文档对象模型，DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。
文档：一个网页可以称为文档。
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）。
元素：网页中的标签。
属性：标签的属性。
想要js与html联系起来，首先我们要获取到元素（有很多方法），然后对元素进行操作（设置其属性或调用其方法）。比如动态创建元素，事件(什么时机做相应的操作)。
因为id名具有唯一性，一般情况通过id来获取元素。举例来说明

<div id="box"></div>
    <script>
        /* 通过id等于box来获取这个div元素 */
        var box = document.getElementById('box');
        /* 设置样式 */
        box.style.width = '200px';
        box.style.height = '200px';
        box.style.backgroundColor = 'blueviolet'
    </script>

我们直接设置css样式也可以达到效果，区别不大。
如果我们加一个要求，添加一个按钮，只有点击按钮时才出现盒子。这个时候css就不能满足我们的要求了。

<body>
    <div id="box"></div>
    <input type="button" value="点击出现" id="btn">
    <script>
        /* 通过id等于box来获取这个div元素 */
        var box = document.getElementById('box');
        var btn = document.getElementById('btn');
        /* 添加事件 */
        btn.onclick = function(){ //当btn这个元素被点击才执行
            /* 设置样式 */
            box.style.width = '200px';
            box.style.height = '200px';
            box.style.backgroundColor = 'blueviolet'
        }
    </script>

勿忘灬无期

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM的基础使用

首先要了解一些必要的定义。DOM-文档对象模型，DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。文档：一个网页可以称为文档。节点：网页中的所有内容都是节点（标签、属性、文本、注释等）。元素：网页中的标签。属性：标签的属性。想要js与html联系起来，首先我们要获取到元素（有很多方法），然后对元素进行操作（设置其属性或调用其方法）。比如动态创建元素，事件(什么时机做相应的操作)。因为id名具有唯一性，一般情况通过id来获取元素。举例来说明<div id=
复制链接

扫一扫