1 ，Javascript 简介
诞生于1995年，在前台页面做表单验证诞生了js
1995年2月 计划在Netscape Navigator2开发名为LiveSript的脚本语言，
1997年，JavaScript1.1 为蓝本的建议被提交给了ECMA（European Computer ManufacturersAssociation欧洲计算机制造商协会）。
2.页面开发使用前端技术
html+css+javascript
这个是前端开发中最基本也是最必须的三个技能。
前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位和效果渲染，再通过JavaScript实现元素相应的动态变化效果.(DHTML)
3.富客户端概念:不仅仅会切图做页面，还会用js这样的脚步语言去丰富它的功能，让html效果动起来，产生一些动态效果。这个就是富前段.
胖客户端
3.1 网络应用程序经历了从胖客户端到瘦客户端的发展历程,胖客户端是相对于传统的C/S结构的网络应用程序来说的,
而瘦客户端一般都是相对于B/S结构的Web应用来说的
3.2 富客户端（Rich Client)简介富因特网应用程序（Rich Internet Applications，RIA）利用具有很强交互性的富客户端技术来为用户提供一个更高和更全方位的网络体验。富客户端结合了桌面应用程序和b/s的一些优点，但本质还是b/s应用。
3.3 富客户端技术充分利用本地机器的处理能力来处理数据，而不需要把某些数据发送到服务器处理，充分利用了本地机器的资源。
3.4 ajax jquery 等都属于构建富客户端的技术
3.5 javascript也是构建富客户端要是使用一个最基本的技术,以及之后要学习的Jquery.
4.javascript 和 java
4.1 javascript与Java是由不同的公司开发的不同产品：
javascript是Netscape公司的产品，其目的是为了扩展Netscape Navigator(网景导航者浏览器)功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言.
而Java是SUN Microsystems公司推出的新一代面向对象的程序设语言，常用于后台代码的开发.
4.2 于1995年由Netscape公司的Brendan Eich首次设计实现而成 。由于Netscape公司与Sun公司合作，Netscape高层希望它看上去能够像Java，因此取名为JavaScript
4.3 所以说javascript和java是俩种完全不同的开发语言(但是其实我们在使用的时候还是能感觉到两者的语法很相似)
6.完整的JavaScript包含的三个部分
js = ECMAScript + dom + bom
语法 文档操作 浏览器对象
6.1 ECMAScript规范，描述了该语言的语法和基本对象的定义;
1，语法
2，类型
3，语句
4，关键字
5，保留字
6，操作符
7，对象 Object
6.2 文档对象模型(DOM)，描述处理网页内容的方法
DOM(Document,Object Model) 是针对XML但经过扩展用于HTML的应用程序编程接口。DOM将整个页面映射成一个多节点结构。
html代码：
<html>
<head>
<title>hello</title>
</head>
<body>
<p>niha</p>
</body>
</html>
dom模型
html
/ \
head body
| |
title p
| |
‘hello‘ ‘你好‘
6.3 浏览器对象模型(BOM)
BOM(Browser Object Model),开发人员可以使用BOM控制浏览器显示的页面以外的部分。
弹出新浏览器窗口；移动，缩放，关闭浏览器的功能；提供浏览器详细信息的navigator对象;
提供浏览器所加载页面的详细信息的location对象；提供用户显示器分辨率详细信息的screen对象；
对cookies的支持；
支持XMLHttpRequest,
IE中的ActiveXObject自定义对象
注:JavaScript的三个组成部分，在当前五个主要浏览器（IE,Firefox,Chrom,Safari,Opera）中得到了不同程度支持，
其中，所有浏览器对ECMAScript3支持大体都还不错，对ECMAScript支持程度越来越高，
但对DOM的支持彼此相差较多，对已经正式纳入HTML5标准的BOM来说，
尽管各浏览器都实现了某些总所周知的共同特性，但其他特性还因浏览器而异。
7.javascript语言的特点
7.1 解释执行的脚本语言
它的基本结构形式与c、c++、java十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它是需要嵌入到html页面中,让浏览器来解释执行的。
7.2 基于对象的语言
javascript是一种基于对象的语言，同时也可以看作一种面向对象的。这意味着它能运用自己已经创建的对象.
new Date();
new Object();
7.3 简单性 :
它是一种基于java基本语法语句和
控制流之上的简单而紧凑的设计，
基本java中的语法都可以使用.
7.4 弱语言
弱类型语言
javascript的语法松散要求不严谨,比如:一个变量在之前没有声明的情况下就可以直接使用,声明变量的时候也可以不声明变量的类型等.
7.5 事件驱动
我们在页面上的操作,例如 左键/右键的单击、双击,键盘上面的按键的监听，鼠标的移动 鼠标拖拽 鼠标滚轴的滚动等等事件的响应处理都可以交给javascript
7.6 动态性 :
javascript可以直接对用户或客户输入做出响应，无须经过web服务程序.
7.7 安全性
javascript不允许访问本地的硬盘
，并不能将数据存入到服务器上，
不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。
7.8 跨平台性
javascript是依赖于浏览器本身，
与操作环境无关，只要能运行浏览器的计算机，并支持javascript的浏览器就可正确执行,但是不同浏览器以及同一浏览器的不同版本对javascript的支持是不同的(浏览器的兼容性)
9.在HTML中使用JavaScript
1)通过<script>元素，有如下几个属性
type : 表示编写代码使用的脚本语言的内容类型，MIME这个属性非必须，默认是text/javascript
src : 表示包含要执行代码的外部文件
async ：立刻下载脚本，但应妨碍页面中其他操作（只针对外部脚本文件）
charset : 指定src属性指定的代码的字符集，大多数浏览器会忽略这个值。
defer : 表示脚本可以延迟到文档全部被解析和显示之后再执行（只针对外部脚本文件）
language: 已废弃
2)两种方式：
1. 直接嵌入在页面中
<script type="text/javascript">
//javascript代码
function(){
}
</script>
2. 包含外部的js文件
<script type="text/javascript" src="test.js"></script>
(后标签不要省略，不符合html规范)
【注意事项】
1.不要在<script>标签中再填写其他js代码，否则将会忽略
2.src 可以跨域访问 。例如：http://cdn.code.baidu.com/ 百度静态资源公共库
"use strict";
10.javascript中的注释
10.1 单行注释
//注释
10.2 多行注释
/*
多行注释
多行注释
*/
11.javasrcipt中的标示符(变量名):
大小写敏感
不能以数字开头,以字母，下划线，$开头都行
一句代码由分号标示结尾，但是也可以不写。
可以由字母、数字、下划线、$符号组成
不能是javascript中的关键字
关键字:(在js中有特殊功能)
break do instanceof typeof
case else new, var
catch finally return, void
continue for switch, while
debugger this function with
default if throw delete
in try
保留字：(将来可能成为关键字)
abstract enum int short
boolean export interface static
byte extends long super
char final native synchronized
class float package throws
const goto private transient
debugger double implements protected
volatile import public
注意：javaScript中代码可以不以；结尾 但是最好加上
12.javascript中声明变量:
ECMAScript的变量是弱类型（松散类型），可以用来保存任何类型的数据。定义变量时使用var操作符
var 变量名;//不可配置全局属性
任何类型的变量都可以用var关键字来声明.
var a;
var a = "";
var b = 10;
var c = 10.9;
var d = new Date();
var e = true;
全局变量
<script>内部定义
a = 10;不适用var关键字声明变量//可配置全局属性
局部变量与全局变量：
1) 使用var操作符定义的变量将成为定义该变量的作用域中的局部变量。
function test(){
var message = "hello";
}
test();
alert(message); //错误
2) 如果在函数中定义变量没有加var，该变量为全局变量
function test(){
message = "hello";
}
test();
alert(message); //可以访问
1)ECMAScript不支持自定义类型，只有6中数据类型：
非常5+1(五种基本数据类型加上引用数据类型(Object)
5种基本数据类型（简单数据类型）undefined null boolean String number
Undefined 未定义 "undefined"
var a ;
var a = "undefined";
可以设置为 undefined 来清空对象:
Null 空引用 数据类型 "null"
var a = null;
Boolean 布尔类型 true/false
var a = false;
Number 数字类型
String 字符串类型 "" ‘‘
var a ="hello";
var a =‘hello‘;
该类型表示由零个或者多个16位Unicode字符组成的字符序列，即字符串。
字符串可以由双引号或者单引号表示
1)字符字面量
\n 换行
\t 制表
\b 退格
\r 回车
\\ 斜杠
\‘ 单引号
\" 双引号
2)字符长度
通过length属性获取字符长度
1种引用数据类型（复杂数据类型）
Object(本质由一组无序的键值对组成)
var person= new Object();
person.name = "terry";
person.age = 12;
var name = person.name;
var name = person["name"];
var arr = new Array();
arr[3] = 123;
js中数组 长度创建以后是可以改变的
2) typeof 操作符
返回该变量名所指向数据的类型
语法：
typeof 变量名
typeof(变量名)
可有取值如下
"undefined" <-------typeof 未定义
"boolean" <-------typeof 布尔类型
"string" <-------typeof 字符串
"number" <-------typeof 数值
"object" <-------typeof 对象或者null
"function" <-------typeof 函数
13.javascript中的null和undefined
Null : 空引用数据
var a = null;
undefined : 没有定义的数据
var a ;
//比较值
console.log(null == undefined); true
//恒等于
console.log(null === undefined);false
非数值 NaN (not a number)
该数值表示一个本来要返回数值的操作数未返回数值的情况。
var a = 10/‘a‘;
console.log(a); //NaN
任何涉及到NaN的操作都会返回NaN; NaN与任何值都不相等，包括NaN本身。
isNaN()，判断参数是否“不是数值”，当参数para不是数值的时候返回true
isNaN(NaN); true
isNaN("blue"); true 无法转换为数值
isNaN(10); false 10
isNaN("10"); false 10
isNaN(true); false
注意:
NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined
如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是 返回 object。
14.javascript中的三种弹框:
alert("数据")
confirm("提示信息","默认值")
prompt
alert弹出一个警告框/提示框,用户点击确定按钮之后就可以继续访问。
confirm弹出一个确认框,用户可以点击确定或者取消,这个confirm方法会相应的返回true或者false.
prompt弹出一个可以让用户输入的框口,用户输入后点击确定,这个方法会把用户输入的内容返回.
15.javascript中的输出: 页面: 控制台
写到html页面：document.write(....);
写到控制台:console.log(name);
另外:console.info(...);
F12呼出控制台
19.javascript中的运算符
19.1 算术运算符
+ 加法
- 减法
* 乘法
/ 除法
% 取模
++ 自增
-- 自减
19.2 赋值运算符
给定 x=10 和 y=5
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
19.3 字符串的 + 运算符
连接多个字符串:
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
19.4字符串和数字进行加法运算
例如:
x=5+5;
y="5"+5;
z="Hello"+5;
a = +"6";
x,y, 和 z 输出结果为:
10 数字类型
55 字符串类型
Hello5 字符串类型
a 为 6
20.javascript中的比较
20.1 比较运算符
对于给的变量x=5:
== 等于
x==8 false
x==5 true
x=="5" true
=== 绝对等于/恒等于 (值和类型均相等)
x==="5" false
x===5 true
!= 不等于
x!=8 true
!== 绝对不等于 (值和类型均不相等)
x!=="5" true
x!==5 false
20.2 逻辑运算符
对于给的变量 x=6 以及 y=3:
&& and (x < 10 && y > 1) 为 true
|| or (x==5 || y==5) 为 false
! not !(x==y) 为 true
注意:& |运算结果是0或者1
!"abc";--> !Boolean("abc");
20.3 条件运算符
java中的三目运算符:
age = 18;
var msg =(age<18)?"年龄太小":"年龄已达到";
条件 ? 成功返回 : 失败返回
21.条件语句
21.1 if语句
if (condition){
// 当条件为 true 时执行的代码
}
if(10){ //new Boolean(10)
}
20.2 switch语句
例如:
var day=new Date().getDay();
var x = "";
switch (day){
case 0:
x="Today it‘s Sunday";
break;
case 1:
x="Today it‘s Monday";
break;
default:
x="error!!!";
}
21.循环
21.1 for循环
for (var i=0; i<5; i++){
document.write("hello world");
}
-----------------------------
for (i=0; i<5; i++){
document.write("hello world");
}
注意:千万不要写成了for(int i=0;...)
21.2 for-in循环
var person={fname:"John",lname:"Doe",age:25};
for (x in person){
alert(x+":"+person[x]);
}
-------------------------------------
var arr = [1,3,4,5];
for(x in arr){
alert(x+" : "+arr[x]);
}
不会遍历空项
21.3 while循环 do-while循环
var i=0;
while (i<5){
document.write("hello world");
i++;
}
------------------------------
var i=0;
do{
document.write("hello world");
i++;
}while(i<6);
//1
for(var a = 1 ; a<10;a++){
if(a==3){
//break;
continue;
}
}
22. javascript中break 、continue 、标签
用法和java中的一样.
break可以跳出当前标记代码块:
test1:{
test2{
document.write("hello world");
document.write("hello world");
document.write("hello world");
break test1;
}
document.write("hello world");
document.write("hello world");
document.write("hello world");
}
23.javascript中的错误error
23.1 try-catch
try{
alert1("test");
alert("hello");
}
catch(err){
alert(err);
}
注意:如果是语法错误SyntaxError,catch就捕获不到
23.2 throw
try{
var x = 3;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err){
alert(err);
}
24.void关键字
javascript:void(0) 是我们经常在超链接中用到的代码.
href="#"与href="javascript:void(0)"的区别:
# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
26,常用方法 :
26.1: String :
1,s.length:获得字符串的长度:
eg: document.write(s.length+"<br>");
2,s.substr(3,4):从下标为3的位置开始,截取4个字符,包括下标为3的位置的字符
eg:document.write(s.substr(3,4)+"<br>");
3,s.substring(6,8):从下标为6的位置开始截取,截取到下标为8的位置,但是不包括下标为8的字符[6,8)
eg:document.write(s.substring(6,8)+"<br>");
4,s.trim():去掉字符串俩边的空格,但是这个方法有可能浏览器不支持.
eg:document.write(s.trim().length+"<br>");
5,s.toUpperCase():字符串转换为大写
eg:document.write(s.toUpperCase()+"<br>");
6,s.toLowerCase():字符串转换为小写
eg:document.write(s.toLowerCase()+"<br>");
7,s.split(""):分割字符串 返回一个字符串数组
document.write(s.split(" ")+"<br>");
document.write(s.split(" ").length+"<br>");
document.write(s.split(" ")[0]+"<br>");
document.write(s.split(" ")[1]+"<br>");
8,charAt(n) 获得某个下标的字符
document.write(s.charAt(1)+"<br>");
注意:javascript中的转义符和java的一样也是\
26.2:Number
js支持最小值 ：Number.MIN_VALUE
js支持最大值 ：Number.MAX_VALUE
1,Number("123");
2,parseInt("123");
3,n.toString(2); 把n以2进账输出
26.3:Boolean 非0即真 非空即真
Boolean(0);
Boolean("1");
Boolean("abc");
Boolean(null);
26.4:数组
声明: 使用
js数组 : 长度 可以改变
可以存放任意数据类型的数据
创建的时候可以指定长度 可以不指定
var arr = new Array(10);
var arr = new Array();
var arr = [];
var arr = [1,2,3,true,false,new Date(),new Object(),null];
赋值 :
arr[i] = 值
注： arr[10] = true;
前面9个位置没有给数据 会默认给undefiend
1.栈 LIFO (Last-In-First-Out)
push() 可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度
pop() 从数组的末尾移除最后一项，减少数组的length值，返回移除的项
2.队列 FIFO (First-In-First-Out)
shift() 移除数组中的第一个项并且返回该项，同时将数组的长度减一。
unshift() 在数组的前端添加任意个项，并返回新数组的长度。
排序
reverse() 反转数组项的顺序
sort() 排序
7) 操作方法
concat():先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，返回副本
var arr = ["11","22","33","44"];
var arrcopy = ["11","22","33","44"];
var arr_new = arr.concat("55","66");
// arr_new = ["11","22","33","44", 55","66"]// arr不改变
slice():可接受一个或者两个参数（返回项的起始位置，结束位置）
当接受一个参数，从该参数指定的位置开始，到当前数组末尾的所有项
当接受两个参数，起始到结束之间的项，但是不包含结束位置的项 类似substring
splice(参数一,参数二,[参数三]):先把参数一到参数二之间的数除去再返回，然后把参数三的数据放到参数一的位置.
参数一：返回数组的起始位置+参数三的放置的位置 包含
参数二：返回数组的结束位置 包含
参数三：放在参数一位置的数据可以多个中间用逗号隔开。
例如：
var arr = ["11","22","33","44"];
1.删除
var del_arr = arr.splice(1,2);
// arr = ["11","44"]; 在原数组进行了删除操作
// del_arr = ["22","33"];返回删除的元素数组
2.插入
var del_arr = arr.splice(1,0,"55","66");
// arr = ["11", "55","66", "22", "33","44"] 将指定项插入到1位置处
//del_arr = [], 返回空数组
3.替换
var del_arr = arr.splice(1,2,"55","66");
// arr = ["11", "55", "66", "44"] 将"22","33" 替换成了"55","66"
//del_arr = ["22", "33"], 返回删除的元素数组
indexOf([参数]) 从数组开头向后查找，使用全等操作符，找不到该元素返回-1
参数：查找的元素
var arr = ["22","11","33","44","11"];
arr.indexOf(11); //返回-1，因为使用"==="进行匹配
arr.indexOf("11"); //返回1，从前往后匹配，返回第一个匹配元素的位置
lastIndexOf()(要查找的项，开始查找的位置(可选)) 从数组末尾向前查找，使用全等操作符，找不到该元素返回-1
var arr = ["22","11","33","44","11"];
arr.lastIndexOf("11"); //返回1，从后往前匹配，返回第一个匹配元素的位置
8) 迭代方法：
基础遍历数组：
for()
for( in )
for(var i = 0;i<arr.length;i++){
console.log(arr[i])
}
//跳过空项
for(i in arr){
console.log(arr[i]);
}
every();对数组中的每一运行给定的函数，
如果该函数对每一项都返回true,
则返回true
var arr = [11,5,23,7,4,1,9,1];
var result = arr.every(function(item,index,arr){
//item数组中的每个项
//index数组角标 从0开始
//arr数组
return item > 2;
});
console.log(result); //false
some(); 对数组中的每一运行给定的函数，如果该函数对有一项返回true,则返回true
var result = arr.some(function(item,index,arr){
return item >2;
});
console.log(result); //true
filter();返回一个符合func条件的元素数组
var arr = [11,5,23,7,4,1,9,1];
var result = arr.filter(function(item,index,arr){
return item >2;
});
console.log(result); // [11, 5, 23, 7, 4, 9]
map();对数组中的每一运行给定的函数,返回每次函数调用的结果组成的数组
var result = arr.map(function(item,index,arr){
return item * 2;
});
console.log(result); // [22, 10, 46, 14, 8, 2, 18, 2]
forEach():没有返回值，只是针对每个元素调用func,常用来遍历元素
var result = arr.forEach(function(item,index,arr){
console.log(item);
});
26.5 : Date 日期
//获得当前年份-1900
document.write(date.getYear()+"<br>");
//获得当前年份
document.write(date.getFullYear()+"<br>");
//获得当前月份-1
document.write(date.getMonth()+"<br>");
//获得当前是一个月中的哪一号
document.write(date.getDate()+"<br>");
//获得星期几
document.write(date.getDay()+"<br>");
//获得时间中的 时 (24)
document.write(date.getHours()+"<br>");
//获得时间中的 分
document.write(date.getMinutes()+"<br>");
//获得时间中的 秒
document.write(date.getSeconds()+"<br>");
//获得时间中的 毫秒
document.write(date.getMilliseconds()+"<br>");
26.6 : Math
document.write("<h1>Math对象</h1>");
//获得常量π
document.write(Math.PI+"<br>");
//获得常量e
document.write(Math.E+"<br>");
//获得一个随机数 [0,1)
document.write(Math.random()+"<br>");
//获得一个随机数 [23,36]
document.write(parseInt(Math.random()*14+23)+"<br>");
//获得一个较小的数字
document.write(Math.min(4,10,15,3)+"<br>");
//获得一个较大的数字
document.write(Math.max(4,10)+"<br>");
16.7 对象 Object
javascript中{}可以代表对象
16.7.1 : var obj = new Object();
javascript已经存在的类型的对象
var v = new Date();
var obj1 = new Object(), obj2 = {};//Object 对象
var arr1 = new Array(), arr2 = [];//Array 对象
var boo1 = new Boolean(true), boo2 = true;//Boolean 对象
var num1 = new Number(123), num2 = 123.45;//Number 对象
var str1 = new String("abc"), str2 = ‘abc‘;//String 对象
16.7.2 自定义的对象1:
var person={firstname:"John", lastname:"Doe", id:5566};
alert(person.firstname);
alert(person.lastname);
alert(person.id);
16.7.5 方法介绍：
constructor: 保存用户创建当前对象的函数
hasOwnProperty(propertyName); 用于检查给定的属性是否在当前对象实例中
isPrototypeOf(object); 用于检查传入的对象是否是原型
propertyIsEnumerable(propertyName); 用于检查给定的属性在当前对象实例中是否存在
toLocaleString(); 返回对象的字符串表示，该字符串与执行环境的地区对应
toString(); 返回对象的字符串表示
valueOf(); 返回对象的字符串，数值，布尔值的表示。
16.7.6 访问对象属性:
1.点表示法，右侧必须是以属性名称命名的简单标识符
person.name
2.中括号表示法，中括号中必须是一个计算结果为字符串的表达式，
可以通过变量访问属性，如果属性名中包含语法错误的字符，
或者属性名使用的是关键字或保留字，可以使用中括号
person["first name"]
16.7.7 删除属性
delete只是断开了属性和宿主对象的联系，而不会操作属性中的属性，并且delete只会删除自有属性，不能删除继承属性。在销毁对象时，为了防止内存泄露，遍历对象中的属性，依次删除所有属性。
语法：delete 对象.属性
例如：
delete stu.name //删除学生对象中的name属性
补充:
将对象序列化为Json字符串,只能序列化对象可枚举的自有属性。
JSON.stringify(obj)
将json的字符串序列化为对象
JSON.parse(jsonStr)
javascript中的函数:
1,解析器在向执行环境中加载数据时，会率先读取函数声明，并使其在执行任何代码之前可用；当执行器执行到函数表达式的代码的时候才会真正的解释执行
2,arguments:函数内部用来接收函数参数的类数组对象
3,js中没有重载的概念
4 形式
//无参的
function test1(){}
//有参的
function test2(name){}
//多个参数的
function test3(v1,v2){
alert(v1+v2);
}
//有返回值的
function test4(v1,v2){
return v1+v2;
}
//匿名函数
function(){
//....
}
5 调用
在<script>标签中调用定义的函数
例如:可以先调用后定义
<script type="text/javascript">
test();
function test(){
alert("hello world");
}
test();
</script>
在html元素的事件属性中调用定义过的函数
例如:可以先调用后定义
<script type="text/javascript">
function test(){
alert("hello world");
}
</script>
<input type="button" value="点击" onclick="test()" />
6,函数内部属性
arguments:是类数组对象,传入函数中参数数组
this: 指向的是函数赖以执行的环境对象
7,函数的属性:
length: 表示函数希望接受的命名参数的个数
DOM :
27.1 查找 HTML 元素
通过 id 找到 HTML 元素
document.getElementById("...");
返回某一个元素对象,默认id是唯一的
通过name找到 HTML 元素
document.getElementsByName("...");
返回一个集合
通过标签名找到 HTML 元素
document.getElementsByTagName("...");
返回一个集合
通过class找到 HTML 元素
document.getElementsByClassName("...");
返回一个集合
27.2: 改变标签中的文本域 innerHTML
document.getElementById("...").innerHTML=‘新的文本域‘;
27.3: 改变标签元素的属性
document.getElementById("image").src="2.jpg";
27.4: 改变标签的value属性 .value
document.getElementById("image").value="新value";
27.4: 改变标签的样式 .style.color
document.getElementById("p1").style.color="blue";
27.5: 给元素添加事件(覆盖以前的事件)
document.getElementById("id").onclick=function(){
//js代码
};
27.6: 给元素添加事件监听(不覆盖之前的事件)
document.getElementById("myBtn").addEventListener("click",function(){
//js代码
});
27.7: 添加子节点
父节点.appendChild(子节点);
27.8: 删除子节点
父节点.removeChild(child);
27.9: 替换子节点
父节点.replaceChild(new,old);
27.10 js中dom操作:
nodeType : 表示节点类型
Element 1;
TextNode 3;
Comment 8;
Document 9;
nodeName : 该属性取决于节点类型，如果是元素类型，值为元素的标签名
nodeValue :该属性取决于节点类型，如果是元素类型，值有null
* childNodes:属性，保存一个NodeList对象，NodeList是一种类数组对象用来保存一组有序的节点，
NodeList是基于DOM结构动态执行查询的结果，DOM结构变化可以自动反应到NodeList对象中。
访问时可以通过中括号访问，也可以通过item()方法访问。可以使用slice方法将NodeList转换为数组
parentNode : 指向文档树中的父节点。包含在childNodes列表中所有的节点都具有相同的父节点，每个节点之间都是同胞/兄弟节点。
previousSibling:兄弟节点中的前一个节点
* nextSibling : 兄弟节点中的下一个节点
* firstChild : childNodes列表中的第一个节点
lastChild : childNodes列表中的最后一个节点
ownerDocument : 指向表示整个文档的文档节点。任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。
* hasChildNodes():在包含一个或多个子节点的情况下返回true
27.11 : Document类型
javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。HTMLDocument继承自Document
1. 文档子节点
images 获取所有的img对象，返回HTMLCollection类数组对象
document.images.id
document.images.name
forms 获取所有的form对象，返回HTMLCollection类数组对象
document.forms
links 获取文档中所有带href属性的<a>元素
原文：https://www.cnblogs.com/nyhhd/p/12524863.html