前端笔记4 JS BOM&DOM

最新推荐文章于 2024-08-24 04:15:38 发布

馬致远

最新推荐文章于 2024-08-24 04:15:38 发布

阅读量828

点赞数

分类专栏：前端阶段文章标签： JS DOM BOM 文档对象

本文链接：https://blog.csdn.net/linyuancsdn/article/details/96556718

版权

本文详细介绍了浏览器对象模型（BOM）中的window对象，包括其属性、方法和定时任务。接着深入探讨了DOM文档对象模型，讲解了document对象、事件与DOM的联动、DOM节点操作以及节点样式的修改。还提供了多个实战案例，如隔行换色、鼠标高亮、全选全不选、图片轮播和二级联动等。

摘要由CSDN通过智能技术生成

Bom

概念

Browser Object Model 浏览器对象模型

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

window对象

概念

称为浏览器对象, 当浏览器打开一个 html 文档的时候, 通常会创建一个 window 对象

属性

window对象属性	含义
history	历史- 表示客户访问过的历史记录(URL)
location	当前页面 URL (网址) 信息
screen	只读属性, 包含有关客户端显示屏幕的有关信息

方法

方法名	说明
弹窗 alert	警告框 (带有提示信息,和一个确定按钮)
弹窗 confirm	确认框 (带有提示信息, 和确认与取消按钮的对话框)
弹窗 prompt	输入框 (可以使用对话框接收用户的输入信息)
close()	关闭窗口功能
open()	打开一个新的浏览器窗口,加载指定URL 文档
setTimeout()	在指定毫秒数后执行指定函数(一次性)
setInterval()	在指定毫秒数后执行指定函数(周期性)
clearInterval()	取消由 setInterval() 设置的 timeout。

弹窗案例

警告框

<button onclick="window.alert('有种再点我一次')">点我一下试试</button>
<button onclick="alert('有种再点我一次')">点我一下试试</button>

确认框

<button onclick="f1()">点我一下试试</button>
function f1(){
	// confirm 确认框 有返回值, 当点击确认的时候,返回true 
    var boo = confirm('有种再点我一次');
    console.log(boo);
}
// 主要用处 删除按钮. 确认用户是否确定要删除

function f1(){
    var boo = confirm('你确定要删除吗?');
    if(boo){
        console.log("删除成功!");
    }else{
        console.log("取消删除!");
    }
}

输入框

prompt(参数一,参数二) , 表示提示信息和默认值

<button onclick="f1()">登录</button>

function f1(){
    var pwd = prompt('请输入密码');
    console.log(pwd);
}

窗口案例

// 父页面
<button onclick="open_win()">打开页面</button>
function open_win(){
    window.open("test.html"); // 可以传递一些参数, 用于表示新窗口的样式
}

// 子页面 test.html 
<button onclick="close_win()">关闭页面</button>
function close_win(){
    window.close();
}

定时任务

setTimeout() 一次性定时任务

function open_win(){
    // 执行定时任务
    // window.setTimeout("要执行的函数",需要等待的毫秒数);
    window.setTimeout("window.open('test.html')",3000);
}

setInterval() 周期性任务

// 向浏览器中 输出一些小图片(每隔两秒钟输入一张图片)
function setInterval_print(){
    window.setInterval("document.write('<img src=\"a.gif\">')",2000);
}
setInterval_print();

撤销定时任务 clearInterval()

<button onclick="setInterval_print()">开启定时任务</button>
<button onclick="clearInterval_print()">关闭定时任务</button>

var num;
function setInterval_print(){
    // 返回值表示 该定时任务的一个编号
    num = window.setInterval("console.log('123')",200);
}
function clearInterval_print(){
    // 取消 编号为num的定时任务
    window.clearInterval(num);
}

history

history 方法	说明
back()	加载history 对象列表中前一个 URL
forward()	加载history 对象列表中后一个 URL
go(参数)	加载history 对象列表中指定的一个 URL

back() forward()

<button onclick="history.back()">返回到上一个页面</button><br><br>
<button onclick="history.forward()">加载到一个页面</button>
<h1>A 页面</h1>
<a href="b.html">B页面</a>

go()

<button onclick="history.back()">返回到上一个页面</button><br><br>
<button onclick="history.forward()">加载到一个页面</button>
/*******相当于********/
<button onclick="history.go(-1)">返回到上一个页面</button><br><br>
<button onclick="history.go(1)">加载到一个页面</button>

<button onclick="history.go(-2)">返回到上两层页面</button><br><br>
<h1>B 页面</h1>

location

属性方法	名称	说明
属性	host	主机号,url 端口号
属性	hostname	主机名
属性	href	返回完整URL
方法	reload()	重新加载当前文档
方法	replace()	用新文档替换当前文档

获取属性案例

console.log(window.location.host);
console.log(window.location.hostname)
console.log(window.location.href);
// 需要使用 webStorm 内置服务器打开页面

设置属性

location.href 直接获取

location.href = “”; 设置新网址

window.location.href = "URL地址"; 跳转页面到指定地

<button onclick="changeURL()">改变网页地址</button>
<br>
<br>
<a href="http://www.baidu.com">百度首页</a>
    
function changeURL(){
    //改变页面网址, 类似于 使用a链接 跳转页面
    window.location.href = "http://www.baidu.com";
}

方法案例

<script>
   document.write(new Date());
   document.write("<br/>");
   document.write("<br/>");
   function changeDate(){
       //刷新页面
        window.location.reload();
   }
</script>
 <button onclick="changeDate()">改变时间</button>

Dom 文档模型

DOM 文档对象模型

基于文档编程的一组API 接口

是W3C组织编写的一组规范, 允许访问和操作 HTML 页面中每一个单独的元素

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

类似于一个上帝视角, 可以对看到的每一个元素, 进行操作

下棋没有棋盘 , 定位某一个旗棋子的位置

document 文档对象

获取节点对象的常用方法

常用方法	方法含义
write()	向文档书写文本, html标签甚至 script 脚本
getElementById()	返回指定ID的第一个对象的引用
getElementsByName()	返回所有该名称属性的对象集合
getElementsByTagName()	返回所有该标签名称的对象集合

事件和 Dom 联动

行内方法联动

<body>
    <button onclick="f1()">点击</button>
</body>
<script>
    function f1(){
        // 执行代码
    }
</script>

对象联动

<body>
    <button >点击</button>
</body>
<script>
    var button = document.getElementsByTagName("button")[0];

    // 对象.事件 = 函数, (只能写函数名, 不能加括号)
    // button.onclick = f1(); //错误
    button.onclick = f1;  // 正确
    //错误的原因   当程序运行到 f1() 认为 是函数的调用 , 直接执行 f1 函数
    function f1(){
        alert(123);
    }
</script>

匿名函数

<script>
    var button = document.getElementsByTagName("button")[0];

    // 对象.事件 = 匿名函数
    button.onclick = function (){
        alert(123);
    }
</script>

this 关键字

button.onclick = function (){
	// this 指代当前对象
    alert(this.innerHTML);
}

DOM 节点

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

在节点树中ÿ

最低0.47元/天解锁文章

馬致远

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端笔记4 JS BOM&DOM

Bom概念Browser Object Model 浏览器对象模型BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构window对象概念称为浏览器对象, 当浏览器打开一个 html 文档的时候, 通常会创建一个 window 对象属性window对象属性含义history历史- 表示客户访问过的历史记录(URL)location当...
复制链接

扫一扫

专栏目录