< 笔记 > DOM - 02 BOM 概述

最新推荐文章于 2022-10-11 10:37:29 发布

Kevi_Song

最新推荐文章于 2022-10-11 10:37:29 发布

阅读量197

点赞数

分类专栏： < 笔记 > DOM 文章标签： dom 浏览器对象 browser 节点

本文链接：https://blog.csdn.net/weixin_38689154/article/details/78200590

版权

< 笔记 > DOM 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

02 BOM 概述

By Kevin Song

02-01 window中常用对象
02-02 window中常用方法
02-03 window中常用事件
02-04 document对象
02-05 节点操作

BOM（Browser Object Model）浏览器对象模型

作用：方便操作浏览器

02-01 window中常用对象

window对象：代表浏览器中一个打开的窗口
- navigator对象：包含关系web浏览器的信息
  - appName属性：获取浏览器名字
  - appVerson属性：获取浏览器版本
- history对象：包含用户已浏览的URL信息
  - back()方法：从历史列表中装入前一个URL
  - forward()方法：从历史列表中装入后一个URL
  - go()方法：从历史列表总和你装入URL
- Location对象

<html>
    <head>
        <title>Kevin's Homepage</title>
    </head>
    <body>
        <!--定义一个事件源，通过对事件源的触发，获取想要的结果-->

        <!--定义onclick事件处理方式-->
        <script type="text/javascript">
            //定义获取浏览器信息函数
            function getWindowInfo() {
                //想要知道浏览器信息，就需要使用window对象中的navigator对象
                var name = window.navigator.appName;
                var version = navigator.appVersion;//window.可以省略
                println(version+":"+name);
            }
            //定义前进
            function forward() {
                history.forward();
            }
            //定义后退
            function back() {
                history.back();
            }
        </script>
        <!--定义事件源-->
        <input type="button" value="Get Info" onclick="getWindowInfo()">
        <input type="button" value="Forward" onclick="forward()">
        <input type="button" value="Back" onclick="back()">
    </body>
</html>

location对象

属性
- href：设置或获取整个URL字符串
  - 获取：var text = location.href;
  - 设置：location.href = “http://www.baidu.com“。设置后进行连接访问

<script type="text/javascript">
    function getURL() {
        //var pro = location.protocol; //file
        var text = location.href;
        alert(text);
    }
    function setURL() {
        location.href = "http//:www.baidu.com"
    }
</script>
<input type="button" value="Get" onclick="getURL()">
<input type="button" value="Get" onclick="setURL()">

02-02 window中常用方法

window对象
- confirm()方法：弹出一个确认窗口
- setTimeout(“alert(“hi”)”,1000)方法：1000毫秒后运行一次
- setInterval(“alert(“hi”)”,1000)方法：每隔1秒执行一次
- clearInterval(要停止的setInterval)方法：停止循环执行
- moveBy(10,10)方法：移动窗口
- moveTo(30,30)方法：移动窗口到（30，30）坐标

<script type="text/javascript">
    function confirmWindow() {
        var b = confirm("Please confirm click action");
        if(b==ture) {
            alert(Confirmed); //点击确认显示
        } else {
            alert(Abort); //点击取消显示
        }
    }
</script>
<input type="button" value="" onclick="confirmWindow()">

window方法二
- open(“ad.html”,”_blank”,”height=300,width=400,status=no,toolbar=no,location=no”);打开一个新的窗口
- close();关闭当前窗口

<script type="text/javascript">
    function adPop() {
        open("ad.html","_blank","height=300,width=400,status=no,toolbar=no,location=no");
    }
</script>
<input type="button" value="AdPop" onclick="adPop()">

ad.html
<html>
    <head>
        <title>ad</title>
    </head>
    <body>
        <h1>Sale Today!</h1>
        <script type="text/javascript">
            setTimeout("close()",3000);
        </script>
    </body>
<html>

02-03 window中常用事件

onfocus 被激活的窗口
onload 页面所有内容加载完毕后触发
onunload 页面所有内容卸载后触发
onbeforeload 页面所有内容卸载前触发

<html>
    <head>
        <title>Kevin's Homepage</title>
    </head>
    <body>
        <script type="text/javascript">
            onunload = function() {
                alert("onunload run");
            }
            onload = function() {
                alert("onload run");
            }
            onbeforeload = function() {
                alert("onbeforeload run");
            }
        </script>
    </body>
<html>

流氓广告弹窗练习

<html>
    <head>
        <title>Kevin's Homepage</title>
    </head>
    <body>
        <script type="text/javascript">
            onload = function() {
                open("ad.html","_blank","height=300,width=400,status=no,toolbar=no,location=no");
            }
        </script>
    </body>
<html>

ad.html
<html>
    <head>
        <title>ad</title>
    </head>
    <body>
        <h1>Sale Today!</h1>
        <script type="text/javascript">
            onunload = function() {
                open("ad.html","_blank","height=300,width=400,status=no,toolbar=no,location=no");
            }
            setInterval("focus()",1000);//每隔一秒获取一次焦点，要你老命
        </script>
    </body>
<html>

02-04 document对象

作用：对标记型文档进行封装，以便于对其操作

节点的三个必备属性：

节点名称 nodeName
节点类型 nodeType
- 1：标签型节点（没有value）
- 2：属性节点
- 3：文本节点
节点值 nodeValue

document对象获取页面中的节点

getElementById() 通过id获取该标签节点，返回标签节点对象
getElementsByName(); 通过name属性获取节点，因为name可以重复，所以返回一个数组
getElementsByTagName(); 通过标签名获取节点。因为tagname可以重复，所以返回一个数组

getElementById

