JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)

本节讲Dom和Bom模型概念讲解(节点获取,window对象)。

out.js:

写了2个输出到页面的函数。

function println(param){
    document.write(param+"<br/>");
}
function print(param){
    document.write(param);
}

window对象中的方式:

方法:

confirm :

bConfirmed = window.confirm( [sMessage])

显示一个确认对话框,其中包含一个可选的消息和确定取消按钮。

setInterval :

iTimerID = window.setInterval(vCode, iMilliSeconds [, sLanguage])

每经过指定毫秒值后计算一个表达式。

setTimeout :

iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])

经过指定毫秒值后计算一个表达式。

clearInterval:

window.clearInterval(iIntervalID)

使用 setInterval 方法取消先前开始的间隔事件。

navigate:

在当前窗口中装入指定 URL。

open:

打开新窗口并装入给定 URL 的文档。

moveBy:

将窗口的位置移动指定 x 和 y 偏移值。

moveTo:

将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

演示代码:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Bom模型演示2---window对象中的方式</title>
    </head>
    <body>
        <script type="text/javascript" src="out.js">
        </script>
        <script type="text/javascript">
            //1. confirm方法
            function methodDemo(){
                //window. 可不写
                var boo = window.confirm("真的要删除吗?");
                alert(boo);
            }

            //2 setTimeout方法---只激活一次动作,setInterval方法
            //---每隔设定的时间就激活一次动作
            var timer1, timer2;
            function methodDemo2(){
                //setTimeout("alert(‘时间到...‘)",2000);//过3秒,执行:alert(‘时间到...‘)

                //setTimeout("methodDemo()",3000);//过3秒,执行methodDemo()方法
                //setTimeout(methodDemo,3000);//和上面那句一样的
                timer1 = setInterval("alert(‘时间到...‘)", 3000);//每隔2秒,会执行一次:alert(‘时间到...‘)
                timer2 = setInterval(methodDemo, 3000);//每隔2秒,会执行一次:alert(‘时间到...‘)
            }

            function timeStop1(){
                clearInterval(timer1);
            }

            function timeStop2(){
                clearInterval(timer2);
            }

            //3 moveBy---相对移动和moveTo方法---移动到

            function moveWindow(){//--IE11.3支持,360 8.1不支持
                //window.moveBy(10, 10);//“window.”可以省略
                //moveBy(-10, -10);
                //moveTo(40, 50);

                //窗口抖动
                for(var x=0;x<500;x++){
                    moveBy(15,0);
                    moveBy(0,15);
                    moveBy(-15,0);
                    moveBy(0,-15);
                }
            }

            //4 open--打开窗口  close--关闭窗口
            var timer3;
            var aNewWindow;
            function openWindow(){
                aNewWindow = window.open("ad.html",null,"height=200,width=400, status=yes,toolbar=no,menubar=no,location=no");
                aNewWindow.moveTo(100,200);
                //timer3 = setTimeout(closeWin,3000);//这句实现的功能可以写在ad.html中
            }
            function closeWin(){
                aNewWindow.close();
            }

        </script>
        <input type="button" value="confirm方法" onclick="methodDemo()"/>
        <input type="button" value="定时器-开始" onclick="methodDemo2()"/>
        <input type="button" value="定时器1-停止" onClick="timeStop1()"/>
        <input type="button" value="定时器2-停止" onClick="timeStop2()"/>
        <br/>
        <input type="button" value="移动窗口" onClick="moveWindow()" />
        <input type="button" value="打开窗口" onClick="openWindow()" />
    </body>
</html>

ad.html:

