js 笔记_08 BOM 及 DOM 相关

BOM

系统对话框

alert():弹出对话框;

confirm():弹出一个带确定和取消的提示框;

  • 返回值:如果点击确定,返回 true;如果点击取消,返回 false;

prompt():弹出一个带输入框的提示框;

  • 第一个参数:面板上显示的内容;
  • 第二个参数:输入框里面的默认内容;(可以不写)
  • 返回值:如果点击确定,返回输入框中的内容;如果点击取消,返回 null;

history 对象

作用:当前窗口历史记录,只要加载的 url 不一样就会产生历史记录;
注意不是浏览器的,而是当前窗口的历史记录。

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

location 对象的属性

url:统一资源定位符;
协议: // IP(域名) : 端口号 / 路径 / ? 查询字符串 # 锚点
protocol: // hostname: port / pathname / ?search # hash

DOM

节点类型

  • 元素节点: <div></div>
  • 属性节点:id = "box"
  • 文本节点:div 文本

获取有效样式

通过 .style.xxx 的方式只能访问内联的 css 样式;
而获取当前有效样式系统提供了两种方法:

  • IE j兼容:
alert(oDiv.currentStyle['height']);
  • 火狐,谷歌等兼容:
alert(getComputedStyle(oDiv)['height']);

定义一个跨浏览器也能兼容的方法:

function getStyle(node,cssStyle) {
    return node.currentStyle ? node.currentStyle[cssStyle] : getComputedStyle(node)[cssStyle];
}

实例:改变文本显示

每隔一秒,文字颜色随机改变,且文字变大变小,六次一循环:

html 文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变化的文字</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div id="text">
        某些文字        
    </div>

    <script src="./src/sw.js"></script>
</body>

</html>

css 文件

#text {
    width: 300px;
    height: 200px;
    margin: 100px auto;
    border: black solid 1px;
    text-align: center;
    font-size: 18px;
    line-height: 200px;   
}

js 文件

// 随机颜色
function randomColor() {
    let str = `rgb(${parseInt(Math.random()*256)},
               ${parseInt(Math.random()*256)},
               ${parseInt(Math.random()*256)})`;
    return str;
}

window.onload = function() {
    let otext = document.querySelector('#text');
    let changeSize = 5;
    let count = 0;

    setInterval(function(){
        otext.style.color = randomColor();
        let textSize = parseInt(getComputedStyle(otext)['fontSize']);
        otext.style.fontSize = textSize + changeSize + 'px';  
        count ++;
        if(count % 6 == 0){
            changeSize *= -1;
        }
    },1000);
}

效果如下:
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页