BOM小结以及文档节点基础

在之前学习过程中，由于某些原因，先去看了DOM相关，而略过了BOM，在昨天终于是把BOM这部分补上。

BOM的概念就不多说，BOM的核心是window对象，window对象定义了3个【alert()，confirm()，prompt()】人机交互的接口方法方便开发人员进行调试。

其中alert()包含一个可选的提示信息参数，用于向用户弹出提示性信息。

confirm()包含两个按钮（确定与取消）如果点击”确定“则该方法返回true；点击“取消”则该方法返回false

prompt()可以接受用户输入的信息，并把用户输入的信息返回。

一，alert()

下面是一个自定义的alert()方法，并没有完成所有代码，可以继续编辑

编辑框架

 <!--编写一个alert()-->
    <style type="text/css">
        /*对话框设置在中央显示*/
        #alert_box {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 400px;
            height: 200px;
            display: none;
        }
        /*设置外框样式并固定宽和高*/
        #alert_box dl{
            position:absolute;
            left:-200px;
            top:-100px;
            width:400px;
            height:200px;
            border:solid 1px #999;/*设置外框为实线，宽度为1px，颜色编号为#999*/
            border-radius:8px;/*圆角*/
            overflow:hidden;
        }
        /*设计对话框标题栏样式*/
        #alert_box dt{
            background-color:#ccc;
            height:30px;
            text-align:center;
            line-height:30px;
            font-size:15px;/*可缩小的字体缩小为15px*/
        }
        /*对话框内容框基本样式*/
        #alert_box dd{
            padding:6px;
            margin:0;
            font-size:12px;
        }
    </style>
</head>

调用及内容

 <script>
        window.alert = function(title,info){
            var box = document.getElementById("alert_box");
            var html=‘<dl><dt>‘+title+‘</dt><dd>‘+info+‘</dd><\/dl>‘;
            if(box){/*窗口中已存在提示对话框，则直接显示内容*/
                box.innerHTML = html;
                box.style.display = "block";
            }
            else {//不存在对话框，则创建新的对话框，并显示内容
                var div = document.createElement("div");
                div.id = "alert_box";
                div.style.display = "block";
                document.body.appendChild(div);
                div.innerHTML = html;
            }
        }
        alert("这里是标题君", "我是内容xxx");
    </script>

二，框架集

在每一个框架中，window对象始终指向的都是那个框架实例，而非最高级的框架；top对象始终指向最高级的框架，也就是浏览器窗口；paernt对象始终指向当前框架的上层框架。（在某些情况下，paernt=top）

在框架集中可以将不同层次的window对象连接起来，进行一些操作

先建立一个框架集，

        <title>框架集</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    </head>
    <frameset rows="50%,50%"cols="*" frameborder="yes" border="1" framespacing="0"> //第一行占50%，第二行占50%，cols（列数），框架之间是否有边框。边框宽度，框架之间是否有间距
        <frameset rows="*" cols="33%,*,33%" framespacing="0" frameborder="yes" border="1">
            <frame src="事件.html" name="left" id="left" />
            <frame src="节点.html" name="middle" id="middle" />
            <frame src="正则表达式.html" name="right" id="right" />
        </frameset>//第一行
        <frame src="闭包函数.html" />

    </frameset>

在进行编辑交互时需要在框架原代码块处添加代码

<script>
            window.onload=function(){
                document.body.onclick=f;
            }
            var f=function(){//改变第三个框架文档的背景色为红色
                parent.frames[2].document.body.style.backgroundColor="red";
            }
        </script>

三，定时器的使用

主要为延时处理以及计时器，还有就是以一定时间间隔去执行某些代码块

<body>
        <h1>标题君</h1>
        <p>段落文本</p>
        <input type="text" />
        <script>
            var p=document.getElementsByTagName("p")[0];
            p.onmouseover=function(i){
                setTimeout(function(){
                    alert(p.tagName)
                },500);
            }
        </script>
    </body>
    <!--为集合中每个元素都绑定一个事件延迟处理函数-->
    <script>
        var o=document.getElementsByTagName("body")[0].childNodes;//获取body元素下所有子元素
        for(var i=0;i<o.length;i++){//遍历元素集合
            o[i].onmouseover=function(i){//注册鼠标滑过事件
                return function(){ //返回闭包函数
                    f(o[i])  //调用函数f，并传递当前对象引用
                }
            }(i);//调用函数并传递循环序号，实现在闭包中存储对象序号值
        }