<html>
  <head>
    <title>广而告之</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
    <h1>特价大优惠!!!</h1>
    <h2>走过路过,不要错过!!!</h2>
    <h3>电器大赌场!!!</h3>
    <h3>特价大优惠!!!</h3>
    <script type="text/javascript">
        //setTimeout("close()",3000);//绿色广告,3秒后自己关闭
    </script>

    <script type="text/javascript">
        //垃圾广告,用户关闭之后,又打开
        onunload = function(){
            open("ad.html","_blank","height=200,width=400, status=yes,toolbar=no,menubar=no,location=no");
        };
        setInterval(focus,1000);// 如果当前窗口在后面 就每过1s---闪烁--IE11.3支持,360 8.1不支持
        //setInterval("focus()",1000);
    </script>
  </body>
</html>

里面窗口抖动和那个关闭窗口继续弹窗口和setInterval(focus,1000);

IE11.3支持,360 8.1不支持

window对象中的事件

onload 在浏览器完成对象的装载后立即触发。

onbeforeunload 在页面将要被卸载前触发。

onunload 在对象卸载前立即触发。

演示代码:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Bom模型演示3---window对象中的事件</title>
    </head>
    <script type="text/javascript">
        //“window.”可以省略。onload事件是在浏览器解析完页面文档时触发,
        //只有当该事件触发时才会调用它的事件处理方法
        window.onload = function(){
            //window.status="欢迎来到湖南城市学院...";//浏览器的状态栏-360浏览器8.1不支持 -IE11.3支持
            //alert("2222...");
            setInterval(horse, 500);
        }

        window.onunload=function(){//是浏览器关闭之后才触发的-360浏览器8.1不支持 -IE11.3支持
            alert("ddddd...");//我们看不到
        }

        //是浏览器将要关闭之前触发的-360浏览器8.1不支持 -IE11.3支持
        window.onbeforeunload = function(){
            alert("kkkkk...");//我们看得到
        }

        var strs = [‘欢‘, ‘迎‘, ‘来‘, ‘到‘, ‘湖‘, ‘南‘, ‘城‘, ‘市‘, ‘学‘, ‘院‘, ‘‘];
        var index = 0;
        function horse(){
            window.status = window.status + strs[index++];
            if (index == strs.length) {
                window.status = "";
                index = 0;
            }
        }
    </script>
    <body>
        <h1>湖南城市学院</h1>
        <script type="text/javascript">
            alert("1111...");
        </script>
    </body>
    </body>
</html>

状态栏:(浏览器右下角位置)

window对象中的document对象

  /*
     * ※※获取元素的3种方式:
     * 1、getElementById(): 通过标签中的id属性值获来取该标签对象
     * 2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合
     * 3、getElementsByTagName(): 通过标签名来获取该标签对象集合

     ※※所有节点(标签、属性、文本)都有3个属性:nodeName、nodeType、nodeValue
     1、nodeName: 节点的名称
     2、nodeType:"标签"为1, "属性"为2,"文本"为3
     3、nodeValue:"标签"节点是没有值的即null,属性和文本节点是有值的
     */

