JavaScript学习(三)
操作BOM对象
浏览器介绍
JavaScript和浏览器关系?
JavaScript诞生就是为了能够让他在浏览器中运行
BOM:浏览器对象模型
- IE 6-11
- Chrome
- Safari
- FireFox
第三方
- QQ浏览器
- 360浏览器
window(重要)
代表浏览器窗口
window.alert(1)
undefined
window.innerHeight
232
window.innerWidth
940
window.outerHeight
831
window.outerWidth
954
Nevigator
封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36"
navigator.platform
"Win32"
大多数的时候,我们不会使用navigator
对象,因为会被人为修改
不建议使用这些属性来判断和编写代码
screen
代表屏幕尺寸
screen.height
864 px
screen.width
1536 px
location(重要)
代表当前页面的URL信息
document
代表当前的页面,HTML DOM文档树
document.title
"百度一下,你就知道"
document.title = "千度一下,你也不知道"
"千度一下,你也不知道"
获得具体的文档数节点
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>
history
代表浏览器的历史记录
history.back();//后退,跳到刚才浏览的页面
history.forward();//前进
操作DOM对象
DOM:文档对象模型,
核心
浏览器网页就是一个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");
document.getElementById("father");
var childrens = father.children[index];//获取父节点下的所有子节点
//father.firstChild 第一个子节点
//father.lastChance 最后一个子节点
</script>
更新节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById("id1");
</script>
操作文本
- id1.innerText='456' 修改文本的值
- id1.innerHTML='
标题一
' 可以解析HTML文本标签
操作CSS
id1.style.color="yellow";
id1.style.fontSize='50px';
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 = document.getElementById("father");
var childrens = father.children[index];
father.removeChild(p1)
//删除是一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</sprict>
注意: 删除多个节点的时候,children 是在时刻变化的,删除节点的时候一定要注意!
插入节点
我们获得了某个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>
创建一个新的标签,实现插入
<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);//追加到后面
//通过js创建一个新的节点
var newP = document.createElement('p');//创建一个新标签
newP.id = 'newP';
newP.innerText = 'hello,this is <p>';
list.appendChild(newP);
//创建一个style标签
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:green;}';//设置标签内容
//将创建的style标签插入
document.getElementsByTagName('head')[0].appendChild(myStyle);
insertBefore
var js = document.getElementById('js');
var ee = document.getElementById('ee');
var list = document.getElementById('list');
// 格式: 要包含的节点:insertBefore(newNode,targetNode)
list.insertBefore(js,ee);//将js节点插入到list节点中的ee节点的前面