前端（十六）—— JavaScript盒子模型、JS动画、DOM、BOM

JS盒子模型、JS动画、DOM、BOM

一、JS盒模型

1、width | height

• parseInt(getComputedStyle(ele, null).getPropertyValue('width'))
• parseInt(getComputedStyle(ele, null).getPropertyValue('height'))

2、padding + width | padding + height

• clientWidth
• clientHeight

3、border + padding + width | border + padding + height

• offsetWidth
• offsetHeight

4、结合绝对定位，距离最近定位父级的Top | Left

• offsetTop
• offsetLeft

二、JS动画

（一）、JS结合CSS实现动画

1、通过事件修改指定的样式，形成过渡的第二状态

<style>
    #div {
        width: 200px;
        height: 200px;
        background: red;
        transition: .2s;
    }
</style>
<div id="div"></div>
<script>
    div.onclick = function() {
        this.style.width = '400px';
    }
</script>

2、通过事件修改指定的类名，形成过渡的第二状态

<style>
    .div {
        width: 200px;
        height: 200px;
        background: red; 
        transition: .2s;
    }
    .div.active {
        transform: scale(1.2);
    }
</style>
<div id="div" class="div"></div>
<script>
    div.onclick = function() {
        var t_name = "active"
        var c_name = this.className;
        if (!c_name.match(t_name)) {
            this.className += " " + t_name;
        } else {
            this.className = c_name.replace(" " + t_name, "");
        }
    }
</script>

（二）、JS通过定时器实现动画

• 轮播图

三、DOM

（一）、JS中标签关系

<div class="sup">
    <div class="sub1"></div>
    <div class="sub2"></div>
    <div class="sub3"></div>
</div>

<script>
    var sub2 = document.querySelector('.sub2');
    // 父级标签
    console.log(sub2.parentElement);
    // 上一个标签
    console.log(sub2.previousElementSibling);
    // 下一个标签
    console.log(sub2.nextElementSibling);

    var sup = document.querySelector('.sup');
    // 所有子标签
    console.log(sup.children);
    // 第一个子标签
    console.log(sup.firstElementChild);
    // 最后一个子标签
    console.log(sup.lastElementChild);
    
    // 指定的子标签,根据索引获取
    sub2 = sup.children[1];
</script>

（二）、JS操作页面标签

// 创建一个div标签,创建一个标签，就只有一个标签课添加
var div = document.createElement("div");
// 添加到body末尾，返回自身
div = body.appendChild(div);
// 将div插入到body中box标签前，前者插入到后者之前，返回自身
div = body.insertBefore(div, box);
// 用div替换掉body中box标签，用前者替换后者，返回box
box = body.replaceChild(div, box);
// 在body中移除div，返回自身
div = body.removeChild(div);

总结：

• 创建元素只能由document来创建，创建一次只能创建一个标签对象，添加只能添加到最后一次操作的位置（某个标签的子标签的最后一个）
• 删除标签后，删除对象被保存，可以 重新添加回来

（三）、JS操作DOM一般步骤

1、创建标签：div = document.createElement('div');

2、设置标签样式文本：div.className = "div";

3、添加到页面指定位置： body.appendChild("div"); …………

四、BOM

1、窗口操作 open

// 新tag打开目标地址
open("http://www.yahoo.com");
// 自身tag转跳目标地址
open("http://www.yahoo.com", '_self');
// 自定义窗口打开目标地址
open("http://www.yahoo.com", '_blank', 'width=300, height=300');

2、历史记录 history

// 历史后退
history.back();
// 历史前进
history.forward()

3、导航器 navigator

// 拥有浏览器信息的字符串
navigator.userAgent;

4、地址信息 location

// 协议
location.protocol
// 服务器
location.hostname
// 端口号
location.port
// 参数拼接
location.search