JavaScript精通到深入
lipiwang 2025-05-25 13:57 3 浏览 0 评论
前几天教大家从入门到精通，当然仅靠那一篇文章是不足以带领大家精通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函数。
综合案例：书讯快递
相关推荐
- Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS，秒变React大神
-
梦晨发自凹非寺量子位|公众号QbitAIQwen上新“AI前端工程师”WebDev，一句话开发网页应用。三大件HTML，CSS，JavaScript一个工具全包了，定睛一看用的还是Reac...
- 程序员的 JavaScript 代码该如何让计算机搞懂?
-
出自程序员之手的JavaScript代码，该如何变成计算机所能理解的机器语言呢？本文将带你走进JavaScript引擎内部，一探究竟。作者|LydiaHallie译者|弯月，责编|...
- JavaScript:如何优雅的创建数组?
-
在JavaScript里，有多种方式可以创建数组，下面为你详细介绍：1.使用数组字面量这是最常用的创建数组的方法，使用方括号[]来创建数组。//创建一个空数组letemptyArray...
- Jquery 详细用法
-
1、jQuery介绍(1)jQuery是什么?是一个js框架，其主要思想是利用jQuery提供的选择器查找要操作的节点,然后将找到的节点封装成一个jQuery对象。封装成jQuery对象的目的有...
- HTML页面基本结构和加载过程
-
大家好，我是皮皮。前言对于前端来说，HTML都是最基础的内容。今天，我们来了解一下HTML和网页有什么关系，以及与DOM有什么不同。通过本讲内容，你将掌握浏览器是怎么处理HTML内容的，...
- 【HarmonyOS Next之旅】兼容JS的类Web开发(一)
-
目录1->概述1.1->整体架构2->文件组织2.1->目录结构2.2->文件访问规则2.3->媒体文件格式3->js标签配置3....
- JavaScript初学者指南
-
如果你刚接触JavaScript，想必已经被“modulebundlersvs.moduleloaders”、“Webpackvs.Browserify”和“AMDvs.Common...
- 前端图片延迟加载详细讲解
-
原文链接：http://www.gbtags.com/gb/share/6366.htm?原本是打算昨天昨天下午的时候就写一篇关于前端图片延迟加载的详细技术的博客的，没想到下午公司项目出现了一些问题...
- selenium:操作滚动条的方法(8)
-
selenium支持几种操作滚动条的方法，主要介绍如下：使用ActionChains类模拟鼠标滚轮操作使用函数ActionChains.send_keys发送按键Keys.PAGE_DOWN往下滑动...
- jQuery 获取和设置HTML元素
-
jQuery中包含更改和操作HTML元素和属性的强大方法。我们可以通过这些方法来获取HTML元素中的文本内容、元素内容（例如HTML标签）、属性值等。text()方法text()方法可以用...
- JavaScript脚本如何断言select下拉框的元素内容?
-
使用JavaScript脚本断言select下拉框的元素内容，需要考虑页面元素是否加载成功，出错时打印等，主要实现功能功能需包括如下几点：1.等待下拉框元素加载完成（支持超时设置）2.获取下...
- JavaScript图片或者div拖动拖动函数的实现
-
/**拖动图片封装html格式：<imglay-src="${item.Resourcesurl}"alt="${item.ResourcesName}"...
- JavaScript代码怎样引入到HTML中?
-
JavaScript程序不能独立运行，它需要被嵌入HTML中，然后浏览器才能执行JavaScript代码。通过<script>标签将JavaScript代码引入到HTM...
- 当你在Vue.js中想要隐藏 `` 标签时，可以这样做:
-
在Vue.js里，要是你想要搞掉`<br>`（换行）标签的效果，通常有几种路子：1.使用CSS嗯，最简单的办法就是用CSS搞定，控制元素的样式，让<br>标签彻底不显示...
- php手把手教你做网站(三十)上传图片生成缩略图
-
三种方法：按比例缩小、图片裁切、预览图片裁切不管使用哪一个都是建立在图片已经上传的基础上；预览裁切上传，如果预览的图片就是原始大小，可以预览裁切以后上传（这里是个假象，下边会说明）；1、上传以后按比例...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- maven镜像 (69)
- undefined reference to (60)
- zip格式 (63)
- oracle over (62)
- date_format函数用法 (67)
- 在线代理服务器 (60)
- shell 字符串比较 (74)
- x509证书 (61)
- localhost (65)
- java.awt.headless (66)
- syn_sent (64)
- settings.xml (59)
- 弹出窗口 (56)
- applicationcontextaware (72)
- my.cnf (73)
- httpsession (62)
- pkcs7 (62)
- session cookie (63)
- java 生成uuid (58)
- could not initialize class (58)
- beanpropertyrowmapper (58)
- word空格下划线不显示 (73)
- jar文件 (60)
- jsp内置对象 (58)
- makefile编写规则 (58)