一、BOM对象
1.操作BOM对象
1)浏览器介绍
JavaScript和浏览器的关系:JavaScript的诞生就是为了能够让它在浏览器中运行。
常用浏览器:IE 6~11(8版本后改动非常大)、Chrome、Safari、FireFox(Linux上默认的)
第三方浏览器:QQ浏览器、360浏览器…
2)window代表浏览器窗口
①弹窗 window.alert()
②内部高度 window.innerHeight
③内部宽度 window.innerWidth
④外部高度 window.outerHeight
⑤外部宽度 window.outerWidth
可以调整浏览器窗口大小调试
3)navigator封装了浏览器的信息
①应用名 navigator.appName
②浏览器版本 navigator.appVersion
③用户信息 navigator.userAgent
④系统版本 navigator.platform
大多数时候,不会使用navigator对象,因为会被人为修改。
不建议使用这些属性来判断和编写代码。
4)screen代表屏幕尺寸
①屏幕宽度 screen.width
②屏幕高度 screen.height
5)location代表当前页面信息的URL信息
以百度为例
①主机 host "www.baidu.com"
②当前指向位置 href 用来跳转网页 "https://www.baidu.com/"
③协议 protocol "https"
④重新加载 reload 用于刷新网页 f reload()
⑤设置新地址 location.assign()
6)document代表当前页面 DOM数
①页面标题 document.title
例:
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>
②能获取具体的文档树结点,能动态的增加或删除结点,就能动态的修改文章。
③获取cookie document.cookie
劫持cookie原理:网页弹出别人植入的弹窗(引入了js),在js中写了get一个document.cookie,然后再用Ajax请求到他的服务器上。
以登录淘宝,天猫也登录了为例
服务器端可以设置cookie:httpOnly,来保证安全性。
7)history代表浏览器的历史记录
①前进 history.forward()
②后退 history.back()
二、DOM对象
核心:浏览器网页就是一个DOM树形结构。
1.获得DOM结点
更新:更新DOM节点。
遍历DOM节点:得到DOM节点。
删除:删除一个DOM节点。
添加:添加一个新的节点。
要操作一个DOM节点,就必须要先获得这个DOM节点。
例:
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应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;//获取父节点下的所有子节点
</script>
①获得父节点的第一个子节点 father.firstChild
②获得父节点的最后一个子节点 father.lastChild
这是JS的原生代码,以后尽量使用jQuery。
2.更新DOM节点
例:通过id获取节点,其id为id1。
1)操作文本
①修改文本的值 id1.innerText
②可以解析HTML文本标签 id1.innerHTML
2)操作CSS
id1.style.属性 = '值';
注:Ⅰ属性使用字符串包裹。
Ⅱ属性中-转驼峰命名。
3.删除DOM节点
删除节点的步骤:先获取父节点,再通过父节点删除自己。
例:删除p1。
<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是在时刻变化的,删除节点的时候一定要注意。
4.创建和插入DOM节点
当获得了某个DOM节点,假设这个DOM节点是空的,可以通过innerHTML就可以增加一个元素了。但是如果这个DOM节点已经存在元素了,就不会这样操作,会产生覆盖。
1)追加
例:
<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>
结果为
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
<p id="js">JavaScript</p>
</div>
2)创建一个新的标签,实现插入
var js = document.getElementById('js');
var list = document.getElementById('list');
//通过JS创建一个新的节点
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = 'Hello World';
list.appendChild(newP);//创建的p标签追加到list中
//创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
body.appendChild(myScript);
//可以创建一个style标签
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:blue}';//设置style的标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle);
3)insertBefore
语法:
要包含的节点.insertBefore(newNode,targetNode);
例:在ee的前面插入js
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
list.insertBefore(js,ee);