BOOM和DOOM操作

BOM

BOM操作指的是浏览器对象模型，它可以是JavaScript可以于浏览器进行对话，在JavaScript中与浏览器交互就是对window对象进行操作

window对象

window对象是客户端JavaScript最高层对象之一，由于window对象是其他大部分对象的共同的祖先，在调用window对象的方法和属性是，可以省略window对象的引用，也就是说window.document.write()可以简写成document.write()

window对象常用的方法：

方法	作用
window.innerHeight	浏览器窗口内部的高度
window.innerWidth	浏览器窗口内部的宽度
window.open	打开窗口
window.close	关闭窗口

window的子对象

navigator

判断用户使用的浏览器

navigator.appName  // 得到用户使用的浏览器全程
navigator.appVersion  // 得到用户使用浏览器的版本和厂商
navigator.userAgent  // 浏览器的大部分信息
navigator.platform  // 浏览器所在的操作系统

screen对象

屏幕对象

screen.availWidth  // 获得屏幕可用的宽度
screen.availHeight  // 获得屏幕可用的高度

history

就是操纵浏览器的前一页和后一页的按钮

history.forward()  //前进一页
history.back()  // 后退一页

location对象

可以用于获得当前页面的地址，并把浏览器重定向到新的页面

location.href  // 获取当前页面的地址
location.herf = '目标网页的url'  // 跳转到目标界面
location.reload()  // 重新加载当前页面

弹出框

在JavaScript中有三种消息弹出框：

1. 警告框

   用于确保用户可以得到某些信息，使用alert关键字

   alert('警告信息');

2. 确认框

   用于使用户可以验证或接受某些信息，需要用户点击确认或者取消按钮才能继续操作，使用confirm关键字

   confirm('确认信息')

3. 提示框

   用于提示用户在进入页面前输入某一个值，需要用户输入信息点击确认或者取消才能继续操作，使用prompt关键字

   prompt('提示信息')

计时相关

类似于python中的time.sleep，可以让代码在一定时间间隔之后来执行代码

setTimeout

var t = setTimeout('需要执行的语句'，时间（毫秒）)

使用setTimeout方法会返回一个返回值，如果需要取消这个方法，可以使用这个变量名取消，其他情况基本不会去使用

第一个参数是一个字符串，可以是需要执行的语句，也可以是调用一个函数，执行语句要加上引号，对函数的调用不要加引号

第二个参数的单位是毫秒

clearTimeout

clearTimeout(接收setTimeout返回值的变量名)

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

setInterval

可以周期性的调用函数或者计算表达式，如果不被关闭就会一直被弹出，用法与setTimeout类似

var t = setInterval("JS语句",时间间隔)

clearInterval

取消setInterval，用法与clearTimeout相似

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

DOM

DOM操作指的是文档对象模型，它可以访问HTML文档的所有元素

每当页面被加载时，浏览器会创建页面的文档对象模型

HTML DOM树

DOM标准规定HTML文档中的每个成分都是一个节点

• 文档节点：document对象，代表整个文档
• 元素节点：element对象，代表一个标签
• 文本节点：text对象，代表标签中的文本
• 属性节点：attribute对象，代表标签中的属性
• 注释节点：comment对象

JavaScript中可以通过DOM创建动态的界面，有如下一些作用

• JavaScript能够改变也i面中所有的HTML元素
• JavaScript能够改变页面中所有HTML元素
• JavaScript能够改变页面所有的css样式
• JavaScript能够对页面所有事件作出反应

标签查找

直接查找

1. 根据id查找doucument.getElementById查找到的结果是是对象本身
2. 根据class属性查找doucument.getElementByClassName查找到的结果是数组，通过索引取值得到对象本身
3. 根据标签名查找document.gteElemenByTagName查找到的结果是数组，通过索引取值得到对象本身

间接查找

1. 父节点查找当前节点对象.parentElement
2. 子节点查找当前节点对象.childrenElement
3. 第一个子节点firstElementChild
4. 最后一个子节点lastElementChild
5. 下一个兄弟标签netxElementSibling
6. 上一个兄弟标签previousElementSibling

节点操作

创建节点

var divEle = document.createElement('需要创建的标签')

这里定义的变量名最好使用标签名+Ele的形式定义，这样就可以一目了然的看到创建的标签类型

添加节点

1. 追加节点

   添加子节点

   somenode.appendChild(需要添加的节点)

   var divEle = doucument.getElementsByClassName('c1')[0]  // 通过类取标签取到的是一个数组，需要先索引取值
   divEle.appendChlid(imgEle)

   添加节点到最下方

   somenode.append(需要添加的节点)

   var divEle = document.getElementsByClassName('c1')[0]
   divEle.append(imgEle)

   append和appendChild 的区别：

   append可以同时传入多个节点或字符串，且没有返回值

   appendChild只能传入一个节点，不支持字符串

2. 插入节点

   somenode.insertBefor(需要添加的节点，某个节点)

var pEle = doucument.getElementByTagName('p');
var imgEle = doucment.createElement('img');
imgEle.setAttribute('src','https://www.baidu.com');
pEle.appendChild(imgEle)

删除节点

somenode.remove(需要删除的节点)

替换节点

somenode.replace(需要替换的节点，某个节点)

属性节点

文本节点

// 获取文本节点的值
// 获取节点
var divEle = doucument.getElementById('id')
// 获取文本
divEle.innerText
// 获取整个HTML代码
divEle.innerHTML

// 设置文本节点的值
divEle.innerText = '1231230';
// 添加HTML代码
divEle.innerHTML = '
2
'

// 通过innerText添加的值为文本，就算是HTML代码也只是以文本形式显示
// 没有赋值符号是获取文本，有赋值符号是设置文本

attribute操作

var divEle = document.getElementById("d1");
// 可以设置默认的属性，也可以设置自定义的属性
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性可以直接使用.属性名来获取和设置值
imgEle.src
imgEle.src="..."

input标签，select标签，textarea标签获取值

可以直接使用.value的型式elementNode.value

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

class操作

• 获取所有样式类名（字符串）className
• 删除指定类classList.remove()
• 添加类classList.add()
• 判断类是否属于标签classList.contains()
• 存在删除，否则添加classList.toggle()

指定css操作

obj.style.backgroundColor="red"

JS操作CSS属性的规律：

1. 对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

1. 对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

事件

事件指的是当符合某种条件下，自动触发的动作或者响应

事件的两种绑定方式

方式一

在标签内部写发生的事件，在script标签内写事件发生的代码

 
    这是一个链接
  
   

方式二

全部写在body最下面的script标签中

这是一个链接
  

常用事件

事件	作用
onclick	点击某个对象时调用事件句柄
ondblclick	双击某个对象时调用事件句柄
onfucus	某个元素获得焦点时调用事件句柄
onblur	某个元素失去焦点时调用事件句柄
onselect	在文本框文本被选中时调用事件句柄
onsubmit	点击确认按钮时调用事件句柄，使用的对象时form

事件练习

开关灯示例

    
    
    
    
    


    

    变色

    

input获取焦点示例

展示当前时间示例

    

    


    
    开始计时
    结束计时
    

省市联动示例

    
    


省:




市: