JS学习笔记（BOM对象、DOM对象）

BOM对象

window

window代表浏览器窗口

window.alert(1) //提示窗口
window.innerHeight
window.outterHeight
//获取宽高

Navigator

Navigator,封装了浏览器的信息（不常用，会被人为修改）

window.navigator.appName
navigator.userAgent //获取用户等信息

screen

获取屏幕像素

screen.width
1920
screen.height
1080

location(重点)

代表当前页面的URL信息
其本身是个对象
具有如下重要的属性

host:"www.baidu.com"//主机
href:"https://www.baidu.com/"//当前指向的位置
protocol:"https:"//传输协议
reload:f reload()//方法。重新加载网页

//设置新的地址
location.assign(url)

document

代表当前的页面，HTML,DOM文档树

获取具体的标签节点，来动态的操作网页

document可以获得网页的cookie

document.cookie

history

history.back()//返回
history.forward()//前进

DOM对象（重点）

核心
浏览器网页就是一个DOM树形结构

更新：更新DOM节点

遍历DOM节点：得到DOM节点

删除：删除DOM节点

添加：添加一个新的节点

要操作一个DOM节点，就必须要

获得一个DOM节点

//标签选择
var p1 = document.getElementByTagName("h1") //获得所有h1标签的节点
//id选择器
var p2 = document.getElementById("id")//获得id为“id”的标签的节点
//类选择器
var p3 = document.getElementByClassName("class")//获得类名为“class”的标签的节点
var boy = father.children;//获取父节点下的所有子节点
father.firstChild//获取第一个节点
father.lastChild//获取最后一个节点

原生代码，之后要使用jQuery();

更新DOM节点

即修改更新网页显示样式

var id1 = document.getElementById("id");
id1.innerText="修改文本的值"
id1.innerHTML='<strong>加粗文本</strong>'//解析文本标签
id1.style.color = 'red'//修改颜色
id1.style.fontsize = '20px'

删除节点

步骤：
1.获取父节点
2.通过父节点删除目标节点

一般操作流程为：
获得目标节点（var self = decument.getElementById(‘p1’);）
获得目标父节点(var father = p1.parentElement;)
通过父节点删除

father.removeChild(erzi)

删除是一个动态的过程，删除多个节点时，子节点数组下标是不断变化的。

插入节点

获得了某个DOM节点时，如果是空的，通过innerHTML就可以增加元素
但是如果不为空，就会覆盖原来所有的元素，所以一般用
追加操作来插入节点

//追加到已存在的节点
list.appendChild(js);//将js元素追加到list元素中，原js元素会消失
//创建一个新的节点
var new = docunment.createElement('p');
new.id='new';
new.innerText = 'hello';