javaScript中的对象、BOM、DOM知识点总结

最新推荐文章于 2024-04-23 09:10:13 发布

_smile_yy

最新推荐文章于 2024-04-23 09:10:13 发布

阅读量2.1k

点赞数 5

分类专栏： web 文章标签： javascript jquery 对象 dom html

本文链接：https://blog.csdn.net/hhhhhggggddd/article/details/70154324

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、什么是javaScript对象？

对象是javaScript中最重要的API。

javaScript包含多种对象有：内置对象、外部对象（window对象、dom对象）、自定义对象。

二、如何使用对象？

对象包含属性和方法。

访问对象属性：对象.属性

访问对象方法：对象.方法（）

三、常用内置对象

JS中常用内置对象有：String对象、Number对象、Boolean对象、Array对象、Math对象、Date对象、RegExp对象、Function对象。

1. String对象

（1）创建String对象有两种方式：

var str1=”hello word”;

var str2=new String(“hello word”);

（2）String对象的属性：

str.length;

（3）String对象的常用方法

##大小写转换方法

str1.toLowerCase()、str1.toUpperCase()

##获取指定字符

srt1.charAt(index):返回指定位置的字符

str1.charCodeAt(index)：返回指定位置字符的Unicode编码。（index表示字符位置）

##查询指定字符串

str1.indexOf(findstr,[index])、str1.lastIndexOf(findstr,[index])

PS:findstr表示要查询的字符串，lastIndexOf表示从最后开始找起，如果没有找到则返回-1.

##获取子字符串(含头不含尾，下标均是从0开始)

str1.substring(start,[end])

##替换子字符串

str1.replace(findstr,tostr)

PS:findstr为要找的子字符换，tostr替换为的字符串，返回替换后的字符串。

##拆分子字符串

Str1.split(bystr,[howmany])

PS:bystr分割用的字符串，howmany指定返回的数组的最大长度，可以省略，返回分割后的字符串。

注意：字符串是不可变的，一些可以修改的字符串的API，实际上是返回一个新的字符串，并不改变原始字符串.

2.Number对象

（1）Number是数值对象，创建Number对象如下：var a=1.1;

（2）Number对象的常用方法

##toFixed(num):转换为字符串，并保留小数点后一定位数。如果必要该数字可以被舍弃，也可以用0补足。

3.Array对象

##JS中的数组均是Object，如var a1=[1,25,"男朋友",true];

数组的长度是可变的。

##JS中的数组可以像集合一样操作

var a2=new Array();

a2.push(8);

a2.push(false);

console.log(a2[2]);

##访问数组元素console.log（a1[0]）

##数组中元素倒转：a1.reverse();

##数组排序*重点*：a1.sort();默认按照字符串的Unicode编码排序,可以通过替换比较方法影响排序结果。(一般比较方法无需复用，采用匿名方法)

举例如下：

a1.sort(Function(a,b){

return a-b;

});

Console.log(a1);

4.Math对象

Math对象用于执行数学任务，无需创建，直接使用即可。如下所示：

console.log(Math.PI);console.log(Math.E);

console.log(Math.round(Math.PI));

PS：Math.round（）表示为取整。

5.Date对象

Date对象用于处理日期和时间，封装了系统时间毫秒数。

##创建Date对象(Date对象会自动把当前的日期和时间保存为初始值)

Datedate1=new Date();

Datedate2=new Date(“2015/1/1 1:12:11”);

##Date对象常用方法

读写时间毫秒数：date1.getTime()、date1.setTime(毫秒)

读写时间分量：

date1.getDate()、date1.getDay()、date1.getFullYear()等。

date1.setDate()、date1.setDay()、date1.setFullYear()等。

转化为字符串：

toString()、toLocaleTimeString()、toLocaleDateString()

6.RegExp对象

RegExp对象表示正则表达式,作用也就是用来检查字符串。

##创建RegExp对象

VarrgExp=new RegExp(“pattern”,[“flags”]);

VarrgExp=/pattern/flags;

PS:flags的标识有两种

（1） g:设定当前匹配为全局模式。

（2） i:忽略匹配中的大小写检测。

注意：全局模式（第N次调用则找出第N个匹配的部分），非全局模式（找出首次匹配的部分）。

##RegExp对象的常用方法

RegExpObject.test(string)*重点*

如果字符串string中含有与RegExpObject匹配的文本，则返回true,否则返回false.

