首页 > 编程语言 >JavaScript中DOW和BOW;笔记分享;知识回顾

JavaScript中DOW和BOW;笔记分享;知识回顾

时间:2024-08-31 22:50:08浏览次数:12  
标签:function 窗口 对象 JavaScript BOW var document DOW 属性

一,BOW

1什么是BOW

BOM是Browser Object Model的简写,即浏览器对象模型。

BOM有一系列对象组成,是访问、控制、修改浏览器的属性的方法

BOM没有统一的标准(每种客户端都可以自定标准)。

BOM的顶层是window对象

2,window对象及常用方法

(1),什么是window对象

Window 对象描述:

                Window 对象简单理解就是把浏览器抽象成一个对象,它表示一个浏览器窗口或一个框架。在客户端 JavaScript中,Window 对象是全局对象,所有的表达式都在当前的环境中计算。也就是说,要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性作为全局变量来使用。例如,可以只写document,而不必写 window.document。同样,可以把当前窗口对象的方法当作函数来使用,如只写alert(),而不必写 Window.alert()。

除了上面列出的属性和方法,Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口,而不仅仅是隐式地引用它时,可以使用这两个属性。除了这两个属性之外,parent 属性、top 属性以及frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。

(2)Window 对象属性


closed    返回窗口是否已被关闭。
defaultStatus    设置或返回窗口状态栏中的默认文本。
document    对 Document 对象的只读引用。(请参阅对象)
frames    返回窗口中所有命名的框架。该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架。
history    对 History 对象的只读引用。请参数 History 对象。
innerHeight    返回窗口的文档显示区的高度。
innerWidth    返回窗口的文档显示区的宽度。
localStorage    在浏览器中存储 key/value 对。没有过期时间。
length    设置或返回窗口中的框架数量。
location    用于窗口或框架的 Location 对象。请参阅 Location 对象。
name    设置或返回窗口的名称。
navigator    对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener    返回对创建此窗口的窗口的引用。
outerHeight    返回窗口的外部高度,包含工具条与滚动条。
outerWidth    返回窗口的外部宽度,包含工具条与滚动条。
pageXOffset    设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset    设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent    返回父窗口。
screen    对 Screen 对象的只读引用。请参数 Screen 对象。
screenLeft    返回相对于屏幕窗口的x坐标
screenTop    返回相对于屏幕窗口的y坐标
screenX    返回相对于屏幕窗口的x坐标
sessionStorage    在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
screenY    返回相对于屏幕窗口的y坐标
self    返回对当前窗口的引用。等价于 Window 属性。
status    设置窗口状态栏的文本。
top    返回最顶层的父窗口。

(3)Window 对象方法


alert()    显示带有一段消息和一个确认按钮的警告框。
atob()    解码一个 base-64 编码的字符串。
btoa()    创建一个 base-64 编码的字符串。
blur()    把键盘焦点从顶层窗口移开。
clearInterval()    取消由 setInterval() 设置的 timeout。
clearTimeout()    取消由 setTimeout() 方法设置的 timeout。
close()    关闭浏览器窗口。
confirm()    显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()    创建一个 pop-up 窗口。
focus()    把键盘焦点给予一个窗口。
getSelection()    返回一个  Selection 对象,表示用户选择的文本范围或光标的当前位置。
getComputedStyle()    获取指定元素的 CSS 样式。
matchMedia()    该方法用来检查 media query 语句,它返回一个 MediaQueryList对象。
moveBy()    可相对窗口的当前坐标把它移动指定的像素。
moveTo()    把窗口的左上角移动到一个指定的坐标。
open()    打开一个新的浏览器窗口或查找一个已命名的窗口。
print()    打印当前窗口的内容。
prompt()    显示可提示用户输入的对话框。
resizeBy()    按照指定的像素调整窗口的大小。
resizeTo()    把窗口的大小调整到指定的宽度和高度。
scroll()    已废弃。 该方法已经使用了 scrollTo() 方法来替代。
scrollBy()    按照指定的像素值来滚动内容。
scrollTo()    把内容滚动到指定的坐标。
setInterval()    按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout()    在指定的毫秒数后调用函数或计算表达式。
stop()    停止页面载入。