//        for(var i=0;i<o.length;i++){
//            o[i].onmousemove=function(i){
//            return function(){
//                clearTimeout(o[i].out)//清除已注册的延迟处理函数
//            }
//            }(i)
//        }
        //定义f函数
        function f(o){
            var out=setTimeout(function(){
                //alert(o.tagName);
            },500);     //显示当前元素名称
            o.out=setTimeout(function(){
                //为了防止混淆多个注册的延迟处理函数，分别把不同元素的延迟处理函数的引用储存到该对象的out属性中
                alert(o.tagName);
            },500);
        }
        var t=document.getElementsByTagName("input")[0];
        var i=1;
        function s(){
            var out=setTimeout(function(){
                t.value=i++;
                s();
            },1000);
            if(i>10){
                clearTimeout(out);
                alert("10秒")
            }
        }    //setTimeout()方法
        s();

这里是一个延迟半秒后弹出鼠标所滑过的元素的元素标签名，以及一个简易的计时功能。

三，navigator对象

这个对象包含了浏览器的基本信息，可以通过此对象查询浏览器名称，版本，系统等

这里是一个检测浏览器类型，版本号和window系统版本的代码块

<script>
			if(document.getElementsByName){
				var a=document.getElementsByName("a");
			}else if(document.getElementsByTagName){
				var a=document.getElementsByTagName("a");
			}
			var s=window.navigator.userAgent;
			alert(s);
		</script>

四，location对象

此对象储存当前页面与位置（URL）相关信息，主要用途为跳转到指定界面

五，screen对象

存储客户端屏幕信息，在用于居中以及计算坐标时常用

<script>
            var w=screen.availHeight;
            console.log(w);
            var n=screen.availWidth;
            console.log(n);
        </script>

六，document对象

在浏览器窗口中，每个window对象都会包含一个document属性，该属性引用窗口中显示HTML文档的document对象。

<img name="img" src="../img/备1.jpg" />
        <form name="form" method="post" action="navigator.html"></form>
        <script>
            alert(document.img.src);
            alert(document.images[0].src);
            alert(document.images["img"].src);
        </script>

这里为插入一个图片，然后以name属性，文本下标，文档对象集合三种方式来获得图片位置。

利用open（）可以给某个框架创建文档，也可以用write（）方法来为其添加内容。在添加后需要用close（）方法来结束创建过程。

在接下来呢，就是关于文档节点的了

首先，是元素添加

<div id="box1"><p>beforebegin</p></div>
    <script>
        document.getElementById("box1").insertAdjacentHTML("beforebegin", "<h2>lalalalallalala</ h2>");//在当前元素之前插入一个同级元素
        document.getElementById("box1").insertAdjacentHTML("afterbegin", "<h2>qwq</ h2>");//在当前元素之下或者第一个元素之前插入一个新的元素（子元素）
        document.getElementById("box1").insertAdjacentHTML("beforeend", "<h2>0.0 0.0</ h2>");//当前元素之下，或第一个元素之后插入一个元素（子元素）
        document.getElementById("box1").insertAdjacentHTML("afterend", "<h2>略略略</ h2>");//在当前元素后插入一个同级元素
    </script>

其次，outerHTML和innerHTML，outerText和innerText的区别

 <ul>
        <li>你好</li>
        <li>你叫什么？</li>
        <li>你干什么</li>
        <li>你喜欢JS么？</li>
    </ul>
    <script>
        var ul = document.getElementsByTagName("ul")[0];//获取列表结构
        var lis = ul.getElementsByTagName("li");//获取所有列表项
        lis[1].onclick = function () {//为第一个列表项绑定事件处理函数
            this.innerHTML = "<h2>我是一名初学者</h2>"; //替换HTML文本
        }
        lis[3].onclick = function () {
            this.outerHTML = "<h2>当然喜欢</h2>";//用HTML文本覆盖列表项标签及包含内容
        }
        function getInnerText(element){
            return (typeof element.textContent == "string") ? element.textContent : element.innerText;//接收一个元素作为参数，检查是否有textContent属性。如果没有，
            //就使用innerText
        }
        function setInnerText(element,text) {
            if (typeof element.textContent == "string") {
                element.textContent = text;
            } else {
                element.innerText = text;
            }
        }
        lis[0].onclick = function () {
            this.innerText = "谢谢";//替换文本
        }
        lis[2].onclick = function () {
            this.outerText = "我是学生";//覆盖列表标签及其包含内容
        }
    </script>

最后，是一个添加项目的代码块

每次使用js文件都会重新加载页面，可以使用遍历的方法减少刷新次数

<input type="button" value="添加项目" onclick="addItems"/>
    <ul id="mylist"></ul>
    <script>
        function addItems() {
            var fragment = document.createDocumentFragment();
            var ul = document.getElementById("mylist");
            var li = null;
            for (var i = 0; i < 12; i++) {
                li = document.createElement("li");
                li.appendChild(document.createTextNode("项目" + (i + 1)));
                fragment.appendChild(li);
            }
            ul.appendChild(fragment);
        }
    </script>
    <div id="box"> document.createAttribute(name)</div>
    <script>
        var element = document.getElementById("box");
        var attr = document.createAttribute("align");//创建一个属性节点
        attr.value = "center";//值为center
        element.setAttributeNode(attr);//把attr添加到元素中
        //访问属性(三种方式）
        alert(element.attributes["align"].value);
        alert(element.getAttributeNode("align").value);
        alert(element.getAttribute("align"));

    </script>

