Web前端开发笔记-----21.认识BOM、认识DOM

luokii

于 2021-03-18 23:12:04 发布

阅读量132

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_51546204/article/details/114947997

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Web前端开发笔记-----21.认识BOM、认识DOM

文章目录

Web前端开发笔记-----21.认识BOM、认识DOM
一、认识BOM
二、认识DOM

一、认识BOM

BOM(browser object model)浏览器对象模型

1.系统对话框

alert() 弹出警告框
confirm() 弹出一个带确定和取消的提示框
如果点击确定,返回true
如果点击取消,返回false
prompt() 弹出一个带输入框的提示框
参数:
第一个参数:面板上显示的内容
第二个参数:输入框里面的默认(可以不输入)
返回值:点击确定,返回输入框中的内容
点击取消,返回null

2.open方法

open()
第一个参数:跳转的url 打开一个新窗口
第二个参数:字符串,给打开的窗口起一个名字
第三个参数:一串特殊含义的字符串
部分字符串：在这里插入图片描述

3.history对象

window.history
掌管的是,当前窗口(注意不是浏览器)历史记录(只要加载url不一样就会产生历史记录)。

属性
history.length 输出当前窗口历史记录的条数
方法
history.back() 返回上一条历史记录
history.forward() 前进到下一条历史记录
history.go()
参数:0 刷新当前页面
正整数前进n条记录
负整数后退n条记录

二、认识DOM

document object model
文档对象模型

节点类型：
元素节点
属性节点 id=‘div1’
文本节点 div节点

元素节点的获取
document.getElementById（id）
功能：通过id获取符合条件的元素，（id必须是唯一的）
返回值：就是符合条件的一个节点。

获取行间属性的值
var oDiv = document.getElementById（id）；
oDiv.id
oDiv.title
访问class 通过className访问
oDiv.className

获取行间css样式
oDiv.style.width
oDiv.style.height
注：如果css样式带-，将-去掉，从第二个单词开始首字母大写。

1.获取元素节点

node.getElementsByTagName（标签名）；
功能：从node节点开始,通过标签名获取符合条件的元素节点。
返回值:伪数组/类数组(人为起的,使用起来和数组似)

node.getElementsByClassName(class名字);(ie8以下不兼容)
功能:通过class名字获取符合条件的元素节点.

document.getElementsByName(name属性的值);
功能:通过name属性的值获取符合条件的元素节点.
注:一般使用在表单元素里.

2.获取当前有效样式

alert(oDiv.currentStyle[‘height’]); //IE兼容
alert(getComputedStyle(oDiv)[“height”]); //火狐,谷歌兼容

       // 跨浏览器兼容
        function getStyle(node,cssStyle){
            return node.currentStyle ? node.currentStyle[cssStyle]
             : getComputedStyle(oDiv)[classStyle];
        }

练习

要求:写一个定时器,每隔一秒修改一次div内文本颜色和文字大小.最开始这个文字是默认大小,大小开始增大,当增大了6次以后,文字大小开始缩小,缩小6ci,文字开始增大.

    <style>
        #div1{ width: 400px; height: 200px; background-color: white;
         border: 1px solid black; margin: 100px auto; text-align: center;
         line-height: 200px; font-size: 18px;} 
    </style>
    <script>

        //随机颜色
        function randomColor(){
            var str = "rgb(" + parseInt(Math.random()*256) + "," +
            parseInt(Math.random()*256) + "," +parseInt(Math.random()*256) + ")";
            return str;
        }
        
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            var speed = 5;  // 第一次变化的大小
            var count =0;   //计算字体变化次数
            setInterval(function(){
                 oDiv.style.color = randomColor();

                //1.将字体上一次的字体大小取出
                var iCur = parseInt( getComputedStyle(oDiv)['fontSize']);
                //2.变化字体大小
                oDiv.style.fontSize =iCur + speed + "px";

                count++;
                if(count % 6 == 0){
                    speed *=-1;
                }
            },1000);
            
        }

    </script>
</head>
<body>
    <div id="div1">div文本</div>
</body>

luokii

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web前端开发笔记-----21.认识BOM、认识DOM

Web前端开发笔记-----21.认识BOM文章目录Web前端开发笔记-----21.认识BOM一、认识BOM1.系统对话框2.open方法3.history对象二、认识DOM一、认识BOMBOM(browser object model)浏览器对象模型1.系统对话框 alert() 弹出警告框 confirm() 弹出一个带确定和取消的提示框如果点击确定,返回true 如果点击取消,返回false prompt() 弹出一个带输入框的提示框参数: 第一个参数
复制链接

扫一扫