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

JavaScript精通到深入 javascript 语言精粹(修订版)

zhezhongyun 2024-12-30 08:13 78 浏览

前几天教大家从入门到精通，当然仅靠那一篇文章是不足以带领大家精通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函数。

综合案例：书讯快递

XHTML 语法

上一篇：Java实现Http多次请求复用同一连接
下一篇：Linux平台上的PHP IDE盘点 linux php.ini

JavaScript精通到深入 javascript 语言精粹(修订版)

相关推荐

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）

在SpringBoot+Vue3项目中通过Nginx代理WebSocket实现跨域通信

利用webSocket实现消息的实时推送

谈谈websocket跨域

前端开发规范(一、HTML篇)

html5 工业web组态-开发自定义的组件 (炫酷按钮)

Python每日一库之Beautiful Soup（python mtime）