reg.exec(str):检测字符串中指定的值，返回指定的值。

reg.test(str):检测字符串中指定的值，返回false或true.

##String对象与正则表达式（regexp代表正则表达式或字符串）

--x.replace(regexp,tostr),返回替换后的结果。

--x.match(regexp)，返回匹配字符串的数组。

--x.search(regexp)，返回匹配字符串的首字符位置索引。

7.Function对象

JS中的函数就是Function对象。

函数名就是指向Function对象的引用，使用函数名可以访问函数对象，函数名（）是调用函数。

##定义函数对象

函数的返回值默认为undefined,也可以使用return返回具体的值。

##函数的参数

JS的函数没有重载。

调用时只要函数名一样，无论传入多少个参数，调用的都是同一个函数。

没有接收到实参的参数值是undefined.

所有的参数传递给arguments数组对象。

##arguments对象*重点*..

Arguments是一种特殊的对象，在函数代码中，表示函数的参数数组。

在函数代码中，可以使用arguments访问所有参数。

arguments.length:函数的参数个数

arguments[i]:第i个参数

可以利用arguments实现可变参数的函数。

##eval函数*重点*

eval函数用于计算表达式字符串，或者用于执行字符串中的javascript代码。

只接受原始字符串作为参数。

如果函数中没有合法的表达式或语句，则抛出异常。

小案例

1.登录页面的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style>
.ok {
color:green;
border:1px solid green;
}
.error {
color:red;
border:1px solid red;
}

</style>
<script>
//校验账号的格式
function check_code() {
console.log(1);
//获取账号
var code=document.getElementById("code").value;
//校验其格式（\w 字母或数字或下划线）
var span=document.getElementById("code_msg");
var reg=/^\w{6,10}$/;
if(reg.test(code)){
//通过，增加OK样式
span.className="ok";
return true;
}else{
//不通过，增加error样式
span.className="error";
return false;
}
}
</script>
<script>
//校验密码
function check_pass() {
//获取密码
var pass=document.getElementById("pass").value;
//校验
var span=document.getElementById("pass_msg");
var reg=/^\w{8,20}$/;
if(reg.test(pass)){
//通过，增加OK样式
span.className="ok";
return true;
}else{
//没通过，增加error样式
span.className="error";
return false;
}
}
</script>
</head>
<body>

<form action="http://www.tmooc.cn" οnsubmit="return check_code()+check_pass()==2;">
<p>
账号：
<input type="text" id="code"
οnblur="check_code();"/>
<span id="code_msg">6-10位字母、数字、下划线</span>
</p>
<p>
密码：
<input type="password" id="pass"
οnblur="check_pass();"/>
<span id="pass_msg">8-20位字母、数字、下划线</span>
</p>
<p><input type="submit" value="登录"/></p>
</form>
</body>
</html>

补充：onsubmit，表单提交事件，是form的事件，当点击表单内的submit按钮时触发，在该事件内返回true,则提交成功，默认就是返回true,若返回false,则不提交。

网页效果显示：

2.计算器代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<script>
function cal() {
//获取文本框
var input=document.getElementById("num");
//获取span
var span=document.getElementById("jg");
//获取框内的算式
var ss=input.value;
try {
var result=eval(ss);
//计算成功，将结果写入文本框input
span.innerHTML=result;
}catch(e) {
//出错时给予提示
span.innerHTML="Error";
}
}
</script>
</head>
<body>
<input type="text" id="num"/>
<input type="button" value="=" οnclick="cal();"/>
<span id="jg"></span>
</body>
</html>

网页效果显示：

四、外部对象

浏览器提供的对象，浏览器的API，用来操作浏览器。

1.BOM(Browser Object Model)：

#浏览器对象模型，用来访问和操纵浏览器窗口，使JAVAScript有能力与浏览器“对话”。（浏览器与JS是两个不相关的内容，JS依附于浏览器上）

#通过使用BOM，可移动窗口、更改状态栏文本，执行其他不与页面内容发生直接联系的操作。

2.DOM（Document Object Model）:

#文档对象模型，用来操作文档。定义了访问和操作HTML文档的标准方法。

#应用程序通过对DOM树的操作，来实现对HTML文档数据的操作。

BOM与DOM关系如下图示：

PS:window代表浏览器，它的子对象（属性）代表浏览器的不同部位。

外部对象分为两个部分BOM与DOM，其中BOM包含DOM.

3.window对象（BOM）

