Javascript学习笔记-----BOM和DOM操作

最新推荐文章于 2024-07-24 11:09:48 发布
最新推荐文章于 2024-07-24 11:09:48 发布
阅读量358 收藏
点赞数 1
分类专栏： JavaScript 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_38505686/article/details/105923645
版权

BOM和DOM操作

外部对象描述

BOM

Browser Object Model：浏览器对象模型。用来访问和操纵浏览器窗口，使Javascript有能力与浏览器“对话”

  • 通过使用BOM，可移动窗口、更改状态栏文本、执行其他不与页面内容发生直接联系的操作
  • 没有相关标准，但被广泛支持

DOM

Document Object Model：文档对象模型，用来操作文档

  • 定义了访问和操作HTML文档的标准方法
  • 应用程序通过对DOM树的操作，来实现对HTML文档数据的操作

BOM和DOM的关系

在这里插入图片描述

window对象

window对象

window表示浏览器窗口

  • 所有JavaScript全局对象、函数以及变量均自动成为window对象的成员

常用属性

  • document：窗口中显示的HTML文档对象
  • history：浏览过窗口的历史对象文件
  • location：窗口文件地址对象
  • screen：当前屏幕对象
  • navigator：浏览器相关信息

常用方法

  • alert(), confirm()
  • setTimeout(), clearTimeout()
  • setInterval(). clearInterval()

对话框

alert(str)

  • 提示对话框，显示str字符串的内容
    confirm(str)
  • 确认对话框。显示str字符串的内容
  • 按“确认”按钮返回true，其他操作返回false

定时器

定时器

  • 多用于网页动态时钟、制作倒计时、跑马灯效果等
  • 周期性时钟：以一定的间隔执行代码，循环往复
  • 一次性时钟：在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行

周期性定时器

setInterval(exp, time)：周期性触发代码exp

  • exp：执行的语句
  • time：时间周期，单位为毫秒
  • 返回已经启动的定时器对象

clearInterval(tID)：停止启动的定时器

  • tID：启动的定时器对象

一次性定时器

setTimeout(exp, time)：一次性触发代码exp

  • exp：执行的语句
  • time：间隔时间，单位为毫秒
  • 返回已经启动的定时器
    clearTimeout(tID)：停止启动的定时器
  • tID：启动的定时器对象

常用属性

screen对象

  • screen对象包含有关客户端显示屏幕的信息
  • 常用于获取屏幕的分辨率和色彩

常用属性：

  • width/height
  • availWidth/ availHeight

history对象

history对象包含用户（在浏览器窗口中）访问过的URL

  • length属性：浏览器历史列表中的URL数量

常用方法：

  • back()
  • forward()
  • go(num)
alert(history.length)
history.forward(); //等同于单机“前进”按钮
history.back(); //等同于单机“后退”按钮
history.go(-2); //等同于单机两次“后退”按钮

location对象

  • location对象包含有关当前URL的信息
  • 常用于获取和改变当前浏览的网址
  • href属性：当前窗口正在浏览的网页地址

常用方法：

  • reload()：重新载入当前网址，同按下刷新按钮
location.href= "www.baidu.com"; //改变网址
location.reload(); //页面刷新

navigator对象

navigator对象包含有关浏览器的信息

  • 常用于获取客户端浏览器和操作系统信息
navigator.userAgent;

document对象

DOM概述

DOM概述

Document Object Model：文档对象模型

  • 当页面被加载时，浏览器会创建页面的文档对象模型

通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML

  • JavaScript能够改变页面中的所有HTML元素
  • JavaScript能够改变页面中的所有HTML属性
  • JavaScript能够改变页面中的所有CSS样式
  • JavaScript能够对页面中的所有时间做出反应

DOM节点树

  • DOM模型被构造为对象的树
  • 这棵树的根就是document对象
    在这里插入图片描述

DOM操作

DOM提供如下操作

  • 查找节点
  • 读取节点信息
  • 修改节点信息
  • 创建新节点
  • 删除节点

读取、修改

