JS-DOM文档对象、BOM浏览器对象

DOM

概念：DOM（Document Object Model）：文档对象模型

在DOM中提供了很多属性和方法，用于操作HTML中的，标签、样式、文本内容等节点

DOM树：

DOM，通过这样的一个对象模型，去操作节点（增、删、查、改）；

node节点

在DOM中，我们把构成页面的标签、属性、样式、文本等统称为节点，html节点只指html标签

Document对象

每个载入到浏览器中的html文档，都会生成一个对应的document对象，通过操作document对象，我们就可以达到修改html文档的效果，操作DOM，

document对象

常用的属性

属性	说明
body	获取到body标签节点
title	获取到title标签节点里的文本
URL	获取URL地址

document.title='沙皮狗的忧伤'   //实现动态修改标题的语法

获取元素节点的方法

方法	语法	说明	返回值
getElementById()	document.getElementById(id名)	通过id获取元素节点	元素节点
getELementsByClassName()	document.getELementsByClassName(class名)	通过class获取元素节点	数组（元素节点）
getELementsByTagNmae()	document.getELementsByTagNmae(标签名)	通过标签获取元素节点	数组（元素节点）
querySelector()	document.querySelector(css选择器)	通过css选择器获取元素节点	第一个获取到的元素节点
querySelectorAll()	document.querySelectorAll(css选择器)	通过css选择器获取元素节点	数组（元素节点）

创建元素节点的方法

方法	语法	说明	返回值
creatElement()	document.creatElement('标签名')	创建一个节点	元素节点
creatTextNode() 了解	document.creatTextNode('文本')	创建一个文本节点	文本节点

Element对象

通过document对象获取或创建的标签其实返回的就是 element对象

var welcome = document.getElementById('welcome');
var h1 = document.createElement('h1')

添加节点到文档中——element对象的方法

方法	语法	说明
appenChild()	父节点.appenChild(子节点)	向一个节点中添加一个子节点，而且是父节点中的最后一个节点(通过父节点添加)
insertBefore()了解	父节点.insertBefore(新节点,指定节点)	在指定位置的前面添加一个节点
removeChild()	父节点.removeChild(指定子节点)	通过父节点去删除指定的子节点

  	    var div=document.getElementById("div");
        var p=document.createElement("p");
        var text= document.createTextNode("老沙");
        div.appendChild(p);
        console.log(div);

• 新方法 （完全不兼容ie）

方法	语法	说明
append()	父节点.append(子节点)	向一个节点中添加一个子节点，而且是父节点中的最后一个节点（之后）
prepend()	父节点.prepend(子节点)	向一个节点中添加一个子节点，而且是父节点中的第一个节点（之前）
before()	指定节点.before(兄弟节点)	向指定节点之前添加一个兄弟标签
after()	指定节点.after(兄弟节点)	向指定节点之后添加一个兄弟标签
remove()	指定节点.remove()	删除指定节点
replaceWith()	指定节点.replaceWith(新节点)	新节点替换指定节点

属性

元素的内容相关属性