window表示浏览器窗口，所有JAVAScript全局对象、函数以及变量均自动成为window对象的成员。

##常用属性：

#history:浏览过窗口的历史记录对象。

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

--back()

--forward()

--go(num):num可以取正数或者负数，正数表示前进，负数表示后退。

#location:窗口文件地址对象。

location对象常用于获取和改变当前浏览器的网址。

href:当前窗口正在浏览器的网页地址,也可以用于修改网址。

--reload():重新载入当前网址，就像按下刷新按钮。

PS：location与超链接都可以改变当前窗口，两者的区别是---location改变当前窗口时可以添加条件，比如可以在页面上显示“您确定要离开此页面吗？”，而超链接不能添加条件，不灵活，一般建议采用location。

显示小代码：

functiontarena() {

var b=confirm("您确定要离开此页面吗？");

if(b){

//确认为true时，跳转。

//location=地址栏

//修改href就是修改网址。

location.href="http://www.tmooc.cn";

}

#screen:当前屏幕对象。

screen对象包含有关客户端显示屏幕（比如说ipad、笔记本电脑、手机）的信息，常用于获取屏幕的分辨率和色彩，常用属性：

--width/height

--availWidth/availHeight

#navigator：浏览器相关信息。

常用于获取客户端浏览器和操作系统信息。

Navigator.userAgent;

##常用方法：

(1)alter(str),提示对话框，显示str字符串的内容。

(2)confirm()，确认对话框，显示str字符串的内容，按确定按钮返回true，其他操作返回false.

(3)定时器*重点*

多用于网页动态时钟、制作倒计时、跑马灯效果等。分为两种：

#周期性定时器：以一定的间隔执行代码，循环往复。

setInterval(exp,time)：周期性触发代码exp.返回已经启动的定时器对象。

exp为执行语句，time为时间周期，单位为毫秒。

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

tID：启动的定时器对象。

小案例：动态时钟代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态时钟</title>
<style>
#clock {
width:150px;
border:1px solid red;
line-height:30px;
height:30px;
font-size:20px;
text-align:center;
}
</style>
<script>
//id为空时表示未启动。
var id=null;
function ks(){
//若id非空，表示已启动，不要再次启动了
if(id){
return;
}
id=setInterval(function(){
var date=new Date();
var now=date.toLocaleTimeString();
var p=document.getElementById("clock");
p.innerHTML=now;
},1000);
}
function zt(){
clearInterval(id);
//将id重置为null,便于下次启动时做判断
id=null;
}

</script>
</head>
<body>
<p>
<input type="button" value="开始" οnclick="ks();">
<input type="button" value="暂停" οnclick="zt();">
</p>
<p id="clock"></p>
</body>
</html>

网页显示如下图：

#一次性定时器：在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

setTimeout(exp,time):一次性触发代码exp.返回已经启动的定时器。

exp为执行语句，time为时间间隔，单位为毫秒。

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

小案例：发送消息代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>发送消息</title>
<style>
#msg {
width:150px;
height:30px;
line-height:30px;
border:1px solid red;
font-size:20px;
text-align:center;
}
</style>
<script>
//默认id为null
var id=null;
function fs() {
var p=document.getElementById("msg");
p.innerHTML="正在发送...";
//启动定时器后id非空
id=setTimeout(function(){
p.innerHTML="发送成功";
//发送成功是id为null
id=null;
},3000);
}
function cx(){
//id非空时表示已启动定时器但未完成，只有此时才能停止定时器。
if(id){
var p=document.getElementById("msg");
p.innerHTML="已撤销";
clearTimeout(id);
}
}
</script>
</head>
<body>
<p>
<input type="button" value="发送" οnclick="fs();"/>
<input type="button" value="撤销" οnclick="cx();"/>
</p>
<p id="msg"></p>

</body>
</html>

网页显示如下图：

4.document对象

4.1 DOM(文档对象模型)

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

DOM节点树（DOM模型被构造为对象的树，这棵树的根就是document对象）

#DOM操作：查找节点、读取节点信息、修改节点信息、创建新节点、删除节点。

4.2 读取、修改

##读取节点的名称和类型

#nodeName:节点名称

--元素节点和属性节点：标签或属性名称。

--文本节点：永远是#text.

--文档节点：永远是#document

#nodeType:节点类型（返回数值）

元素节点返回1，属性节点返回2，文本节点返回3，注释节点返回8，文档节点返回9.