演示代码:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Dom模型演示1---window对象中的document对象</title>
    </head>
    <script type="text/javascript">
        /*
         * ※※获取元素的3种方式:
         * 1、getElementById(): 通过标签中的id属性值获来取该标签对象
         * 2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合
         * 3、getElementsByTagName(): 通过标签名来获取该标签对象集合

         ※※所有节点(标签、属性、文本)都有3个属性:nodeName、nodeType、nodeValue
         1、nodeName: 节点的名称
         2、nodeType:"标签"为1, "属性"为2,"文本"为3
         3、nodeValue:"标签"节点是没有值的即null,属性和文本节点是有值的
         */
        //1、getElementById(): 通过标签中的id属性值获来取该标签对象
        function getElementDemo1(){
            var divNode = document.getElementById("divId1");
            alert(divNode.nodeName+","+divNode.nodeType+","+divNode.nodeValue);
            alert(divNode.innerText);//标签容器包含的文字
        }

        //2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合
        function getElementDemo2(){
            var aNode = document.getElementsByName("userName");
            alert(aNode);//Object,其实是一个数组※※※※
            alert(aNode[0].nodeName+","+aNode[0].nodeType+","+aNode[0].nodeValue);

            //注意,是编辑框元素,但它的nodeValue值仍是null,因为是标签节点。而如果要获取该编辑框中的内容,则采用如下方式:
            alert(aNode[0].value);//其实是读取aNode[0]节点中的属性"value"的值
        }

        // 3、getElementsByTagName(): 通过标签名来获取该标签对象集合
        function getElementDemo3(){
            var aNode = document.getElementsByTagName("input");
            alert(aNode);//Object,其实是一个数组※※※※
            alert(aNode[0].nodeName+","+aNode[0].nodeType+","+aNode[0].nodeValue);
        }

    </script>
    <body>
        <div id="divId1">
            div区域1中的文字
        </div>
        <br/>
        <input type="button" value="获取元素byId-1" onClick="getElementDemo1()">
        姓名:<input type="text" name="userName"/>
        <hr/>
        <input type="button" value="获取元素byName-2" onClick="getElementDemo2()">
        <input type="button" value="获取元素byTagName-3" onClick="getElementDemo3()">
    </body>
    </body>
</html>

获取元素byName-2:

编辑框中的字符:

Dom模型演示—节点获取方式的一个示例

演示代码:

<html>
  <head>
    <title>Dom模型演示2---节点获取方式的一个示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
        onload = function(){
            var divNode = document.getElementById("link1");
            var aNodes = divNode.getElementsByTagName("a");//获取当前div元素下面的所有节点
            for(var x=0;x<aNodes.length;x++){
                aNodes[x].target="_blank";//新窗口打开
                aNodes[x].innerHTML="<b><font color=‘red‘>商品"+(x+1)+"</font></b>";
                //aNodes[x].innerText="<b><font color=‘red‘>商品"+(x+1)+"</font></b>";
                //innerHTML 设置或获取位于对象起始和结束标签内的 HTML。( HTML格式)
                //innerText 设置或获取位于对象起始和结束标签内的文本(文本格式)。
            }
        }
    </script>

  </head>

  <body>
    <h2>友情链接:</h2>
    <a href="http://www.hncu.net">城院首页</a>
    <a href="http://www.sina.com">新浪首页</a>
    <br/>

    <h2>特价商品:</h2>
    <div id="link1">
        <a href="a.html">水杯</a>
        <a href="b.html">风扇</a>
        <a href="c.html">鼠标</a>
        <a href="d.html">背包</a>
    </div>
  </body>

</html>

a.html代码:

<html>
  <head>
    <title>水杯</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
    <h1>特价水杯!!!</h1>
    <h1>特价水杯!!!</h1>
    <h1>特价水杯!!!</h1>
  </body>
</html>
时间: 2025-01-01 08:59:44

JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)的相关文章

JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解

这节博客主要讲解Dom模型概念~和JSON的简单介绍 首先,还是先上out.js的代码: function println(param){ document.write(param+"<br/>"); } function print(param){ document.write(param); } 什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型 (DOM) 是中立于平台和

javascript与ECMAScript、DOM、BOM的关系

在初学javascript时,经常会看见javascript dom.ECMAScript等名词,一直不明白,今天查阅了一些资料和评论,简单写一下. JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象: DOM 描述了处理网页内容的方法和接口: BOM 描述了与浏览器进行交互的方法和接口. ECMAScript 先简单了解javascript的发展历史,在因特网发展的初期,为了减少客户端与服务器的交互(比如表单的验证一类),提高网上冲浪的效率,当时著名的Netsca

网络编程懒人入门(九):通俗讲解,有了IP地址,为何还要用MAC地址?

