js中的BOM和DOM

一丶BOM

BOM:Browser object Model --浏览器对象模型

1.操作地址栏

1.获取地址栏  console.log(location);

获取地址或者设置地址--console.log(location.href);     设置地址 location.href='跳转地址'

地址解码--decodeURI(被编码的数据)

地址编码--encodeURI(要编码的数据)

2.获取/设置整个url中的数据部分---console.log(location.search)

3.获取/设置整个地址中的锚点  console.log(location.hash);

4.跳转页面  location.assign('跳转地址')     

5.替换地址  location.replace('替换地址')

6.刷新页面  location.reload()

2.window和window事件

定义在全局的变量其实就是window的属性  console.log(window);

定义在全局中的函数其实就是window的方法

window代表的是浏览器窗口  - 大小

宽    console.log(window.innerWidth)     console.log(innerWidth)

高   console.log(innerHeight);

事件:

window.οnlοad=function(){}  当网页中的所有资源都加载完之后在执行这个事件

window.onscroll  滚动事件 当网页滚动条的位置发生改变的时候触发这个事件

window.onresize  浏览器窗口改变事件  当浏览器的窗口大小发生改变的时候触发这个事件

3.控制窗口

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

window.close() 关闭窗口

window.scrollTo(0,300)  控制窗口滚动条

4.定时器

1.setInterval(函数代码,毫秒数)  让一个人函数每隔一段时间就执行一次,会不停的执行

var a = 1    setInterval(function() { console.log(++a);}, 1000)       停止计时器clearInterval(返回值)

2.setTimeout(函数代码,毫秒数) 让一个函数延迟一段时间执行,只能执行一次   clearTimeout  停止计时器

5.同步异步

1.同步  先执行上面的再执行下面的

for(var a = 1; a <= 10000; a++) {

     console.log(1);

 }

 console.log(2);

2.异步 两个函数代码同时执行

setTimeout(function() {console.log(1);}, 2000)

setTimeout(function() {console.log(2);}, 3000)

6.js和异步的关系

1.定时器给的时间不精准

2.异步代码一定会在所有同步代码执行结束后才会执行

二丶DOM

DOM：document object model - 文档对象模型

1.dom操作html基本结构

document.body

document.documentElement     可以获取html元素及其所有内容

document.head  可以获取head元素

document.title  可以直接获取title的文本

2.获取标签

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

var oDiv = document.querySelector('div')

var oDiv = document.querySelector('.box')

var oDiv = document.querySelector(' [ a = "b" ] ')

var oDiv = document.querySelector('body>div')

var oDiv = document.querySelector('body div')

var oDiv = document.querySelector('body div:first-child')

var oDiv = document.querySelector('div')

语法:document.querySelectorAll('css选择器')    满足css选择器的所有元素都选中

 var oDivs = document.querySelectorAll('div') // 伪数组 有下标 能遍历 有长度 就是不能使用数组方法

dom中元素的特性：console.log输出的时候都是标签的样子，不是对象的样子

切换成对象样子 console.dir(oDiv)

3.其他获取方式

1.标签选择器

var oDivs = document.getElementsByTagName('div')

console.log(oDivs);   只能获取到集合

2.类名选择器

var oDivs = document.getElementsByClassName('box')

console.log(oDivs); 

3.name属性选择器

var oDivs = document.getElementsByName('mybox')

console.log(oDivs); 

4.id选择器

var oDiv = document.getElementById('myid')

console.log(oDiv); 

4.操作标签的内容

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

标签(伪数组).innerHTML  获取带有标签的内容

获取表单标签

var oInput = document.querySelector('input')

console.log(oInput.value);   内容操作使用  表单标签.value

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

操作内容，必须是 具体的 标签.属性 来操作，不能是  集合.属性 操作

不管是设置文本内容还是带有标签的内容，原本的内容就不见了，被覆盖掉了

5.属性操作

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

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

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

6.样式操作

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

var oDiv = document.querySelector('div')

 oDiv.style.width = '100px'

 oDiv.style.height = '50px'

封装批量设置标签样式的函数

 function setStyle(ele, obj) { for(var key in obj) { ele.style[key] = obj[key]   } }

setStyle(oDiv, { width: '200px', height: '100px',backgroundColor: '#f00',border: '1px solid #000' })

获取样式   

语法 :  window.getComputedStyle(标签)

// console.log( getComputedStyle(oDiv) );

// console.log( getComputedStyle(oDiv).width );

7.类名操作

类名操作语法    标签.className  = 值      

oDiv.className = 'box border'   给div设置类名

获取标签类名      标签.className

    // console.log(oDiv.className);

    // var cname = oDiv.className + ' border'

    // oDiv.className = cname

清空所有类名      oDiv.className= ' '

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

添加类名  oDiv.classList.add(新类名)  

删除类名  oDiv.classList.remove(被删除的类名)

判断某个类名是否存在    标签.classList.contains(类名)

让一个类名在添加和删除之间切换   标签.classList.toggle(类名)