##读写节点的内容（<x>这就是内容</x>),双标签中间的文本。

#innerHTML：设置或获取位于对象起始和结束标签内的HTML（带标签）。

#innerText:设置或获取位于对象起始和结束标签内的文本（不带标签）。

##读写节点的属性

#通用API,任何版本浏览器都支持

getAttribute()方法：根据属性名称获取属性的值。

setAttribute(),removeAttribute().

#新的API，低版本的浏览器不支持（只要增和改）

节点.属性名（class例外，需要写className）

小案例：图片轮播代码演示如下

PS：凡是在funciton外的方法，读取时均是按照顺序读取。

4.3查询

##通过id查询（标准）

document.getElementById()，通过制定的ID来返回元素节点，忽略文档的结构，如果ID错误，则返回null。

##根据标签名查询（标准）

#在整个页面上根据标签名查询节点。

document.getElementsByTagName(“li”),

#在某节点下根据标签名查询其子节点。

ul. getElementsByTagName(“li”),

PS:”li”为要查询的子节点。

##根据name查询（标准）

document.getElementsByName().

##根据class查询某节点（非标准）

getElementsByClassName(),

##根据层次（关系）查询

#查询父亲（标准）

parentNode

#查询孩子（标准）

childNodes.

getElementsByTagName(“li”)，建议使用此根据标签名查询孩子的方法。

#查询孩子（非标准）

children.

#查询兄弟（标准）

//某节点.父亲.孩子[n]

jd.parentNode. getElementsByTagName(“li”)[1];

#查询兄弟（非标准）

jd.previousElementSibling;

jd.nextElementSibling;

4.4增删节点

##创建节点

document.createElement(“li”);

li为要创建的元素标签名称，返回新创建的节点。

##增加节点

#追加到所有子节点之后

parentNode.appendChild(newNode);新节点作为父节点的最后一个子节点添加。

#插入到某子节点之前

parentNode.insertBefore(newNode,refNode);refNode为参考节点，新节点位于此节点之前添加。

##删除节点

#父亲删孩子

node.removeChild(childNode);node为childNode的父节点。

#自己删自己（非标准）

（1）sz.parentNode.removeChild("sz");

（2）var tj=document.getElementById("tj");

tj.remove();

小案例：联动菜单代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>联动菜单</title>
</head>
<body>
省：
<select id="province" οnchange="chg();">
<option value="-1">请选择</option>
<option value="0">河北省</option>
<option value="1">山东省</option>
<option value="2">山西省</option>
</select>
市：
<select id="city">
<option>请选择</option>
</select>

<script>
//模拟加载城市
function loadCities() {
return [
["石家庄","廊坊","保定"],
["济南","青岛","德州"],
["太原","大同","阳泉"]
];
}
var cities=loadCities();

function chg() {
//获取省份的下拉选
var sel1=document.getElementById("province");
//获取省份的序号
var pindex=sel1.value;
//获取该省份对应的城市
var pcities=cities[pindex];
//先删除城市下拉选内所有的城市
var sel2=document.getElementById("city");
//
//sel2.innerHTML="<option>请选择</option>";
var options=sel2.getElementsByTagName("option");
for(var i=options.length-1;i;i--){
sel2.removeChild(options[i]);
}
//再增加该省份的城市。
if(pcities){
for(var i=0;i<pcities.length;i++){
var opn=document.createElement("option");
opn.innerHTML=pcities[i];
sel2.appendChild(opn);
}
}
}
</script>
</body>
</html>

网页显示效果如下：

五、自定义对象

自定义对象是一种特殊的数据类型，由属性和方法封装而成。

---属性指与对象有关的值:对象名.属性名。

---方法指对象可以执行的行为或者可以完成的功能：对象名.方法名（）

1.创建自定义对象

（1）采用直接量（JSON"JavaScript Object Notation"是一种轻量级的数据交换格式）的方式创建自定义对象

名称需要使用“”引起来，多对定义之间使用，隔开，名称可以是属性。

function f1() {
var stu= {"name":"zs","age":25,"work":function(){alert("我学Java")}};
alert(stu.name);
alert(stu.age);
//work的function方法无返回值，则不需要加alert。
stu.work();
}

（2）采用构造器创建对象

##采用自定义构造器创建对象（自定义了一个构造器Coder，然后每次写时都可以调用Coder构造器）

六、事件

1.事件概述

事件：指页面元素状态改变，用户在操作鼠标或者键盘时触发的动作。分为鼠标事件、键盘事件、状态改变事件。

