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节点的前面