节点信息

nodeName：节点名称

  • 元素节点和属性节点：标签或属性名称
  • 文本节点：永远是#text
  • 文档节点：永远是#document
    nodeType：节点类型（返回数值）
返回值节点类型
1元素节点
2属性节点
3文本节点
8注释节点
9文档节点

元素节点的内容

  • innerText：设置或获取位于对象起始和结束标签内的文本
  • innerHTML：设置或获取位于对象起始和结束标签内的HTML
<div id="div1">
	第一行文本
	<p>段落中的文本</p>
</div>

var div = document.getElementById("div1");
var str = div.innerText+ "\n"+ div.innerHTML;
alert(str);

在这里插入图片描述

节点属性

  • getAttribute()方法：根据属性名称获取属性的值
  • setAttribute(), removeAttribute()
  • 直接通过将HTML标记、属性和CSS样式都对象化
//读写节点的属性
//1)调用方法来读写属性,该方法是通用的,
//即它可以读写任何属性.
var img = document.getElementById("img1");
console.log(img.getAttribute("src"));
img.setAttribute("src","../images/02.jpg");
img.removeAttribute("src");

元素节点的样式

style属性

  • node.style.color
  • node.style.fontSize

className属性

//2)调用属性名来读写属性,只有少数的
//几个属性可以用这种方式.
//常用:id,style,className
var a = document.getElementById("a1");
console.log(a.style.color);
a.style.color = "blue";

注意：id, style, className

查询

查询节点

如果需要操作HTML元素，必须首先找到该元素
查询节点的方式

  • 通过id查询
  • 通过层次（节点关系）查询
  • 通过标签名称查询
  • 通过name属性查询

根据元素id查询节点

document.getElementById()

  • 通过指定的ID来返回元素节点，忽略文档的结构
  • 查找整个HTML文档中的任何HTML元素
  • 如果ID值错误，则返回null
<p id="p1">这是一段文本</p>

var o = document.getElementById("p1");

根据层次查询节点

  • parentNode：遵循文档的上下层次结构，查找单个父节点
  • childNodes：遵循文档的上下层次结构，查找多个子节点

根据标签名查询节点

getElementsByTagName()

  • 根据指定的标签名称返回所有的元素
  • 忽略文档的结构
  • 查找整个HTML文档中的所有元素
  • 如果标签名称错误，则返回长度为0的节点列表

返回一个节点列表（数组）

  • 使用节点列表的length属性获取个数
  • [index]：定位具体的元素

代码示例一：

<body>
	<p>段落1</p>
	<div>
		<p>div中的段落1</p>
		<p>div中的段落2</p>
	</div>
</body>

var pNodes = document.getElementsByTagName("p");
alert(pNodes.length); //3
alert(pNodes[1].innnerHTML); //div中的段落1

注意：getElementByTagName()方法忽略文档的结构对document进行查询，即在整棵树上查询

代码示例二：

<body>
	<p>段落1</p>
	<div id="div1">
		<p>div中的段落1</p>
		<p>div中的段落2</p>
	</div>
</body>

var divObj = document.getElementById("div1");
var pNodes = divObj.getElementsByTagName("p");
alert(pNodes.length); //2
alert(pNodes[1].innerHTML); // div中的段落2

注意：对div进行查询，则只在div范围内查询p节点

根据name属性查询节点

document.getElementsByName()

  • 根据标签的name属性的值进行查询
  • 和根据标签名查询一样，返回一个节点列表
