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);
}

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

在这里插入图片描述