原文地址：https://www.cnblogs.com/wanghuanl/p/9293515.html

时间： 2024-11-05 09:29:07

BOM小结以及文档节点基础的相关文章

使用jquery增加、删除html文档节点

jquery相对亦js来说在对DOM文档操作来说非常方便,本文主要讨论使用jquery对html文档中节的删除 如上图,因为是急救电话数量是不确定的,因此需要能够灵活地添加和删除,因此就需要用jquery来对节点进行操作. 代码在附件中,可以正常执行,这里只是对节点的增加和删除中部分代码,其他类似操作可以在此基础上进行修改操作既可以实现. 主要代码如下所示,主要是最后的jquery代码注意要引用jquery才可正常执行的: <html><head><meta http-equ

Java 初学者帮助文档以及基础教程

一下午的时间,大致看了一下Java的文档,进一步熟悉了Java的大体框架和结构,整理了一下有用的资源. 帮助文档: JSE 8 API 英文版 在线HTML格式:http://docs.oracle.com/javase/8/docs/api/index.html JSE 8 API 英文版 zip格式:http://www.oracle.com/technetwork/java/javase/documentation/jdk8-doc-downloads-2133158.html JSE 6

java中XML操作：xml与string互转、读取XML文档节点及对XML节点增删改查

一.XML和String互转: 使用dom4j程式变得很简单 //字符串转XML String xmlStr = \"......\"; Document document = DocumentHelper.parseText(xmlStr); // XML转字符串 Document document = ...; String text = document.asXML(); //这里的XML DOCUMENT为org.dom4j.Document 二.读取XML文档节点: pack

数组对象元素的添加，String对象，BOM对象以及文档对象的获取

数组对象的删除有三种方法: pop();        //移除最后一个元素并返回该元素值shift();      //移除最前一个元素并返回该元素值,数组中元素自动前移splice(0,2); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素通过这三种方法我们可以将数组中的元素按进行删除 var del = ["aa",23,345,56,34,"bb"]; var del_last = del.pop()

Java获取XML节点总结之读取XML文档节点

dom4j是Java的XML API,用来读写XML文件的.目前有很多场景中使用dom4j来读写xml的.要使用dom4j开发,需要下载导入dom4j相应的jar文件.官网下载:http://www.dom4j.org/dom4j-1.6.1/github下载:http://dom4j.github.io/下载解压之后如图所示: 我们只需要把dom4j-1.6.1.jar文件构建到我们开发项目中就可以了. 下面就以Eclipse创建java项目的构建方法为例说明:声明:本Java项目的开发环境J

Python 4.函数参数 返回值与文档查看(基础篇)

本章大纲:(以后文笔格式都会在开头有个大纲) -五大参数- 普通参数 默认参数 关键字参数 收集参数 收集参数解包问题 关键字收集参数 关键字收集参数解包问题 -返回值- -文档查看- -普通参数- 普通参数又名为位置参数,没有默认值,根据具体使用位置进行传值 普通参数和默认参数的不同 普通参数就是如同名字一般普通,没有默认值 而默认参数则可以规定默认值(也就是规定了默认值的普通参数而已) 但是默认参数要牢记一点:默认参数必须指向不变的对象值 请看下面例子 def add_end(L=[]):

一个获取获取文档节点的问题

我想获取一下p段落,通过JS代码更改其中的内容,代码如下: 1 <p>第一个段落</P> 2 <button onclick=" changeP()">更换</button> 3 function changeP(){ 4 document.getElementsByTagName('p').innerHTML="更换了的段落"; 5 } 之后发现没有效果,于是换成document.getElementById('p'

xml基础及其解析xml文档

xml基础及其解析xml文档 xml基础及其解析xml文档 xml基础语法 中国特色乱码问题 写xml文件的工具 xml中使用的转义字符 处理指令已经过时 xml的两个重要的功能 xml注释 xml解析Java应用程序读取xml文件的内容 xml解析原理 xml解析工具 DOM4J使用 DOM4J中核心API 将xml文档从磁盘读进内存形成Document对象 读取所有的标签节点 读取所有的属性节点 读取所有的文本节点 解决上面提出的问题 xml基础语法 一个基本的xml构成: <!--vers

python基础-第十一篇-11.2DOM为文档操作

文档对象模型(DOM)是一种用于HTML和XML文档的编程接口 节点类型 12种节点类型都有NodeType属性来表明节点类型 节点关系 <div id="t"> <span></span> <span id="s"> <a></a> <h1>Nick</h1> </span> <p></p> </div> <scri