(4)定时器的使用

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script>
                        
                        var intervalIDS =new Array(); // [1,2,3 ]
                        // 循环执行的定时器任务
                        function startInterval(){
                                // 2
                                var intervalID = window.setInterval(
                                        function(){
                                                var today =new Date();
                                                var hours=today.getHours();
                                                var minutes=today.getMinutes();
                                                var seconds =today.getSeconds();
                                                var str = hours+"点"+minutes+"分"+seconds+"秒";
                                                
                                                var ta =document.getElementById("timeArea");
                                                ta.value =str;
                                        
                                        },
                                        1000
                                );
                                intervalIDS.push(intervalID);
                        }
                        function stopInterval(){
                                while(intervalIDS.length >0){
                                        window.clearInterval(intervalIDS.shift());
                                }
                                
                                
                        }
                        
                        var timeoutIDS =new Array();
                        // 执行一次的定时器任务
                        function startTimeout(){
                                
                                var timeoutID =window.setTimeout(
                                        function(){
                                                var today =new Date();
                                                var hours=today.getHours();
                                                var minutes=today.getMinutes();
                                                var seconds =today.getSeconds();
                                                var str = hours+"点"+minutes+"分"+seconds+"秒";
                                                console.log(str)
                                        
                                        },
                                        5000
                                );
                                
                                timeoutIDS.push(timeoutID);
                        }
                        
                        function stopTimeout(){
                                while(timeoutIDS.length >0){
                                        window.clearTimeout(timeoutIDS.shift());
                                }
                        }
                        
                </script>
        </head>
        <body>
                <input type="text" id="timeArea" /> <br />
                <input type="button" value="开始Interval" onclick="startInterval()" />
                <input type="button" value="结束Interval" onclick="stopInterval()" />
                <input type="button" value="开始timeout" onclick="startTimeout()" />
                <input type="button" value="结束timeout" onclick="stopTimeout()" />
        </body>
</html>

(5)open和close方法

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script>
                        function fun1(){
                                window.open("https://www.baidu.com")
                        }
                        function fun2(){
                                window.close();
                        }
                </script>
        </head>
        <body>
                <input type="button" value="打开百度" onclick="fun1()" />
                <input type="button" value="关闭页面" onclick="fun2()" />
        </body>
</html>

二,DOW

1,什么是DOM

      简单来说:DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.

2,什么是document

        document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象,可以说是学习好dom编程的关键所在。

(1)document对象如何获取

        document对象是window对象的一个成员属性,通过window.document来访问,当然也可以直接使用document,根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。

(2)DOM节点分类node

结点对象:Node,document对象中的每一个分支点都是一个node对象,它有三个子类

元素节点 Element   如:<a href="链接地址">我的链接</a>

属性节点 Attribute  如:href="链接地址"

文本节点 Text      如:我的链接

(3)DOM操作的内容

1.查询元素(获取元素,进而操作元素,或者元素的属性,文本)

2.操作文本

3.操作属性

4.操作元素

5.操作CSS样式(一个特殊的属性style)

(4)直接获取节点的几种方式

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script>
                        function fun1(){
                                // 获得document对象
                                var element1 =document.getElementById("d1");
                                console.log(element1);
                                
                                element1.innerText="这是我的div";
                        }
                        function fun2(className){
                                var elements =document.getElementsByClassName(className);
                                console.log(elements)
                                for(var i =0;i<elements.length;i++){
                                        console.log(elements[i])
                                }
                        }
                        function fun3(){
                                var elements =document.getElementsByTagName("input");
                                console.log(elements);
                                for(var i =0;i<elements.length;i++){
                                        console.log(elements[i])
                                }
                        }
                        function fun4(){
                                var elements=document.getElementsByName("hobby");
                                console.log(elements);
                                for(var i =0;i<elements.length;i++){
                                        console.log(elements[i])
                                }
                        }
                </script>
        </head>
        <body>
                <div id='d1' class="a">这是第一个div</div>
                <div id='d2' class="a">这是第二个div</div>
                <div id='d3' class="a">这是第三个div</div>
                <input id='i1' class="a" name='name1'/>
                <div id='d4' class="b" name='name1'>这是第四个div</div>
                <div id='d5' class="b">这是第五个div</div>
                爱好:
                <input type="checkbox" name="hobby"  value="1" />篮球
                <input type="checkbox" name="hobby"  value="2" />足球
                <input type="checkbox" name="hobby"  value="3" />羽毛球
        
                <hr />
                <input type="button" value="id值获取" onclick='fun1()' />
                <input type="button" value="class属性值获取" onclick='fun2("b")' />
                <input type="button" value="标签名获取" onclick='fun3()' />
                <input type="button" value="name属性值获取" onclick='fun4()' />
        </body>
