1.BOM
浏览器介绍
JavaScript 和 浏览器关系？
JavaScript 诞生就是为了能够让他在浏览器中运行！
BOM : 浏览器对象模型
- IE 6~11
- Chrome
- Safari
- FireFox
第三方
- QQ浏览器
- 360浏览器
window （重要）
window 代表 浏览器窗口
window.alert(1)
undefined
window.innerHeight
258
window.innerWidth
919
window.outerHeight
994
window.outerWidth
919
Navigator （不建议使用）
Navigator ,封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36"
navigator.platform
"Win32"
大多数时候，我们不会使用 navigator 对象，因为会被人为修改！
不建议使用这些属性来判断和编写代码
screen
代表屏幕尺寸
screen.width
1920 px
screen.height
1080 px
location （重要）
location 代表当前页面的URL信息
host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:ƒ reload() // 刷新网页
// 设置新的地址
location.assign('https://blog.csdn.net/love_to_share')
document （内容； DOM）
document 代表当前的页面， HTML DOM文档树
document.title
"百度一下，你就知道"
document.title='YY'
"YY"
获取具体的文档树节点
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>=
获取 cookie
document.cookie
"__guid=111872281.88375976493059340.1578110638877.133; monitor_count=1"
劫持 cookie 原理
www.taobao.com
<script src="aa.js"></script>
<!--恶意人员；获取你的cookie上传到他的服务器 -->
服务器端可以设置 cookie：httpOnly
history （不建议使用）
history 代表浏览器的历史记录
history.back() //后退
history.forward() //前进
2.DOM
核心
浏览器网页就是一个Dom 树形结构！
- 更新：更新Dom节点
- 遍历dom节点：得到Dom节点
- 删除：删除一个Dom节点
- 添加：添加一个新的节点
要操作一个Dom节点，就必须要先获得这个Dom节点
获得dom节点
//对应 css 选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var childrens = father.children[index]; //获取父节点下的所有子节点
// father.firstChild
// father.lastChild
这是原生代码，之后我们尽量都是用jQuery() ;
更新节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
</script>
操作文本
id1.innerText='456'修改文本的值id1.innerHTML='<strong>123</strong>'可以解析HTML文本标签
操作css
id1.style.color = 'yellow'; // 属性使用 字符串 包裹
id1.style.fontSize='20px'; // - 转 驼峰命名问题
id1.style.padding = '2em'
删除节点
删除节点的步骤： 先获取父节点，在通过父节点删除自己
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self)
// 删除是一个动态的过程；
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>
注意： 删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意!
插入节点
我们获得了某个Dom节点，假设这个dom节点是空的，我们通过 innerHTML 就可以增加一个元素了，但是这个DOM 节点已经存在元素了，我们就不能这么干了！会产生覆盖
追加
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);// 追加到后面
</script>
效果：
创建一个新的标签，实现插入
<script>
var js = document.getElementById('js'); //已经存在的节点
var list = document.getElementById('list');
//通过JS 创建一个新的节点
var newP = document.createElement('p');// 创建一个p标签
newP.id = 'newP';
newP.innerText = 'Hello,yy';
// 创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
// 可以创建一个Style标签
var myStyle= document.createElement('style'); //创建了一个空style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color: chartreuse;}'; //设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>
insertBefore
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