属性	说明
innerText	获取或操作（增、删、查、改）element对象里的文本节点
`innerHTML	获取或操作（增、删、查、改）element对象里的html节点
value	获取或操作（增、删、查、改） 表单对象里的value属性
className	获取或操作（增、删、查、改） element对象里的class属性
style.样式属性名（小驼峰）	获取或操作（增、删、查、改） element对象里的内联样式
标签属性名	href 、src、type、title、alt… .获取或操作（增、删、查、改） element对象里的属性节点
checked	获取或修改input（单选框或多选框）的默认选中 ，通过布尔值

var link = document.getElementById('link')
// link.href = 'https://www.woniuxy.com'
// console.log(link.href)

// link.className = 'woniu2'
// // class在js中 是一个关键字
// console.log(link.className)

var   img = document.getElementById('img')
var   input = document.getElementById('input')

img.src = "./images/imgA_3.jpg"
img.width = '200'

input.type = "password"
console.log(input.type)

input.style.width = 500 + "px";
input.style.height = 500 + "px";

input.style.backgroundColor = 'red';
input.onclick = function(){
    if(input.style.backgroundColor == "red"){
        input.style.backgroundColor = 'blue';
    }else{
        input.style.backgroundColor = "red"
    }
}

关系节点的获取（了解）

属性名	说明
parentElement	获取父节点
firstElementChild	获取第一个子节点
lastElementChild	或取最后一个子节点
children	获取所有子节点
previousElementSibling	获取前一个兄弟节点
nextElementSibling	获取后一个兄弟节点

元素盒模型相关的属性

属性名	说明
clientWidth\clientHeight	获取元素的宽高 （只读）
offsetWidth\offsetHeight	获取元素的宽高(包含边框的宽度)（只读）
offsetLeft	获取元素相对于body的左边(只读)
offsetTop	获取元素相对于body的上边（只读）

BOM

window对象

常用属性

属性名	说明
innerHeight\innerWidth	浏览器视口（文档区域）的宽高
outerHeight\outerWidth	浏览器窗口的宽高
screenLeft\screenTop	浏览器距离电脑屏幕左、上的距离

console.log('innerHeight', window.innerHeight) //获取浏览器 视口的高度
console.log('innerWidth', window.innerWidth) //获取浏览器 视口的宽度

console.log('outerHeight',window.outerHeight)
console.log('outerWidth',window.outerWidth)

console.log(screenLeft,screenTop)

常用方法

方法名	语法	说明
alert()	alert('提示语句')	提示框
prompt()	prompt(‘输入框的提示语句’)	输入框
open()	open('https://www.woniuxy.com','_blank')	打开新窗口的

window-定时器

• 概念：定一个时间，在一段时间之后或者每隔一段时间要去执行的代码——定时器
• 分类
  1. 延时定时器：在一段时间后要去执行的代码
  2. 间隔定时器：每间隔一段时间执行的代码

延时定时器

var 变量名 = setTimeout(function(){
   //要延迟执行的代码  
},时间以ms为单位)

//清除延时定时器
clearTimeout(变量名)

间隔定时器

var 变量名 = setInterval(function(){
    //每间隔一段时间执行的代码
    
    clearInterval(变量名)
},时间)

方法名	语法	说明
setInterval()	setInterval(()=>{函数里要执行的代码},时间毫秒)	间隔定时器，间隔指定时间循环执行函数
setTimeout()	setTimeout(()=>{函数里要执行的代码},时间毫秒)	延时定时器，延迟指定时间执行函数一次
clearInterval()	clearInterval(对应定时器的变量名)	清除指定名字的间隔定时器
clearTimeout()	clearTimeout(对应定时器的变量名)	清除指定名字的延时定时器

注意：两个定时器都不会阻塞后面代码的执行，因为它们是异步代码

异步：暂时可以理解为最后去执行的代码，执行顺序为 先进先出

window四大内置对象

screen

属性：

属性	说明
screen	获取屏幕相关信息

history

属性：

属性	说明
length	获取当前窗口的历史记录

方法：

方法名	语法	说明
back()	history.back()	后退到上一条历史记录
forward()	history.forward()	前进到下一条历史记录
go()	history.go(前进或后退的步数)	如果为负数就是后退

navigator

属性	说明
userAgent	获取浏览器相关信息

location

属性：

属性	说明
href	可以获取到url地址，也可以修改url地址（实现了跳转页面的效果）
search	获取url地址栏 ？和？后面的字符

截取数据方法

//字符串的截取 substring ,截取的范围， 第一个参数   开始的下标，，第二个参数  结束的下标（不包含）
//split 通过字符  将字符串分开为数组

var data = location.search.substring(1,location.search.length).split('&').map(item=>{return { [item.split('=')[0]] : item.split('=')[1]  }})

方法

方法名	语法	说明
reload()	location.reload()	刷新页面