</html>

(5)操作节点属性

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script>
                        function fun1(){
                                //获得属性值
                                var node =document.getElementById("in1");
                                
                                // 语法1     获得  节点.属性名    修改  节点.属性名 =属性值
                                console.log(node.type);
                                console.log(node.value);
                                //改变属性值
                                node.type="button";
                                node.value="你好我也好";
                                
                                
                                // 语法2  getAttribute   setAttribute
                                console.log(node.getAttribute("type"));
                                console.log(node.getAttribute("value"));
                        
                                node.setAttribute("type","button");
                                node.setAttribute("value","大家好");
                        }
                        
                        
                </script>
        </head>
        <body>
                <input type="text" value="你好呀" id="in1" /> 
                <hr />
                <input type="button" value="变" onclick="fun1()"  />
                
        </body>
</html>

(6)通过style.css样式名和通过设置class属性两种方式实现

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style>
                        #div1{
                                width: 100px;
                                height: 100px;
                                border: 1px solid red;
                                
                        }
                        .a{
                                background-color: lightblue;
                                color: blue;
                                font-size: 40px;
                        }
                </style>
                <script>
                        function fun1(){
                                // 节点.style.样式名=样式值
                                var element =document.getElementById("div1");
                                element.style.width="200px";
                                element.style.height="200px";
                                element.style.border="10px solid green";
                                // css样式在更多的时候是以class选择器的形式作用到元素上
                                // 可以通过修改class属性,影响div的样式
                                element.setAttribute("class","a")
                        }
                </script>
        </head>
        <body>
                <div id="div1" >
                        你好呀
                </div>
                <hr/>
                <input type="button" value="测试" onclick="fun1()" />
        </body>
</html>

(7)innerHtml 操作双标签中间的HTML   innerText  操作双标签中间的 Textvalue      操作表单标签值

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style>
                        div{
                                border: 1px solid red;
                                width: 200px;
                                height: 200px;
                        }
                </style>
                <script>
                        function fun1(){
                                var element1=document.getElementById("d1");
                                
                                /*
                                 * innerText  不包含HTML结构
                                 * innerHTML  包含HTML结构
                                 * */
                                
                                console.log("innerText>>>"+element1.innerText);
                                console.log("innerHTML>>>"+element1.innerHTML);
                                
                                
                                var element2=document.getElementById("i1");
                                console.log(element2.value)
                        }
                        function fun2(){
                                var element1=document.getElementById("d1");
                                //element1.innerText="<h1>一刻也不能分割</h1>"
                                element1.innerHTML="<h1>一刻也不能分割</h1>"
                                
                                var element2=document.getElementById("i1");
                                element2.value="无论我走到哪里";
                                
                        }
                </script>
        </head>
        <body>
                <div id='d1'>
                        a
                        <span>文字</span>
                        b
                </div>
                
                <input type="text" value="我和我的祖国" id='i1' />
                
                <input type="button" value="获取内容"  onclick="fun1()"/>
                <input type="button" value="修改内容"  onclick="fun2()"/>
        </body>
</html>


(8)创建元素createElement()        增加元素appendChild()        删除元素removeChild()

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title></title>
                <style>
                        #d1{
                                border: 1px solid red;
                                width: 80%;
                                height: 200px;
                        }
                </style>
                <script>
                        function fun1(){
                                var div1=document.getElementById("d1");
                                // 通过JS创建标签
                                var in1=document.createElement("input");
                                in1.setAttribute("type","text");
                                in1.setAttribute("value","请输入内容");
                                
                                var in2=document.createElement("input");
                                in2.setAttribute("type","password");
                                in2.setAttribute("value","123456789");
                                
                                var in3=document.createElement("input");
                                in3.setAttribute("type","button");
                                in3.setAttribute("value","删除");
                                
                                var br=document.createElement("br");
                                
                                in3.onclick=function (){
                                        div1.removeChild(in1)
                                        div1.removeChild(in2)
                                        div1.removeChild(in3)
                                        div1.removeChild(br)
                                }
                                div1.appendChild(in1);
                                div1.appendChild(in2);
                                div1.appendChild(in3);
                                div1.appendChild(br);
                        }
                </script>
        </head>
        <body>
                <div id="d1">
                        
                </div>
                <input type="button" value="增加" onclick="fun1()" />
        </body>
