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。处于全屏模式的窗口必须同时处于剧院模式

相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
1月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
2月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
72 4
|
3月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
21 5
|
3月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
36 4
|
3月前
|
JavaScript 前端开发 索引
你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList
该文章详细解释了JavaScript中HTMLCollection和NodeList这两种DOM集合类型的特性、使用方法及其区别,并通过实例代码展示了如何操作这两种集合来选取和遍历DOM元素。
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
24 5
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
28 2
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
28 4