当前位置：网站首页 > 技术文章 > 正文

JavaScript精通到深入_javascript进阶书籍推荐

myzbx 2025-09-09 07:40 41 浏览

前几天教大家从入门到精通，当然仅靠那一篇文章是不足以带领大家精通JavaScript的，今天给大家带来第二讲！

BOM和DOM简介

BOM，Browser Object Model ,浏览器对象模型。

BOM主要提供了访问和操作浏览器各组件的方式。

浏览器组件：

window(浏览器窗口)

location(地址栏)

history(浏览历史)

screen(显示器屏幕)

navigator(浏览器软件)

document(网页)

DOM，Document Object Model，文档对象模型。

DOM主要提供了访问和操作HTML标记的方式。

HTML标记：

图片标记

表格标记

表单标记

body、html标记

……

BOM和DOM不是JS的内容。它们是W3C制定的规范。但是，BOM和DOM在浏览器中以对象的形式得以实现。

换句话说：BOM和DOM都是由一组对象构成。

W3C是制作互联网标准的一个国际化的组织，如：XHTML、CSS、JavaScript、AJAX等。

BOM对象结构图

各对象之间是有层级关系的，那么各对象之间如何访问呢？

window.document.write(“OK”)

window.document.body.bgColor = “#FF0000”;

window对象是所有其它对象的最顶层对象，因此，可以省略。

document.write(“OK”);

document.body.bgColor = “#FF0000”;

window.alert(“OK”); ——> alert(“OK”);

window.prompt(“请输入一个分数”)； ——> prompt(“请输入一个分数”);

Window对象属性

name：指浏览器窗口的名字或框架的名字。这个名字是给<a>标记的target属性来用的。

设置窗口的名字：window.name = “newWin”

获取窗口的名字：document.write(name);

top：代表最顶层窗口。如：window.top

parent：代表父级窗口，主要用于框架。

self：代表当前窗口，主要用于框架中。

innerWidth：指浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏)，该属性Firefox支持。

在IE下，使用
document.documentElement.clientWidth 来代替 window.innerWidth

innerHeight：指浏览器窗品的内高(不含菜单栏、工具栏、地址栏、状态栏)，该属性Firefox支持。

在IE下，使用
document.documentElement.clientHeight 来代替 window.innerHeight

document.documentElement就是<html>标记对象

document.body 就是 <body>标记对象

window对象方法

alert()：弹出一个警告对话框。

prompt()：弹出一个输入对话框。

confirm()：弹出一个确认对话框。如果单击“确定按钮”返回true，如果单击“取消”返回false。

close()：关闭窗口

print()：打印窗口

open()方法

功能：打开一个新的浏览器窗口。

语法：var winObj = window.open([url][,name][,options]);

说明：参数可有可无。如果没有指定参数，则打开一个选项卡式的窗口(大小是最大大化)。

参数：

url：准备在新窗口中显示哪个文件。url可以为空字符串，表示显示一个空的页面。

name：新窗口的名字，该名字给<a>标记的target属性来用。

options：窗口的规格。

width：新窗口的宽度

height：新窗口的高度

left：新窗口距离屏幕左边的距离

top：新窗口距离屏幕上边的距离

menubar：是否显示菜单栏，取值：yes、no

toolbar：是否显示工具栏。

location：是否显示地址栏。

status：是否显示状态栏。

scrollbars：是否显示滚动条，不能省略s字母。

返回值：返回一个window对象的变量，可以通过该名称跟踪该窗口。winObj具备window对象的所有属性和方法。

onload事件：当网页加载完成，指<body>标记的所有内容全部加载完成，才触发该事件(条件)。通过onload事件属性，去调用JS的函数。onload属性只有<body>标记才有。

onclick事件：当单击时，去调用JS代码。所有HTML标记都具有该事件属性。

延时器方法——setTimeout()

setTimeout()

功能：设置一个延时器，换句话说：时间一到，就执行JS代码一次。

语法：var timer = window.setTimeout(code,millisec)

参数：

code：是任何合法的JS代码，一般情况下是JS函数。该函数要放在引号中。

举例：window.setTimeout(“close()” , 2000)

举例：window.setTimeout(init, 2000); //传函数地址，因此不需要加括号。如果加括号，是将函数的执行结果传到方法中。

millisec：毫秒值。1秒=1000毫秒

返回值：返回一个延时器的id变量，这个id变量给clearTimeout()用来清除。

clearTimeout()

功能：清除延时器id变量

语法：window.clearTimeout(timer)

参数：timer就是由setTimeout()设置的延时器的id变量。