<html>
    <head>
        <title>Kevin's Homepage</title>
    </head>
    <body>
        <script type="text/javascript">
            function getNodeDemo() {
                var divNode = document.getElementById("divid");//把id="divid"的div封装成对象
                alert(divNode.nodeName);//获取节点名称 DIV
                alert(divNode.nodeType);//获取节点类型 1
                alert(divNode.nodeValue);//获取节点值 null
                alert(diveNode.innerHTML)//获取文本值
                diveNode.innerHTML = "Changed";//改变文本值
            }
        </script>
        <input type="button" value="document获取节点" onclick="getNodeDemo()" />
        <div id="divid">这是一个div区域</div>
    </body>
<html>

getElementsByName

<html>
    <head>
        <title>Kevin's Homepage</title>
    </head>
    <body>
        <script type="text/javascript">
            function getNodeDemo2() {
                var nodes = document.getElementByName("user");//返回一个数组
                alert(node[0].value);
                var nodes = document.getElementByName(user"")[0];//返回数组0角标的对象
                alert(Node.value);
            }
        </script>
        <input type="button" value="document获取节点" onclick="getNodeDemo2()" />
        <input type="text" name="user" />
    </body>
<html>

getElementsByTagName

<html>
    <head>
        <title>Kevin's Homepage</title>
    </head>
    <body>
        <script type="text/javascript">
            function getNodeDemo3() {
                var divNode = document.getElementById("mediaweb");//返回一个数组

                var aNodes = divNode.getElementsByTagName("a");
                for(var x = 0; x < aNodes.length; x++) {
                    aNodes[x].target = "_blank";
                }
            }
        </script>
        <input type="button" value="document获取节点" onclick="getNodeDemo3()" />
        <a href="http://www.baidu.com">百度</a>
        <div id="mediaweb">
        <a href="http://www.acfun.cn">AcFun</a>
        <a href="http://www.youku.com">YouKu</a>
        </div>
    </body>
<html>

通过层次关系获取节点

关系

父节点：parentNode 一个节点对象
子节点：childNodes 一个节点集合
兄弟节点（少用兄弟节点，不同内核的浏览器不同解析方式，会接续出标签间的空白文本节点）
- 上一个兄弟节点： previousSibling 一个节点对象
- 下一个兄弟节点： nextSibling 一个节点对象

<html>
    <head>
        <title>Kevin's Homepage</title>
    </head>
    <body>
        <script type="text/javascript">
            function getNodeByLevel() {
                //获取页面中的表格节点
                var tabNode = document.getElementById("tabid");
                //获取父节点。parentNode
                var node = tabNode.parentNode;
                alert(node.nodeName);//BODY
                //获取子节点。childNodes
                var node = tabNode.childNodes;
                alert(nodes[0].nodeName);//TBODY
                //获取兄弟节点
                //上一个
                var node = tabNode.previousSibling;
                alert(node.nodeName);//DIV
                //下一个
                var node = tabNode.nextSibling;
                alert(node.nodeName);//DL
            }
        </script>
        <input type="button" value="通过层次关系获取节点" onclick="getNodeByLevel()" />

        <div>div区域</div>
        <table id="tabid">
            <tr>
                <td>单元格一</td>
                <td>单元格二</td>
            </tr>
        </table>
        <dl></dl>
    </body>
<html>

02-05 节点操作

创建节点
- createTextNode()创建一个文本节点对象
- createElement()创建一个元素
添加节点
- appendChild(要添加的节点)
- innerHTML属性：node.innerHTML = “要添加的节点”;
删除节点
- removeNode() 方法
  - removeNode(false) 只删当前节点
  - removeNode(true) 删当前节点和所有子节点
- removeChild() 方法（建议使用）删除子节点
  - 删除当前节点的方法：先获取父节点，再使用removeChild()方法
替换节点
- replaceNode(新节点) 方法
- replaceChild（新节点,子节点）方法（建议使用）
克隆节点
- cloneNode(false)只克隆当前节点
- cloneNode(true)克隆当前和齐子节点

<html>
    <head>
        <title>Kevin's Homepage</title>
        <style type="text/css">
            div {
                border:#00ccff 1px solid;
                width:200px;
                padding:20px
            }
            #div_1 {
                background-color:#00ccff;
            }
            #div_2 {
                background-color:#FFccff;
            }
            #div_3 {
                background-color:#cc00ff;
            }
            #div_4 {
                background-color:#00FF00;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
            //添加文本节点
            function crtAndAdd() {
                var oTextNode = document.createTextNode("这是一个新的文本");
                var oDivNode = document.getElementById("div_1");
                oDivNode.appendChild(oTextNode);
            }    
            //添加按钮节点
            function crtAndAdd2() {
                var oButNode = document.createElement("Button");
                oButNode.type = "button";
                oButNode.value = "A new Button";

                var oDivNode = document.getElementById("div_1");
                oDivNode.innerHTML("<input type='button' value='A New Good Button'/>");
            }   
            //删除节点
            function delNode() {
                var oDivNode = document.getElementById("div_2");
                oDivNode.removeNode(false);//移除oDivNode节点
                oDivNode.removeNode(true);//移除oDivNode节点和所有下面的节点
                oDivNode.parentNode.removeChild(oDivNode);
            }
            //替换节点
            function modifyNode() {
                var oDivNode_1 = document.getElementById("div_1");
                var oDivNode_3 = document.getElementById("div_3");
                oDivNode_1.replaceNode(oDivNode_3);
                oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);
            }
        </script>

        <input type="button" value="创建并添加节点" onclick="crtAndAdd()" />
        <input type="button" value="删除节点" onclick="delNode()" />
        <input type="button" value="修改节点" onclick="modifyNode()" />
        <div id="div_1">
            You
        </div>

        <div id="div_2">
            Are    
        </div>

        <div id="div_3">
            The
        </div>

        <div id="div_4">
            One
        </div>
    </body>
<html>