<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
BOM 浏览器对象模型 核心就是window对象
window.open(URL,name,specs,replace) 方法用于打开一个新的浏览器窗口
innerHeight 和 innerWidth 获取浏览器窗口的宽度和高度（包含滚动条的）
location.href 存储的是浏览器地址栏url的信息
window.location.href = "www.baidu.com" 可以实现链接跳转
window.location.reload()刷新网页 不要写在全局 不然一直处于刷新状态
location.host 是一个可读写的字符串 返回当前url的主机名和端口号
location.hostname 返回url的主机名
history
history.back() 回退历史记录的 回到前一个页面
history.forward() 去到下一个历史记录里面
history.go(-1) 就相当于回到前一个页面
navigator.userAgent 是获取的浏览器的整体信息
navigator.appName 获取的是浏览器的名称
navigator.appVersion 获取的是浏览器的版本号
navigator.platform 获取到的是当前计算机的操作系统
DOM document Object model 文档对象模型
三类DOM 标准接口
Core DOM 核心DOM
XML DOM
HTML DOM
三个节点
元素节点
文本节点
属性节点
document.getElementById("box") 通过标签的id名来获取
document.getElementByClassName("box") 通过标签的class 名称获取
document.getElementByTagName("p") 通过标签的 标签名
document.querySelector(".box #box div") 是按照选择器的方式来获取元素
这个方式只能获取页面中第一个满足条件的元素
docunment.querySelectorAll() 找到所有满足条件的元素 是一个伪数组
querySelector 和 getElementBy 区别
最重要的区别 querySelector 是静态节点列表
getElementBy 是动态的节点列表
innerHTML 获取内部的html 结构
innerText 获取元素的文本内容 不包括标签哈
getAttribute() 获取元素的某个属性 包括自定义属性
setAttribute() 给元素设置一个属性 包括自定义属性
removeAttribute() 移除元素身上某个元素
data-set html 新特性-自定义属性
style
是专门给元素 添加css样式的 添加的是行内元素的
className
是专门操作元素的类名的
在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖
特殊标签的获取方式
document.body 获取body标签
document.head 获取head标签
document.title 获取的是title标签中内容
document.documentElement 获取html 标签
DOM节点
元素节点 通过querySelector getElementBy 获取到的都是元素节点
文本节点 通过 innerText
属性节点 通过 getAttribute 获取的
childNodes 获取某一个节点下的所有节点 包括 元素节点 文本节点
children 只获取某一个节点下的元素节点
firstChild 获取某一个节点下的第一个节点 包括文本节点
lastChild 获取某一个节点下的最后一个节点 包括文本节点=>#text
fristElementChild 只获取某一个节点下的第一个元素节点
lastElementChild 只获取某一个节点下的最后一个元素节点
nextSibling 获取某一个节点的下一个兄弟节点 包括文本节点
previousSibling 获取某一个节点的上一个兄弟节点 包括文本节点
nextElementSibling 只获取某一个节点的下一个元素节点
previousElementSibling 只获取某一个节点的上一个元素节点
parentNode 获取某一个节点的父节点 parentNode
attributes 获取某一个节点的所有属性节点 attributes attributes
nodeType 获取节点的节点类型 用数字表示
1 就代表 元素节点
2 就代表 属性节点
3 就代表 文本节点
-nodeName：获取节点的节点名称
console.log(eleNode.nodeName) // LI
console.log(attrNode.nodeName) // test
console.log(textNode.nodeName) // #text
- 元素节点的 nodeName 就是 大写标签名
- 属性节点的 nodeName 就是 属性名
- 文本节点的 nodeName 都是 #text
nodeValue： 获取节点的值
- 元素节点没有 nodeValue
- 属性节点的 nodeValue 就是 属性值
- 文本节点的 nodeValue 就是 文本内容
操作DOM 节点 无非就是增删改查
createElement 创建一个元素节点
createTextNode 创建一个文本节点
appendChild 向父元素节点的末尾追加一个子节点
insertBefore 向某一个节点前追加一个节点
父节点.insertBefore(要插入的节点，插入再哪一个节点的前面)
removeChild 移除父节点下的某一个节点
父节点.removeChild()
replaceChild(新节点，旧节点) 替换节点
cloneNode ：克隆页面中的某一个节点
获取元素的非行间样式
getComputedStyle（非IE使用） window.getComputedStyle(oDiv).height
currentStyle（IE使用） oDiv.currentStyle.height
创建文档碎片
var oFrag = document.createDocumentFragment();
clientWidth和clientHeight 内容+padding的区域的宽度和高度
clientLeft和clientTop 获取的上边框和左边框的宽度
offsetLeft 和 offsetTop 获得元素的偏移量
offsetWidth 和 offsetHeight 获取元素内容宽高 + padding宽高 + border宽高 的和
- 获取的是页面向上滚动的距离
- 一共有两个获取方式
- document.body.scrollTop
- document.documentElement.scrollTop
*/
// console.log(window.innerWidth);
// console.log(window.innerHeight);
console.log(window.location.href);
// window.location.href = "./ES5和ES6.html"
console.log(window.location.host); // 127.0.0.1:5500
// window.location.host = "http://localhost:8080"
console.log(window.location.hostname); //127.0.0.1
// console.log(document.documentElement);
</script>
</body>
</html>