js笔记 BOM history，location，documen对象 Ⅶ

三.history对象

历史浏览器

history.back() 后退 等价于 history.go(-1)

history.forward() 前进 等价于 history.go(1)

四.location对象

1.location.herf 获取当前页面的完整url

location.herf =“其他页面完整的url” 做页面跳转

2.location.reload() 刷新本页面

3.location.replace(“完整URL”) 做页面的跳转

五.document对象

（一）常用的属性和方法

1.document.URL 返回当前页面的完整url

2.document.referrer 返回当前页面来源页面的url

3.document.write(‘要写入的内容’) 向文档写入内容 可以是任何内容

（二）获取节点的内置方法 get

1.获取某1个 且他是固定的 用id

2.获取某1个 且不特定 不想加id 用querySelector

3.获取一堆同样的标签集合 不管层级结构 用TagName

4.获取不同层级中，不同的标签同时获取 getElementsByTagName

5.获取有相同类名样式标签 用ByClassName

6.获取一堆有相同CSS选择器的标签集合 用querySelectorALL

//1.获取某1个  且他是固定的  用id
let pic = document.getElementsByTagName("pic");
				console.log(pic);

//2.获取某1个   且不特定   不想加id 用querySelector
	let oDiv = document.querySelector(".div1 p");

//3.获取一堆同样的标签集合  不管层级结构  用TagName
let ps = document.getElementsByTagName("p"); 
//不管层级结构    很少用
	console.log(ps);

//获取某个父级内所有的同名的子标签
let one = document.getElementsByTagName("one");
let ps2 = one.getElementsByTagName("p");

//4.获取不同层级中，不同的标签同时获取  getElementsByTagName
let sels = document.getElementsByTagName("sel");
console.log(sels);

//5.获取有相同类名样式标签   用ByClassName
let reds = document.getElementsByTagName("red");
console.log(reds);
// 6.获取一堆有相同CSS选择器的标签集合  用querySelectorALL
var ops = document.querySelectorAll(".div1 p");
console.log(ops);

（三）修改节点的内容

节点：innerHTML = “新的内容”

注意：新内容可以是数据也可以是标签，innerHTML设置的新内容会覆盖原本有的内容

（四）属性

1.查看属性值

节点.getAttribute（“属性名”）

2.设置新的属性值

节点.getAttribute(“属性名” ，“新的属性名”)

法一：节点.getAttribute(“属性名” ，“新的属性名”)

法二：节点.属性名 = “新的属性名”

注意修改内名 用 节点.className = “新类名”

（五）样式

法一：节点.style.样式名 = “新的样式值” 每次只能设置一个

法二：节点.style=“新样式名1：样式值1；新样式名2：样式值2；…” 1次设置多条样式 同css的写法

法三：节点.getAttribute(“style” , “新样式名1：样式值1；新样式名2：样式值2；…” ) 1次设置多条样式 同css的写法

法四：节点className = “新类名” 样式都放在类名里