JavaScript基础(Dom操作)(一)

简介: JavaScript基础(Dom操作)

一,BOM模型


BOM提供了独立于内容的、可与浏览器窗口进行互动的对象结构

BOM:浏览器对象模型(Browser Object Model)



1.1,BOM可实现功能


弹出新的浏览器窗口

移动、关闭浏览器窗口以及调整窗口的大小

页面的前进、后退


二,Window对象的常用属性


表示浏览器中打开的窗口

常用的属性


edb4e54fe40fca864417217a5eac0128_21e512d835c64b83a9d466109766b75b.png



这里面有Window所有对象我这截图不全,里面带f的是函数,不带的是属性


属性名称 说 明
history 有关客户访问过的URL的信息
location 有关当前 URL 的信息
screen 只读属性,包含客户端显示屏幕的信息

语法:

window.属性名= "属性值";

358c10845ebfd25acabec46c2f2ea4ad_62be3b9e2fb84712a5e1667c88f976fd.png


返回这个点击直接跳转百度页面


screen.width 返回浏览器屏幕的宽度,单位为像素;

bc8ceebd77db65c92fe37777771d000f_ea1fc9ace1664e54abb946170939bf00.png



2.1,Window对象的常用方法


常用的方法


方法名称 说 明
prompt( ) 显示可提示用户输入的对话框
alert( ) 显示带有一个提示信息和一个确定按钮的警示框
confirm( ) 显示一个带有提示信息、确定和取消按钮的对话框
close( ) 关闭浏览器窗口
open( ) 打开一个新的浏览器窗口,加载给定 URL 所指定的文档
setTimeout( ) 在指定的毫秒数后调用函数或计算表达式
setInterval( ) 按照指定的周期(以毫秒计)来调用函数或表达式
clearTimeout( ) 用于停止执行setTimeout( )方法的函数代码
clearInterval( ) 用于停止 setInterval( ) 方法执行的函数代码



2.1-1,open()和close()方法


<body>
    <div>
        <input type="button" value="打开窗口" onclick="openwin()"></input>
        <input type="button" value="关闭窗口" onclick="closewin()">
    </div>
</body>
<script>
    function openwin(){
        window.open("https://www.baidu.com.cn","win1")
    }
    function closewin(){
        window.close()
    }
</script>


3fd34d51feb7121d44bc2ef431c7377a_9b64dbac332d48baa4e8e4906ddf7008.png

第一个按钮可以打开窗口,第二个按钮可以关闭窗口

窗口特征的一些属性


属性名称 说 明
height、width 窗口文档显示区的高度、宽度,以像素计
left、top 窗口的x坐标、y坐标,以像素计
toolbar=yes ,no, 1 , 0 是否显示浏览器的工具栏,黙认是yes
scrollbars=yes,no,1,0 是否显示滚动条,黙认是yes
location=yes,no,1,0 是否显示地址地段,黙认是yes
status=yes,no,1,0 是否添加状态栏,黙认是yes
menubar=yes,no,1,0 是否显示菜单栏,黙认是yes
resizable=yes,no,1,0 窗口是否可调节尺寸,黙认是yes
titlebar=yes,no,1,0 是否显示标题栏,黙认是yes
fullscreen=yes,no,1,0 是否使用全屏模式显示浏览器,黙认是no。处于全屏模式的窗口必须同时处于剧院模式

相关文章
|
1月前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
13 1
js之DOM 文档对象模型
|
16天前
|
JavaScript 前端开发
JavaScript 与 DOM 交互
【9月更文挑战第01天】
17 2
|
22天前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
39 1
|
27天前
|
JSON JavaScript 前端开发
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
|
1月前
|
XML JavaScript 前端开发
JavaScript中的DOM解析器DOMParser api的讲解
`DOMParser`能将XML或HTML源码字符串解析成DOM `Document`。通过`new DOMParser()`创建实例,使用`.parseFromString(string, type)`方法进行解析,其中`string`为待解析的字符串,`type`指定解析类型如`text/html`或`text/xml`等,返回一个`Document`对象。例如,可解析包含`&lt;p&gt;666&lt;/p&gt;`的字符串并获取其文本内容`666`。
80 1
|
1月前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
|
1月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
25 0
|
2月前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
34 1
|
2月前
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
32 1
|
2月前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$(&quot;p&quot;)`、`$(&quot;#myDiv&quot;)`、`$(&quot;.myClass&quot;)`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
22 0