1.前言 标题虽然是为了解释有了 IP 地址,为什么还要用 MAC 地址,但是本文的重点在于理解为什么要有 IP 这样的东西.本文对读者的定位是知道 MAC 地址是什么,IP 地址是什么. (本文同步发布于:http://www.52im.net/thread-2067-1-1.html) 2.关于作者 翟志军,个人博客地址:https://showme.codes/,Github:https://github.com/zacker330.感谢作者的原创分享. 作者的另一篇<即时通讯安全篇(七)

javascript、ECMAScript、DOM、BOM关系

ECMAScript,正式名称为 ECMA 262 和 ISO/IEC 16262,是宿主环境中脚本语言的国际 Web 标准. ECMAScript 规范定义了一种脚本语言实现应该包含的内容:但是,因为它是可扩充的,所以其实现所提供的功能与这个最小集相比可能变化很大. ECMAScript 是一种开放的.国际上广为接受的脚本语言规范. 它本身并不是一种脚本语言.正如在 Web 应用程序中执行有用操作的 bean 集合(例如,Netscape 的 AWT)是 Sun 的 JavaBean 规范的一

网络编程之五种I/O模型

一.概述: 在网络编程中,阻塞.非阻塞.同步.异步经常被提到,下面我先谈以下我所理解的在I/O中的阻塞.非阻塞.同步.异步. 五种I/O模型分别是阻塞式I/O,非阻塞式I/O,信号驱动,I/O复用(这四种是同步I/O),异步I/O. 我来举一个例子来解释这五种I/O模型: 有A,B,C,D,E五个人在钓鱼:A用的是最老式的鱼竿,所以呢,得一直守着,等到鱼上钩了再拉杆.(阻塞式I/O) B呢,它的鱼竿比较新,不怕鱼上钩后把鱼竿拽走,所以他一边看手机,一边时不时看一下鱼竿是否有鱼上钩,有的话就迅速拉

JavaScript组成部分——ECMAScript、DOM、BOM、

1.JavaScript组成部分 虽然 JavaScript 和 ECMAScript 通常被人们用来表达相同的含义,但 JavaScript 的含义却比ECMA-262标准中规定的要多得多. 一个完整的JavaScript应该由下列三个不同的部分组成 核心(ECMAScript): ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言.

【Java8网络编程】第1章.基本概念

1.网络的基本概念 网络开发已经成为每个开发人员的核心技能.很多应用程序使用网络,如即时通讯软件(微信,QQ等),电子邮件,浏览器,远程控制等. 1.1网络 网络 是一系列设备(计算机,打印机,路由器-)的集合,这些设备被称为网络节点.节点之间可以通过电缆,无线电波,光纤交流. 每个网络节点都有唯一标识,被称为 地址(Address) . 计算机之间来回传输数据需要协议(protocol),以保证计算机能够找到另一台计算机,并且保证它们之间能够互相理解. 1.2 网络分层 ISO制定的OSI参考

linux编程---网络编程之复用I/O模型

模型一:阻塞模型---进程效率低:CPU利用低 模型二:非阻塞模型---进程效率高:但是CPU利用率低: 模型三:复用I/O模型---CPU利用率提高 思想:对于任何一个套接字描述符发生事件时才由系统去唤醒进程,从而不需要因轮询而占用CPU: 对于I/O复用典型的应用如下: (1)当客户处理多个描述字时(一般是交互式输入和网络套接口),必须使用I/O复用. (2)当一个客户同时处理多个套接口时,而这种情况是可能的,但很少出现. (3)如果一个TCP服务器既要处理监听套接口,又要处理已连接套接口,

Windows 网络编程(2)--重叠I/0模型

5).重叠I/O模式(overlapped) 常用函素: 1.WSASocket : 创建套接字 2.TCP WSASend WSARecv 3.UDP: WSASendTo WSARecvFrom 4.AccepEx (Mswsock.lib库导出) WSAIoctl 5.数据类型 WSAOVERLAPPED (wsaoverlapped) 函数: WSAGetOverlappedResult 使用: 缓冲区对象 typedef struct _BUFFER_OBJ { OVERLAPPED