实例：计数器

定时器方法

setInterval()

功能：设置一个定时器。定时器，重复不断的执行JS代码(周期性)。

语法： var timer = window.setInterval(code , millisec)

参数：

code：是任何合法的JS代码，一般情况下是JS函数。该函数要放在引号中。

举例：window.setInterval(“init()” , 2000)

举例：window.setInterval(init, 2000); //传函数地址，因此不需要加括号。如果加括号，是将函数的执行结果传到方法中。

millisec：毫秒值。1秒=1000毫秒

返回值：返回一个定时器的id变量，这个id变量给clearInterval()用来清除。

clearInterval()

功能：清除定时器id变量

语法：window.clearInterval(timer)

参数：timer就是由setInterval()设置的定时器的id变量。

实例：图片自动切换

screen屏幕对象

Width：屏幕的宽度，只读属性。

Height：屏幕的高度，只读属性。

availWidth：屏幕的有效宽度，不含任务栏。只读属性。

availHeight：屏幕的有效高度，不含任务栏。只读属性。

navigator对象

appName：浏览器软件名称，主要用来判断客户使用的是什么核心的浏览器。

如果是IE浏览器的话，返回值为：Microsoft Internet Explorer

如果是Firefox浏览器的话，返回值为：Netscape

appVersion：浏览器软件的核心版本号。

systemLanguage：系统语言

userLanguage：用户语言

platform：平台

Location地址栏对象

href：获取地址栏中完整的地址。可以实现JS的网页跳转。location.href = “http://www.sina.com.cn”;

host：主机名

hostname：主机名

pathname：文件路径及文件名

search：查询字符串。

protocol：协议，如：http://、ftp://

hash：锚点名称。如：#top

reload([true])：刷新网页。true参数表示强制刷新

注意：所有的属性，重新赋值后，网页将自动刷新。

<meta http-equiv = “refresh” content = “5;url=http://www.sina.com.cn” />

history对象

length：历史记录的个数

go(n)：同时可以实现“前进”和“后退。”

i.history.go(0) 刷新网页

ii.history.go(-1) 后退

iii.history.go(1) 前进一步

iv.history.go(3) 前进三步

forward()：相当于浏览器的“前进”按钮

back()：相当于浏览器的“后退”按钮

下面我们来讲DOM

DOM的官方定义

DOM ， Document Object Model ，文档对象模型。我们可以把网页中的所有“东西”看成是“对象”。

DOM是W3C制定的网页标准或规则，而这个标准，在浏览器中，以“对象”的形式得以实现。

DOM的官方定义：DOM可以使脚本，动态的访问或操作，网页的内容、网页外观、网页结构。

DOM的分类

核心DOM：提供了同时操作HTML文档和XML文档的公共的属性和方法。

HTML DOM：针对HTML文档提供的专用的属性方法。

XML DOM：针对XML文档提供的专用的属性和方法。(就业班讲)

CSS DOM：提供了操作CSS的属性和方法。

Event DOM：事件对象模型。如：onclick、 onload等。

HTML节点树

节点关系

根节点，一个HTML文档只有一个根，它就是HTML节点。

子节点：某一个节点的下级节点。

父节点：某一个节点的上级节点。

兄弟节点：两个子节点同属于一个父节点。

DOM中节点类型

document文档节点，代表整个网页，不代表任何HTML标记。但它是html节点的父节点。

element元素节点，指任何HTML标记。每一个HTML标记就称一个“元素节点”。它可以有文本节点和属性节点。

attribute属性节点。指HTML标记的属性。

text节点。是节点树的最底节点。

核心DOM中的公共的属性和方法

提示：核心DOM中查找节点(标记)，都是从根节点开始的(html节点)。

1、节点访问

nodeName：节点名称。

nodeValue：节点的值。只有文本节点才有值，元素节点没有值。nodeValue的值只能是“纯文本”，不能含有任何的HTML标记或CSS属性。

firstChild：第1个子节点。

lastChild：最后1个子节点。

childNodes：子节点列表，是一个数组。

parentNode：父节点。

查找<html>标记的方法

document.firstChild

document.documentElement

查找<body>标记的方法

document.firstChild.lastChild

document.body

为什么，document.body.firstChild找不到<table>节点？

核心DOM的属性和方法，主要是针对HTML4.0开发的。

在Firefox下，会把空格或换行，当成文本节点。

HTML4.0是有没有DTD类型定义的。

2、对节点的属性操作

setAttribute(name,value)：给某个节点添加一个属性。

