BOM和DOM

BOM

1.window的事件

window.onload 滚动条动了就会执行的事件

window.onload = function(){

}

window.onresize 当浏览器大小发生改变就会触发的事件

window.onresize = function(){

}

2.控制窗口

 window.open(目标地址)   打开新的窗口

window.close()  关闭当前窗口

window.scrollTo(x,y)

3.定时器

window.setInterval(函数代码，毫秒数 ); 隔一段时间执行一次不且会停止

window.setinterval(function() {

} , 18};

setTimeout(函数代码 ，毫秒)  隔一段时间吃一次，只执行一次

setTimeout(function(){

},18)

clearInterval（）清楚定时器

clearTimeout（）清楚定时器

DOM

1.获取标签

css选择器：类名、id、标签、后代、子元素、兄弟、伪类、群组、通配、属性

document.querySelector('css选择器')；满足css选择器的第一个元素

获取到的标签 - 是一个对象 - console.log只能看到标签 - 想看到对象使用console.dir

document.querySelectorAll('css选择器'); 满足css选择器的所有元素

var oDivs = document.querySelectorAll('div') //    oDivs是 伪数组

 

获取到的集合 - 是一个伪数组，可以遍历、取下标、可以有长度，就是不能使用数组方法

2.操作标签的内容

标签（伪数组）.innerText()  只能获取到文本

标签（伪数组）.innnerHTML 获取带有标签的内容

表单标签.value

<input type="text" value="请输入的别名">

console.log(oInput.value); //请输入的别名

oInput.value = '内容不能为空'

 3.属性操作

标签.getAttribute('属性名')    属性值获取   返回的属性值

标签.setAttribute('属性名','属性值')  设置属性

标签.removeAttribute('属性名') 删除属性

4.样式操作

标签.style.css的键 = 'css的值'    设置样式  (设置在行内)

windeow.getComputedStyle(标签) 获取样式   返回键值对里的所有样式组成的对象

5.类名操作

标签.className = 值   设置类名

标签.className 获取类名

标签.className = ' '  清空所有类名

标签.classList  包含所有类名操作的对象

标签.classList.remove(被删除的类名) 删除类名

标签.classList.add(新类名)  添加新类名

标签.classList.toggle(类名)  在删除之间切换

6.页面卷去的距离

  var t = documentElement.scrollTop  || document.body.scrollTop

 console.log(t)

7.短路运算

利用逻辑运算符号中的||和&&来判断他左右两边是否能进行到右边，能进行到右边就把右边的值赋值给变量，不能进行到右边，就把左边的值赋值给变量
    var a = true || false
        a的值是左边的值
    var a = false || true
        a的值是右边的值
    var a = true && false
        a的值是右边的值
    vafr a = false && true
        a的值是左边的值
    如果值不是布尔值，就转成布尔值进行

8.获取标签位置
    标签.offsetLeft
    标签.offsetTop
    参考物是设置过定位的祖宗元素

9.获取标签大小
    包含边框
        标签.offsetWidth
        标签.offsetHeight
    不包含边框
        标签.clientWidth
        标签.clientHeight

10.获取标签的边框厚度
    标签.clientLeft
    标签.clientTop