event对象：事件触发后将会产生一个event对象。

事件属性：通过一个事件属性，可以在某个事件发生时对某个元素进行某种操作。

2.事件定义

（1）直接定义事件：在html属性定义中直接处理事件。

（2）后绑定事件//：在页面加载后执行，写在<body>的整个页面后。（过度的，仅需要了解）

（3）后绑定事件（onload）:onload是网页加载事件，在网页加载后自动触发。

为了便于格式的完美性，该段代码,放在<head>中的<script>标签中。

window.οnlοad=function() {
//在这里写的代码相当于在body后一样
var c=document.getElementById("c");
c.οnclick=function() {
alert("小姑娘");
}

}

（4）取消事件

e.stopPropagation()
e.cancelBubbule=true;
e={"stopPropagation":function(){}}
e.stopPropagation()/e.stopPropagation
对象的方法可以看做方法的属性
if(e.stopPropagation){
//如果写成e.stopPropagation(),则没有的话会报错，不带括号的属性没有的话不会报错。
e.stopPropagation();
}else{
e.cancelBubble=true;
}
}
3.event对象

##任何事件出发后都将产生一个event对象，event对象记录事件发生时的鼠标位置、键盘按键状态、触发对象等信息。

##获得event对象，使用event对象获得相关信息，如单击位置、触发对象等。

##常用属性：clientX,clientY,cancleBubble

##获取event对象，

在事件定义时，使用event关键字将事件对象作为参数传入方法。

window.οnlοad=function() {
var ee=document.getElementById("e");
ee.οnclick=function(e) {
//后绑定事件时，浏览器会自动传入event，
//且该对象存在arguments第0个位置。
console.log(arguments[0]);
console.log(e);
}
}

function d(e) {
console.log(e);
alert(e.clientX+","+e.clientY);
}

4.事件处理机制

（1）JS事件处理机制是：冒泡机制（JS的事件是由内向外触发的，触发到最外层为止）

（2）作用：不需要再子元素上定义N次事件，只需要在父元素上定义一次事件。

PS：在采用冒泡机制简化事件时，必须知道事件源（事件发生的源头“具体位置”），事件源可以通过事件对象获取。

案例：计算器代码如下

<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<meta charset="utf-8" />
<style type="text/css">
.panel {
border: 4px solid #ddd;
width: 192px;
margin: 100px auto;
/*border-radius: 6px;*/
}
.panel p, .panel input {
font-family: "微软雅黑";
font-size: 20px;
margin: 4px;
float: left;
/*border-radius: 4px;*/
}
.panel p {
width: 122px;
height: 26px;
border: 1px solid #ddd;
padding: 6px;
overflow: hidden;
}
.panel input {
width: 40px;
height: 40px;
border:1px solid #ddd;
}
</style>
<script>
window.οnlοad=function() {
var div=document.getElementById("panel");
div.οnclick=function(e) {
//console.log(e.srcElement||e.target);
cal(e);
}
}

function cal(e) {
//获取事件源
var obj=e.srcElement||e.target;
//只处理按钮（INPUT）
if(obj.nodeName!="INPUT"){
return;
}
//判断按钮类型
var p=document.getElementById("screen");
if(obj.value=="C") {
//清空
p.innerHTML="";
}else if(obj.value=="="){
//计算
try {
var result=eval(p.innerHTML);
p.innerHTML=result;
}catch(ex){
p.innerHTML="Error";
}
}else {
//累加旧的值新的值
p.innerHTML=p.innerHTML+obj.value;
}
}
</script>
</head>
<body>
<div class="panel" id="panel">
<div>
<p id="screen"></p>
<input type="button" value="C">
<div style="clear:both"></div>
</div>
<div >
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="/">

<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="*">

<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="-">

<input type="button" value="0">
<input type="button" value=".">
<input type="button" value="=">
<input type="button" value="+">

<div style="clear:both"></div>
</div>
</div>
</body>
</html>

页面显示效果：

_smile_yy

关注

5
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
javaScript中的对象、BOM、DOM知识点总结

一、什么是javaScript对象？对象是javaScript中最重要的API。 javaScript包含多种对象有：内置对象、外部对象（window对象、dom对象）、自定义对象。二、如何使用对象？对象包含属性和方法。访问对象属性：对象.属性访问对象方法：对象.方法（）三、常用内
复制链接

扫一扫