web前端之js中DOM对象的操作以及案例

最新推荐文章于 2023-03-17 17:39:28 发布

扣门僧

最新推荐文章于 2023-03-17 17:39:28 发布

阅读量310

点赞数

分类专栏：笔记文章标签： javascript html5

本文链接：https://blog.csdn.net/paxtonwu/article/details/108188293

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.首先了解一下什么是DOM对象:
DOM(Document Object Model)，文档对象模型,在html文件中所有元素(title,body,head,div…)都可看成是一个文档对象.
通过documen可以调用html中的文档对象并进行相关操作:
在这里插入图片描述
基于BOM操作的案例:

表单操作:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="checkbox" name="fav" value="java">学java
        <input type="checkbox" name="fav" value="js">学javascript
        <input type="checkbox" name="fav" value="mysql">学数据库
        <input type="checkbox" name="fav" value="jdbc">学jdbc <br>
        <input type="checkbox" 
               name="" 
               id="selectAll" 
               onclick="selectAll(this.checked)">全选1
        
        <input type="checkbox" name="" id="selectAll2">全选2
        
        <script>
            //全选实现1
            function selectAll(isSelected){
                var cks = document.getElementsByName('fav');
                for(var i = 0;i<cks.length;i++){
                    cks[i].checked = isSelected;
                }
            }

          //全选实现2  document.getElementById('selectAll2').addEventListener('click',function(){
                var cks = document.getElementsByName('fav');
                for(var i = 0;i<cks.length;i++){
                    cks[i].checked = this.checked;
                }
            })

        </script>
    </body>
</html>

该案例实现了一个简单的表单功能,通过勾选全选按钮,实现自动勾选其他所有按钮(由js实现).

扣门僧

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端之js中DOM对象的操作以及案例

1.首先了解一下什么是DOM对象:DOM(Document Object Model)，文档对象模型,在html文件中所有元素(title,body,head,div…)都可看成是一个文档对象.通过documen可以调用html中的文档对象并进行相关操作:基于BOM操作的案例:表单操作:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8">
复制链接

扫一扫