DOM和BOM操作

.innerHtml='str'

以字符串形式设定标签内容 字符串内容 支持标签形式

= 等于赋值 执行的是 覆盖写入

+=

获取

布尔属性 

不是所有标签都有布尔属性

radio checkbox 

标签对象.setattribute('属性'，'属性值') 覆盖设置 把原来的覆盖

.getattribute(' ')

（'input'）

标签支持的布尔属性的操作方法

标签对象.布尔属性=true/false

true 就是执行布尔属性

false 就是取消布尔属性

id.classList.add() ;

id.classList.remove();

id.classList.replace();

id.classList.toggle(); 无就新增，有就去掉

设定css样式  odiv.style.color='red'; (行内式)

注意 js的-执行减法运算 若带有- 必须用 驼峰命名法  

获取css中的样式 window.getComputedStyle(odiv).width

const body = document.querySelector('body')
        console.log(window.getComputedStyle(body).width);//2000px

获取css的宽度

 offsetwidth=width+padding+border

 clientwidth=width+padding

鼠标定位

标签对象 和标签父级 有不同的css样式设定

offsetleft ;

offsettop

di.

定位父级情况1 null

  标签本身 有固定定位 定位父级是视图窗口左上角

定位父级情况2 body

  标签本身 有定位 父级标签没有定位

事件绑定 

本质是绑定事件时 找到堆中的存储空间

事件处理函数 以回调函数的语法形式绑定事件处理函数

回调函数的语法形式

1，匿名函数

2，封装好的函数名称

回调函数的本质 是 赋值函数的存储空间

onclick 语法 事件绑定本质是 赋值存储的形式

οnclick=function(){} 可以删除 事件

后赋值的事件 会覆盖之前的赋值的事件

也就是 一个事件源只能绑定一个事件处理函数

删除 只能删函数名称 不能删匿名函数

BOM 方法 浏览器对象模型

所谓的bom操作必须是浏览器兼容的 支持的函数方法

浏览器视窗窗口的宽度高度

修改 页面可视范围的方法

方法1 页面放大缩小

方法2 页面边界拖拽

1，不计算滚动条；document.documentElement.clientwidth

2,   计算滚动条 ；window.innerWidth;

浏览器视窗窗口大小改变监听事件

window.addEventListener('resize', function () {
        var di = document.querySelector('div');
        if (document.documentElement.clientWidth > 1200) {
            di.style.width = '800px';
            di.style.backgroundColor = 'pink';
        } else if (document.documentElement.clientWidth > 1000) {
            di.style.width = '600px';
            di.style.backgroundColor = 'blue';
        } else if (document.documentElement.clientWidth > 800) {
            di.style.width = '400px';
            di.style.backgroundColor = 'green';
        } else {
            di.style.width = '200px';
            di.style.backgroundColor = 'orange';
        }
    })

三个弹窗事件

alert（）//警告

prompt（）//输入框

comfirm（） // 确认框