</html>

标签:function,窗口,对象,JavaScript,BOW,var,document,DOW,属性
From: https://blog.csdn.net/weixin_72637723/article/details/141724185

相关文章

  • Markdown学习
    学习、实践AI平台返回的内容并回答以下问题1.哪些内容是你掌握的?哪些内容是你没有掌握的?使用AI推荐的工具或者你喜欢的工具实践一下没有掌握的内容。(1)加粗**加粗**加粗(2)斜体*斜体*斜体(3)链接https://www.mosoteach.cn/web/index.php?c=interaction&m=index&clazz_course......
  • Markdown学习
    任务详情你熟悉Markdown格式吗?选择自己熟悉的AI平台,把下面的提示词发给ta:作为计算机技术专家、人工智能技术专家,网络空间安全专家,密码学专家,密码技术专家,请您:深入浅出的讲解一下Mardown,Markdown的详细语法推荐至少两款线上工具,至少两种线下工具讲解Markdown的高级用法,包括......
  • Markdown学习
    Markdown学习写了一些Markdown的基本语法设计通用模板1、提示词框架:我知道除了给出的框架还有RTF框架、CTF框架、TREF框架等,在这之中我一般会使用RTF框架或者ICIO框架2、通用模板:RTF通用模板角色(Role)执行者角色:请在此处明确执行该任务的个人、团队或系统的角色。例......
  • 1-1 Markdown学习
    问题1我学到了Markdown是一种轻量级标记语言,用于格式化纯文本。它的语法设计简洁,易于学习,主要用于编写格式化的文本,如文档、博客、README文件等。我学到了一些常见的Markdown语法及其用法。AI推荐的线上工具有StackEdit和Dillinger,线下工具有Typora和Obsidian。我还学到了在AIGC......
  • Mr.Lou的面向AI课程学习之_markdown
    面向AI学习markdown的使用提问词作为计算机技术专家、人工智能技术专家,网络空间安全专家,密码学专家,密码技术专家,请您:深入浅出的讲解一下Mardown,Markdown的详细语法推荐至少两款线上工具,至少两种线下工具讲解Markdown的高级用法,包括插入数学公式、绘图、制作PPT,格式转换等讲......
  • Markdown学习
    Markdown学习作业详情你熟悉Markdown格式吗?选择自己熟悉的AI平台,把下面的提示词发给ta:"""作为计算机技术专家、人工智能技术专家,网络空间安全专家,密码学专家,密码技术专家,请您:1.深入浅出的讲解一下Mardown,Markdown的详细语法2.推荐至少两款线上工具,至少两种线下工具3.讲......
  • 梁山县技工学校继续教育刷课脚本-JavaScript编写
    脚本学习网站:lsx.qzjystudy.com脚本地址:梁山县技工学校继续教育-刷课脚本教程1.插件安装(以MicrosoftEdge浏览器为例)打开最中间那个蓝色绿色的浏览器,谷歌之类的浏览器也可以点击屏幕右上角三个点,图示位置,然后点击扩展点击获取扩展搜索Tampermonkey,并点击获取那个绿......
  • 1-1 Markdown学习
    1.Markdown简介及详细语法Markdown是一种轻量级标记语言,旨在使文档编写更加简单和直观。它使用纯文本格式,易于阅读和编写,并且可以转换为HTML等格式。以下是Markdown的详细语法:标题使用#表示不同级别的标题:#一级标题##二级标题###三级标题列表无序列表使用*、+或......
  • 学习公社刷课脚本-JavaScript编写
    脚本学习网站:教育干部网络学院:www.enaea.edu.cn脚本地址:教育干部网络学院-刷课脚本教程1.插件安装(以MicrosoftEdge浏览器为例)打开最中间那个蓝色绿色的浏览器,谷歌之类的浏览器也可以点击屏幕右上角三个点,图示位置,然后点击扩展点击获取扩展搜索Tampermonkey,并点击......
  • 2024-2025-1 20221328 RocEDU.信息安全系统设计 1-1 Markdown学习(选做)
    一、向AI提问AI的回答:1.深入浅出的讲解Markdown及其详细语法Markdown是一种轻量级标记语言,其设计初衷是为了让人们能够使用易读易写的纯文本格式编写文档,并转换成有效的HTML(标准通用标记语言下的一个应用)文档。Markdown的语法简洁明了,比HTML更加简单易用,广泛应用于写作、博客......