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

最新推荐文章于 2024-07-14 15:54:59 发布

kate_inurArea

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量354

点赞数 1

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/sinat_38505686/article/details/105923645

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

外部对象描述

BOM

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

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

DOM

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

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

BOM和DOM的关系

在这里插入图片描述

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概述

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学习笔记-----BOM和DOM操作

Javascript学习外部对象描述BOMDOMwindow对象对话框定时器定时器周期性定时器外部对象描述BOMBrowser Object Model：浏览器对象模型。用来访问和操纵浏览器窗口，使Javascript有能力与浏览器“对话”通过使用BOM，可移动窗口、更改状态栏文本、执行其他不与页面内容发生直接联系的操作没有相关标准，但被广泛支持DOMDocument Objec...
复制链接

扫一扫