getAttribute(name)：获取某个节点属性的值。

removeAttribute(name)：删除某个节点的属性。

3、节点的创建

document.createElement(tagName)：创建一个指定的HTML标记，一个节点

tagName：是指不带尖括号的HTML标记名称。

举例：var imgObj = document.createElement(“img”)

parentNode.appendChild(childNode)：将创建的节点，追加到某个父节点下。

parentNode代表父节点，父节点必须存在。

childNode代表子节点。

举例：document.body.appendChild(imgObj)

parentNode.removeChild(childNode)：删除某个父节点下的子节点。

parentNode代表父节点。

childNode代表要删除的子节点。

举例：document.body.removeChild(imgObj)

综合实例：随机显示小星星

<script type="text/javascript">

//实例：随机显示小星星

(1)网页背景色为黑色

(2)创建图片节点，追加到<body>父节点

(3)图片随机大小

(4)图片随机定位坐标(x,y)

(5)定时器

(6)网页加载完成，开始星星

(7)星星显示的范围，跟窗口的宽高一样。(0,window.innerWidth)

(8)点击星星，星星消失

//网页加载完成

window.onload = function(){

//更改网页背景色

document.body.bgColor = "#000";

//定时器：1秒钟，显示一个星星

window.setInterval("star()",1000);

}

//动画主函数

function star()

{

//创建图片节点

var imgObj = document.createElement("img");

//添加src属性

imgObj.setAttribute("src","images/xingxing.gif");

//添加width属性。getRandom()随机数函数

var width = getRandom(15,85);

imgObj.setAttribute("width",width);

//添加style属性(行内样式)。

var x = getRandom(0,window.innerWidth);

var y = getRandom(0,window.innerHeight);

imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;");

//添加onclick事件属性

//this代表当前对象，this是一个对象。

//this是系统关键字。this只能在函数内使用。

imgObj.setAttribute("onclick","removeImg(this)");

//将图片节点，挂载到<body>父节点下

document.body.appendChild(imgObj);

}

//函数：求随机数函数

function getRandom(min,max)

{

//随机数

var random = Math.random()*(max-min)+min;

//向下取整

random = Math.floor(random);

//返回结果

return random;

}

//函数：删除节点

function removeImg(obj)

{

document.body.removeChild(obj);

}

</script>

</head>

<body>

</body>

HTML DOM简介和新特性

1、简介

核心DOM中，提供的属性和方法，已经可以操作网页了。为什么还要有HTMLDOM呢？

如果在核心DOM中，网页中节点层级很深时，访问这个节点时将十分麻烦。

那么，HTMLDOM中就提供了通过id直接找节点的方法，而不用再HTML根节点开始。

2、HTMLDOM的新特性

每一个HTML标记，都对应一个元素对象。如：<img>对应一个图片对象

每一个HTML标记的属性，与对应的元素对象的属性，一一对应。

HTML DOM访问HTML元素的方法(最常用)

1、getElementById()

功能：查找网页中指定id的元素对象。

语法：var obj = document.getElementById(id)

参数：id是指网页中标记的id属性的值。

返回值：返回一个元素对象。

举例：var imgObj = document.getElementById(“img01”)

2、getElementsByTagName(tagName)

功能：查找指定的HTML标记，返回一个数组。

语法：var arrObj =
parentNode.getElementsByTagName(tagName)

参数：tagName是要查找的标记名称，不带尖括号。

返回值：返回一个数组。如果只有一个节点，也返回一个数组。

举例：var arrObj =
ulObj.getElementsByTagName(“li”)

元素对象的属性

tagName：标签名称，与核心DOM中nodeName一样。

className：CSS类的样式。

id：同HTML标记id属性一样。

title：同HTML标记的title属性一样。

style：同HTML标记的style属性一样。

innerHTML：包含HTML标记中的所有的内容，包括HTML标记等。

以上元素对象属性的应用，详细看文件。

offsetWidth：元素对象的可见宽度，不带px单位。

offsetHeight：元素对象的可见高度，不带px单位。

scrollWidth：元素对象的总宽度，包括滚动条中的内容，不带px单位。

scrollHeight：元素对象的总高度，包括滚动条中的内容，不带px单位。

scrollTop：指内容向上滚动上去了多少距离(有滚动条时才有效)，默认值为0

scrollLeft：指内容向左滚动过去了多少距离(有滚动条时才有效)。

onscroll：当拖动滚动条时，调用JS函数。

综合案例：书讯快递

DOM 简介

JavaScript精通到深入_javascript进阶书籍推荐

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