kate_inurArea
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript学习笔记(一) JS基础+DOM+BOM
kianagrow的博客
05-04 318
1. JavaScript简介 1.1 JavaScript 是什么 JavaScript 是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 1.2 JavaScript 的作用 ① 表单动态校验（密码强度检测） （ JS 产生最初的目的 ） ② 网页特效 ③ 服务端开发(Node.js) ④ 桌面程序(Electron) ⑤ App(Cordova).
javascript学习笔记（三）BOM和DOM详解
10-25
本文应用了很多实例，来解读JavaScript中BOM和DOM，DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的...
DOM + 日期对象 Date() + 事件 + JSON + 异步加载 + 时间线 + 正则表达式（RegExp）-- 大一下九、十周笔记
weixin_50948265的博客
05-11 979
目录DOM基本操作节点的类型节点的属性遍历节点树遍历元素节点数DOM继承树函数的位置增插删除替换element节点的属性和方法属性方法日期对象 Date()js定时器DOM基本操作，一些边角知识脚本化CSS事件绑定事件事件处理程序的运行环境事件处理模型--事件冒泡、捕获取消事件冒泡和捕获事件对象事件委托事件分类JSON + 异步加载 + 时间线异步加载js加载时间线正则表达式（RegExp） DOM DOM – Document Object Model文档对象模型 DOM定义了表示和修改文档所需要的方法，
JavaScript学习笔记(四) BOM 与 DOM
半虹小站
11-12 369
这篇文章我们将会简单的介绍 BOM 和 DOM 常用的属性与方法，权且当作是一篇速查手册吧
初学js4_js的bom和dom_学习笔记
没有标题
05-04 229
强行推一推博文~js04.html&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt;js的bom      
JS DOM BOM学习笔记
Curry_On的博客
11-17 554
JS DOM BOM 学习笔记 本文根据B站pink老师视频整理，供复习参考 持续更新中：
DOM和BOM-day25-个人学习笔记
时光乱了谁的心的博客
03-19 207
DOM和BOM-day25-个人学习笔记一、常用BOM对象：navigator history location screen1、navigator：保存浏览器配置信息的对象cookieEnabled：判断当前浏览器是否启用cookieplugins：保存所有插件对象的集合userAgent：保存了浏览器名称，版本号的字符串2、history：window对象中保存当前窗体访问过的url的历史记录...
JS基本功DOM学习笔记
07-12
在"Javascript_DOM学习笔记+代码"中，你可能会发现具体的示例代码和练习，这些可以帮助你更好地理解和实践上述概念。通过深入学习和实践，你将能够熟练地操纵网页内容，创建动态交互的Web应用。
javascript学习基础笔记之DOM对象操作
01-19
DOM（文档对象模型）是Web开发中的核心概念，它为HTML和XML文档提供了一种结构化的表示方式。这个API允许开发者通过编程的方式访问和修改页面的结构、...因此，深入学习DOM对象和操作是每个前端开发者必备的技能之一。
javascript-study:JavaScript系列文章学习记录
04-19
在"javascript-study-main"目录中，可能包含各种JavaScript学习资源，比如教程文章、代码示例、练习题等，这些都是深入学习JavaScript的宝贵资料。通过阅读和实践这些内容，你可以逐步提升JavaScript技能，理解其...
javascript学习笔记之BOM和DOM详解
Less Is More
09-02 392
本文应用了很多实例，来解读JavaScript中BOM和DOM，DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。 js组成 我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相
前端基础-BOM和DOM学习
weixin_30810239的博客
09-07 131
JavaScript分为 ECMAScript，BOM，DOM。 BOM：是指浏览器对象模型，使JavaScript有能力与浏览器进行对象。 DOM：是指文档对象模型，通过它，可以访问HTML文档的所有元素。 一、浏览器对象 JavaScript可以获取浏览器提供的很多对象，并并进行操作。 window window对象不但充当全局作用域，而且表示浏览器窗口。 window对象...
Next.js静态导出与动态路由优化
天涯学馆
07-20 1046
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 560
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 973
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
qq_61132537的博客
07-22 884
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 979
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 489
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
thinkphp8结合layui2.9 图片上传验证
quweiie的专栏
07-21 276
thinkphp8图片上传的验证
深入理解JavaScript：语法、DOM与BOM操作
本文档是一份关于JavaScript学习指南的笔记，主要强调了几个关键知识点： 1. **JavaScript语言基础**：介绍了JavaScript的基础工具，如`console.log()`函数，这是一个用于在浏览器控制台输出日志的常用方法，但在IE...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值