JS 基础
2016-07-24 10:57
316 查看
Jscript 基于对象的语言(主要是使用现成的对象）
java 面向对象的语言（主要是创建对象）
Jscript
1，在网页内定义。位置是在< script>标签内，< script>标签一般定义在< title>标签之后，< head>标签之内。
2，Jscript语句定义在网页外部，在< script>标签内，添加src 属性指向外部的js文件。
注意：在使用了外部定义jscript的网页内，不能再使用第一种方式定义js了。
实例：
js的分类：
JS分为 ECMA，BOM，DOM三大体系。同时还有一种分类分为本地对象native object 和 主机对象 host object（如上的BOM，和 DOM 就属于此分类。） ，本地对象还可以继续分为 内建对象 build in object 。
js基本语法
js中的数据类型：
1，原始数据类型
2，对象数据类型（引用数据类型）<数组，函数>
1原始数据类型：
1，String 类型
2，number（包括整型和浮点型）
3，boolean
4，null （null ），对象类型的占位符。
5，undefined （undefined 未定义类型）只定义了变量，而该变量没有被赋值，系统为其赋值为undefined。
typeof 运算符 判断当前数值是哪一种数据类型
null类型运算结果返回Object。
JS 中 一律使用 var 关键字来申明数据类型，而不指定变量的类型，因为变量的类型随着赋值语句的变化而变化。
建议使用匈牙利标记命名法
一元加减法：
用途：用来类型转换
一元加法本质上对数字无任何影响：
字符串转换成数字。
var a = “abc”;
a = +a;
此时a 被赋值为 NaN ,NaN属于Number类型的特殊值，当遇到字符串转换成数字无效的时候便会得到此值。
NaN的特性，NaN不等于任何值包括NaN自己。只有在！=运算符的时候才返回true。判断一个值是否是NaN可以使用isNaN()函数来调用。
Boolean类型：
数值类型向Boolean 转换 :除了0和NaN转换为false 以外，其余都转换为true。
String向 Boolean 转换：除了空字符（”“）转换为false之外，其余都转换为true。
null类型向Boolean转换：false；
Undefined 向Boolean转换 :false；
Object 类型向 Boolean类型转换 :所有非空对象都转换为true。
比较运算符两侧若 一个是数字类型一个是其他类型，会将其他类型转换成数字类型。
两个字符串在比较时，比较字符串最高位的asc码。如果最高位相等，继续比较次位，没有次位则为0.
=== （全等号）判断两个变量包括数值和类型在内是否相等。
js中的复合运算符 += ， -= ，*= ，/= 和java一样
js中也有三元运算符，
variable = boolean_expression ? true_value : false_value;
js是基于对象的语言，所有类的基类 Object。
常用的方法toString() 返回对象的字符串表示。
方法的定义 function fun_name (…,…) {……}
在js中没有单独的方法，以上定义的方法是Function 的对象。
只不过该对象可以传参数，运行。
方法的定义第二种
js 中方法的返回值 也是使用return关键字。同java一样，return也可以结束方法。
void()运算符；拦截方法的返回值。
js中的三大包装对象 String Number ，Boolean。
在js中 string ,number , boolean 属于伪类，可以使用其包装类的属性和方法。
var str = new String (” abcd”);
Boolean 对象 var oBooleanObject = new Boolean(false);
var result = oBooleanObject && true; // true
字符串常用方法：charAt(),concat(),indexOf(), substring(), slice();
Global对象
js的内置对象可以在不创建对象，而直接使用内置对象的方法：
encodeURI( str) 对字符串进行编码 只对中文进行编码 .
decodeURI (str) 对字符串进行解码
encodeURIComponent(str) 对字符串进行编码 范围比encodeURI要大.包括一些特定字符 例如 / , : , ? , &
decodeURIComponent( str)
escape 已过时
unescape
eval(“……”) 执行参数中的代码（JS代码）
isNaN() 判断一个参数是否是NaN
由于NaN的特性 ，NaN == NaN 如上等式恒为false，那么我们就必须借助本地对象的isNaN()函数来解决。
var a = +”abc”;
alert (a == NaN); //false
alert( isNaN(a) );//ture
parseInt() parseFloat() 字符串向数字转换，转换原理：将字符串从左到右依次取得有效字符转化成数字，直到遇到无效数字为止。
var str = “123”;
var num = parseInt(str);
(字符串向数字转换的三种方式，一元加减法，Number的构造器，parseInt()方法 ，更为强大 )
Math对象
属于内置对象，但是在调用其属性和方法的时候需要显式的指明Math。常用方法Math.random() 0-1
Math.round(…) 四舍五入到一个整数。
Math.max（num1,num2）和Math.min（num1,num2）
Math.pow(num1,num2) 返回num1的num2 次方的值；
Array对象
属于本地对象，js的内置对象只有Math和Global对象。
var arr1 = [ 1,2,3]
var arr2 = new Array(1,2,3);//构造函数中若有多个参数，则所有参数作为数组的元素。
var arr3 = new Array(3);//创建一个数组长度为3的空数组。若构造器中只有一个数字参数，则则个参数为数组的长度，而非元素。
如上是创建数组对象的方式。
Array当中的属性//length ==>数组长度
Array的遍历
for(var i = 0; i < arr1.length; i ++){
arr1[i]….}
Array 的方法 concat 两个数组相加
join(..) 返回一个字符串，字符串内容是数组元素按照给定的参数连接。
pop() 删除最后一个元素，并返回被删除的元素。
push( )向数组最后添加参数，并返回数组的最新长度
如上的两个方法可以模拟栈的数据结构（先进后出）
reverse() 数组元素反转。
sort()方法 数组元素排序
注意：sort方法排序默认是按照字符串比较规则排序。
如果想要实现数字排序，需要自定义排序器，即排序函数，并将排序器当作参数传递给sort()方法。排序器规则：返回正数则 被比较的两个数 前者大，0则相等，负数则后者大。（排序器名字只要合法即可）
function abc (a,b) {return a - b;}
js的数组特性：1，数组可以存放任意类型的元素，包括原始数据类型以及对象类型。
2，数组的长度随着下标而变化，用到多长，就有多长。
Date对象。属于本地对象。
/*
1.new Date() 获取当前时间
2.getFullYear() 获取年份
3.getMonth() 获取月份注意 1月份结果为0
4.getHours() 小时
5.getDate() 日期
6.getMinutes() 分钟
7.getSeconds() 获取秒
8.getTime() 获取毫秒值.
toLocaleString () 获取本地的时间格式字符串.
例题：//例一: 打印出当前日期 格式如下.
2014年06月18日 15:40:30 星期三
function getCurrentDate(){
//1. 创建Date对象
var date = new Date(); //没有填入任何参数那么就是当前时间
//2. 获得当前年份
var year = date.getFullYear();
//3. 获得当前月份 js中月份是从0到11.
var month = date.getMonth()+1;
//4. 获得当前日
var day = date.getDate();
//5. 获得当前小时
var hour = date.getHours();
//6. 获得当前分钟
var min = date.getMinutes();
//7. 获得当前秒
var sec = date.getSeconds();
//8. 获得当前星期
var week = date.getDay(); //没有getWeek
// 2014年06月18日 15:40:30 星期三
return year+”年”+changeNum(month)+”月”+day+”日 “+hour+”:”+min+”:”+sec+” “+parseWeek(week);
}
//alert(getCurrentDate());
//解决 自动补齐成两位数字的方法
//将数字 0~6 转换成 星期日到星期六
正则对象：RegExp对象 本地对象
一般在表单验证字符串是否符合规则（regular express）
创建
参数1是正则表达式，正则表达式以^开始$结束，[]表示可以出现的字符，{5，11}表示出现的次数，前者表示最少出现次数，后者表示最多出现次数。当只出现1次的时候，{}可以省略。
参数2是验证模式，g global 全局验证，i ignorance 忽略大小写验证。
var str = “abc123”;
reg1.test(str);//true
创建方式 /正则表达式/匹配模式
var reg2 = /^[a-zA-Z]{1}[a-zA-Z0-9]{5,11}$/g
正则对象的方法：
test( str ) //测试一个字符串是否符合正则表达式，返回结果true or false
String中与正则结合的几个方法：
match( reg ) 返回匹配正则表达式的内容
search( reg )返回字符串中匹配正则表达式内容的位置
split(reg ) 返回字符串中按照正则表达式切割，返回字符串数组
replace( reg, objstr)对字符串按照符合正则表达式的内容替换成objstr
BOM
Window 对象，
概念上讲：一个HTML文档就对应一个Window对象。功能上讲，控制浏览器窗口。使用上讲，与Global类型相似，不用创建对象，可以直接使用方法。
方法:
alert(args)
confirm (args) 返回 提示用户选择 true or false
prompt(args1,args2) 返回用户输入的内容 arg1 提示用户信息arg2输入框的默认值。
open(url);打开一个新的窗口并进入参数url。
close();关闭窗口
setInterval(function,time)定时器方法，参数1是function对象，参数2是时间，每隔参数2的时间调用function对象。返回该定时器的id。
clearInterval(id)停止定时器，方法的参数是定时器的id。
setTimeout(function,time) 同样也返回定时器id，只不过funciton只调用一次，setInterval()方法可以循环调用。
window常用属性
self，parent，top 这三个对象都是Window类型
frames属性，属于集合属性即数组。
History对象
back(), 相当于浏览器的后退按钮
forward(), 相当于浏览器的前进按钮
go（Integer），0相当于本页面刷新，-1相当于后退页面，1相当于前进页面。
length属性：返回浏览器浏览过的url的数量；
Location对象
reload() :重载，刷新当前页面
属性href 当前浏览器窗口的路径
DOM(document object model)一切皆对象
w3c定义的一种访问HTML以及XML文档的标准。
dom中的五大对象：
Document:代表整个文档相关信息封装成的对象，Document对象作为Window对象的属性，因此可以通过window.document或者document获取
Element：文档中的标签对象
Attribute：标签的属性对象
Text：文档中的文本对象。
Comment：文档中的注释对象
根据如上的五大对象抽离出共有的属性，形成了一个Node节点对象。
Node的属性分为两类自身属性和导航属性。
自身属性：nodeName:节点名称
nodeValue:节点值
nodeType:节点类型
比较重要的节点类型以及NodeType
元素类型 nodetype
元素 1
属性 2
文本 3
注释 8
文档 9
导航属性:firstChild: 第一个子节点
lastChild: 最后一个子节点
parenNode： 父节点
nextSibling :下一个兄弟节点
previousSibling： 前一个兄弟节点
childNodes:所有的子节点
其中元素节点可以通过innerHTML属性获取标签内容，即标签体。
在整个文档范围内查询元素节点根据id值查询【返回一个具体节点】:
document.getElementById(“id值”)
根据标签名查询【返回节点数组】:
document.getElementsByTagName(“标签名”)
根据name属性值查询【返回节点数组】:
document.getElementsByName(“name值”)
在具体元素节点范围内查找子节点查找全部子节点【返回节点数组】:
element.childNodes
查找第一个子节点【返回节点对象】:
element.firstChild
查找最后一个子节点【返回节点对象】:
element.lastChild
查找指定标签名的子节点【返回节点数组】:
element.getElementsByTagName(“标签名”)
查找指定元素节点的父节点:
element.parentNode
查找指定元素节点的兄弟节点查找前一个兄弟节点:
node.previousSibling
查找后一个兄弟节点:
node.nextSibling
读取属性值 :元素对象.属性名
修改属性值 :元素对象.属性名 = 新的属性值
获取文本值三步曲 :
1 获取文本节点父节点
2 获取父节点的第一个子节点 parentEle.firstChild
3 获取文本节点的节点值 parentEle.firstChild.nodeValue
由于HTML中的空白域，dom会将空白域看作文本节点Text。故而以上的导航属性最常用的是parenNode
创建文本节点
document.createTextNode(“文本值”)
创建元素节点document.createElement(“标签名”)
组装
parentEle.appendChild(childEle)
使用父节点删除子节点: parentEle.removeChild(childNode)
DOM更新，插入
element.insertBefore(newNode,targetNode)
DOM更新，替换
element.replaceChild(newChild,oldChild)
innerHTML
返回对象的起始位置到终止位置的全部内容,包括Html标签。 读取元素内部HTML代码 元素对象.innerHTML 修改元素内部HTML代码 元素对象.innerHTML=HTML代码
事件：
可以为所有的Element对象添加事件属性，事件属性的类型是函数类型。
简单的说，事件就是为Element对象添加事件属性，这些事件属性是可以函数类型，可以运行。至于什么时候执行，需要看事件属性的名称。
对a标签的阉割
将a标签阉割，使其成为一个类似按钮的触发器。
也可以给a标签添加事件，事件返回值false，同样也可以达到阉割a标签的作用。（return false）
java 面向对象的语言（主要是创建对象）
Jscript
1，在网页内定义。位置是在< script>标签内，< script>标签一般定义在< title>标签之后，< head>标签之内。
2，Jscript语句定义在网页外部，在< script>标签内，添加src 属性指向外部的js文件。
注意：在使用了外部定义jscript的网页内，不能再使用第一种方式定义js了。
实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- JavaScript代码写在Script标签中 -->
<script type="text/javascript">
//借助window.onload事件，在DOM节点加载完成之后执行程序代码
window.onload = function(){
//获取#btnId对应的元素节点
var btn = document.getElementById("btnId");
//为#btnId绑定单击响应函数
btn.onclick = function(){
//弹出警告框，显示字符串Hello
alert("Hello");
}
}
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>js的分类：
JS分为 ECMA，BOM，DOM三大体系。同时还有一种分类分为本地对象native object 和 主机对象 host object（如上的BOM，和 DOM 就属于此分类。） ，本地对象还可以继续分为 内建对象 build in object 。
js基本语法
js中的数据类型：
1，原始数据类型
2，对象数据类型（引用数据类型）<数组，函数>
1原始数据类型：
1，String 类型
2，number（包括整型和浮点型）
3，boolean
4，null （null ），对象类型的占位符。
5，undefined （undefined 未定义类型）只定义了变量，而该变量没有被赋值，系统为其赋值为undefined。
typeof 运算符 判断当前数值是哪一种数据类型
null类型运算结果返回Object。
JS 中 一律使用 var 关键字来申明数据类型，而不指定变量的类型，因为变量的类型随着赋值语句的变化而变化。
建议使用匈牙利标记命名法
一元加减法：
用途：用来类型转换
一元加法本质上对数字无任何影响：
字符串转换成数字。
var a = “abc”;
a = +a;
此时a 被赋值为 NaN ,NaN属于Number类型的特殊值，当遇到字符串转换成数字无效的时候便会得到此值。
NaN的特性，NaN不等于任何值包括NaN自己。只有在！=运算符的时候才返回true。判断一个值是否是NaN可以使用isNaN()函数来调用。
Boolean类型：
数值类型向Boolean 转换 :除了0和NaN转换为false 以外，其余都转换为true。
String向 Boolean 转换：除了空字符（”“）转换为false之外，其余都转换为true。
null类型向Boolean转换：false；
Undefined 向Boolean转换 :false；
Object 类型向 Boolean类型转换 :所有非空对象都转换为true。
+ - * /
比较运算符两侧若 一个是数字类型一个是其他类型，会将其他类型转换成数字类型。
两个字符串在比较时，比较字符串最高位的asc码。如果最高位相等，继续比较次位，没有次位则为0.
=== （全等号）判断两个变量包括数值和类型在内是否相等。
js中的复合运算符 += ， -= ，*= ，/= 和java一样
js中也有三元运算符，
variable = boolean_expression ? true_value : false_value;
js是基于对象的语言，所有类的基类 Object。
常用的方法toString() 返回对象的字符串表示。
方法的定义 function fun_name (…,…) {……}
在js中没有单独的方法，以上定义的方法是Function 的对象。
只不过该对象可以传参数，运行。
方法的定义第二种
var fun0 = new Function("a" ," b ", " alert(a + b) ");
function fun1(a , b){
alert(a + b);
}
var fun2 = function(a ,b){ alert a +b};
js 中没有方法的重载，如果想要实现方法的重载，那么就必须使用方法对象的内置对象 arguments。
function fun01 (){
if(arguments.length==2){
alert arguments[0] + arguments[1];}
if(arguments.length == 3){
alert arguments[0] +arguments[1]+arguments[2]; }
}
如上方法实现了重载： fun02 ( 1,2);
fun02( 1,2,3);js 中方法的返回值 也是使用return关键字。同java一样，return也可以结束方法。
void()运算符；拦截方法的返回值。
js中的三大包装对象 String Number ，Boolean。
在js中 string ,number , boolean 属于伪类，可以使用其包装类的属性和方法。
var str = new String (” abcd”);
Boolean 对象 var oBooleanObject = new Boolean(false);
var result = oBooleanObject && true; // true
字符串常用方法：charAt(),concat(),indexOf(), substring(), slice();
Global对象
js的内置对象可以在不创建对象，而直接使用内置对象的方法：
encodeURI( str) 对字符串进行编码 只对中文进行编码 .
decodeURI (str) 对字符串进行解码
encodeURIComponent(str) 对字符串进行编码 范围比encodeURI要大.包括一些特定字符 例如 / , : , ? , &
decodeURIComponent( str)
escape 已过时
unescape
eval(“……”) 执行参数中的代码（JS代码）
isNaN() 判断一个参数是否是NaN
由于NaN的特性 ，NaN == NaN 如上等式恒为false，那么我们就必须借助本地对象的isNaN()函数来解决。
var a = +”abc”;
alert (a == NaN); //false
alert( isNaN(a) );//ture
parseInt() parseFloat() 字符串向数字转换，转换原理：将字符串从左到右依次取得有效字符转化成数字，直到遇到无效数字为止。
var str = “123”;
var num = parseInt(str);
(字符串向数字转换的三种方式，一元加减法，Number的构造器，parseInt()方法 ，更为强大 )
Math对象
属于内置对象，但是在调用其属性和方法的时候需要显式的指明Math。常用方法Math.random() 0-1
Math.round(…) 四舍五入到一个整数。
Math.max（num1,num2）和Math.min（num1,num2）
Math.pow(num1,num2) 返回num1的num2 次方的值；
Array对象
属于本地对象，js的内置对象只有Math和Global对象。
var arr1 = [ 1,2,3]
var arr2 = new Array(1,2,3);//构造函数中若有多个参数，则所有参数作为数组的元素。
var arr3 = new Array(3);//创建一个数组长度为3的空数组。若构造器中只有一个数字参数，则则个参数为数组的长度，而非元素。
如上是创建数组对象的方式。
Array当中的属性//length ==>数组长度
Array的遍历
for(var i = 0; i < arr1.length; i ++){
arr1[i]….}
Array 的方法 concat 两个数组相加
join(..) 返回一个字符串，字符串内容是数组元素按照给定的参数连接。
pop() 删除最后一个元素，并返回被删除的元素。
push( )向数组最后添加参数，并返回数组的最新长度
如上的两个方法可以模拟栈的数据结构（先进后出）
reverse() 数组元素反转。
sort()方法 数组元素排序
注意：sort方法排序默认是按照字符串比较规则排序。
如果想要实现数字排序，需要自定义排序器，即排序函数，并将排序器当作参数传递给sort()方法。排序器规则：返回正数则 被比较的两个数 前者大，0则相等，负数则后者大。（排序器名字只要合法即可）
function abc (a,b) {return a - b;}
js的数组特性：1，数组可以存放任意类型的元素，包括原始数据类型以及对象类型。
2，数组的长度随着下标而变化，用到多长，就有多长。
Date对象。属于本地对象。
/*
1.new Date() 获取当前时间
2.getFullYear() 获取年份
3.getMonth() 获取月份注意 1月份结果为0
4.getHours() 小时
5.getDate() 日期
6.getMinutes() 分钟
7.getSeconds() 获取秒
8.getTime() 获取毫秒值.
toLocaleString () 获取本地的时间格式字符串.
例题：//例一: 打印出当前日期 格式如下.
2014年06月18日 15:40:30 星期三
function getCurrentDate(){
//1. 创建Date对象
var date = new Date(); //没有填入任何参数那么就是当前时间
//2. 获得当前年份
var year = date.getFullYear();
//3. 获得当前月份 js中月份是从0到11.
var month = date.getMonth()+1;
//4. 获得当前日
var day = date.getDate();
//5. 获得当前小时
var hour = date.getHours();
//6. 获得当前分钟
var min = date.getMinutes();
//7. 获得当前秒
var sec = date.getSeconds();
//8. 获得当前星期
var week = date.getDay(); //没有getWeek
// 2014年06月18日 15:40:30 星期三
return year+”年”+changeNum(month)+”月”+day+”日 “+hour+”:”+min+”:”+sec+” “+parseWeek(week);
}
//alert(getCurrentDate());
//解决 自动补齐成两位数字的方法
function changeNum(num){
if(num < 10){
return "0"+num;
}else{
return num;
}
}//将数字 0~6 转换成 星期日到星期六
function parseWeek(week){
var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
// 0 1 2 3 .............
return arr[week];
}
//例二: 获得 当前格林时间毫秒数, 并转换成 当前日期
var date = new Date();
var time = date.getTime()-10000000000;
//Date的构造方法,可以填入格林毫秒数
var date2 = new Date(time);
//
alert(date2.toLocaleString());正则对象：RegExp对象 本地对象
一般在表单验证字符串是否符合规则（regular express）
创建
var reg1 = new RegExp("^[a-zA-Z]{1}[a-zA-Z0-9]{5,11}$","g");参数1是正则表达式，正则表达式以^开始$结束，[]表示可以出现的字符，{5，11}表示出现的次数，前者表示最少出现次数，后者表示最多出现次数。当只出现1次的时候，{}可以省略。
参数2是验证模式，g global 全局验证，i ignorance 忽略大小写验证。
var str = “abc123”;
reg1.test(str);//true
创建方式 /正则表达式/匹配模式
var reg2 = /^[a-zA-Z]{1}[a-zA-Z0-9]{5,11}$/g
正则对象的方法：
test( str ) //测试一个字符串是否符合正则表达式，返回结果true or false
String中与正则结合的几个方法：
match( reg ) 返回匹配正则表达式的内容
search( reg )返回字符串中匹配正则表达式内容的位置
split(reg ) 返回字符串中按照正则表达式切割，返回字符串数组
replace( reg, objstr)对字符串按照符合正则表达式的内容替换成objstr
BOM
Window 对象，
概念上讲：一个HTML文档就对应一个Window对象。功能上讲，控制浏览器窗口。使用上讲，与Global类型相似，不用创建对象，可以直接使用方法。
方法:
alert(args)
confirm (args) 返回 提示用户选择 true or false
prompt(args1,args2) 返回用户输入的内容 arg1 提示用户信息arg2输入框的默认值。
open(url);打开一个新的窗口并进入参数url。
close();关闭窗口
setInterval(function,time)定时器方法，参数1是function对象，参数2是时间，每隔参数2的时间调用function对象。返回该定时器的id。
clearInterval(id)停止定时器，方法的参数是定时器的id。
setTimeout(function,time) 同样也返回定时器id，只不过funciton只调用一次，setInterval()方法可以循环调用。
window常用属性
self，parent，top 这三个对象都是Window类型
frames属性，属于集合属性即数组。
History对象
back(), 相当于浏览器的后退按钮
forward(), 相当于浏览器的前进按钮
go（Integer），0相当于本页面刷新，-1相当于后退页面，1相当于前进页面。
length属性：返回浏览器浏览过的url的数量；
Location对象
reload() :重载，刷新当前页面
属性href 当前浏览器窗口的路径
DOM(document object model)一切皆对象
w3c定义的一种访问HTML以及XML文档的标准。
dom中的五大对象：
Document:代表整个文档相关信息封装成的对象，Document对象作为Window对象的属性，因此可以通过window.document或者document获取
Element：文档中的标签对象
Attribute：标签的属性对象
Text：文档中的文本对象。
Comment：文档中的注释对象
根据如上的五大对象抽离出共有的属性，形成了一个Node节点对象。
Node的属性分为两类自身属性和导航属性。
自身属性：nodeName:节点名称
nodeValue:节点值
nodeType:节点类型
比较重要的节点类型以及NodeType
元素类型 nodetype
元素 1
属性 2
文本 3
注释 8
文档 9
导航属性:firstChild: 第一个子节点
lastChild: 最后一个子节点
parenNode： 父节点
nextSibling :下一个兄弟节点
previousSibling： 前一个兄弟节点
childNodes:所有的子节点
其中元素节点可以通过innerHTML属性获取标签内容，即标签体。
在整个文档范围内查询元素节点根据id值查询【返回一个具体节点】:
document.getElementById(“id值”)
根据标签名查询【返回节点数组】:
document.getElementsByTagName(“标签名”)
根据name属性值查询【返回节点数组】:
document.getElementsByName(“name值”)
在具体元素节点范围内查找子节点查找全部子节点【返回节点数组】:
element.childNodes
查找第一个子节点【返回节点对象】:
element.firstChild
查找最后一个子节点【返回节点对象】:
element.lastChild
查找指定标签名的子节点【返回节点数组】:
element.getElementsByTagName(“标签名”)
查找指定元素节点的父节点:
element.parentNode
查找指定元素节点的兄弟节点查找前一个兄弟节点:
node.previousSibling
查找后一个兄弟节点:
node.nextSibling
读取属性值 :元素对象.属性名
修改属性值 :元素对象.属性名 = 新的属性值
获取文本值三步曲 :
1 获取文本节点父节点
2 获取父节点的第一个子节点 parentEle.firstChild
3 获取文本节点的节点值 parentEle.firstChild.nodeValue
由于HTML中的空白域，dom会将空白域看作文本节点Text。故而以上的导航属性最常用的是parenNode
创建文本节点
document.createTextNode(“文本值”)
创建元素节点document.createElement(“标签名”)
组装
parentEle.appendChild(childEle)
使用父节点删除子节点: parentEle.removeChild(childNode)
DOM更新，插入
element.insertBefore(newNode,targetNode)
DOM更新，替换
element.replaceChild(newChild,oldChild)
innerHTML
返回对象的起始位置到终止位置的全部内容,包括Html标签。 读取元素内部HTML代码 元素对象.innerHTML 修改元素内部HTML代码 元素对象.innerHTML=HTML代码
事件：
可以为所有的Element对象添加事件属性，事件属性的类型是函数类型。
简单的说，事件就是为Element对象添加事件属性，这些事件属性是可以函数类型，可以运行。至于什么时候执行，需要看事件属性的名称。
对a标签的阉割
<a href = "javascript:void(0)" onclick ="function_name" > Delete</a>
将a标签阉割，使其成为一个类似按钮的触发器。
也可以给a标签添加事件，事件返回值false，同样也可以达到阉割a标签的作用。（return false）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 深入理解javascript作用域第二篇之词法作用域和动态作用域
- js作用域链
- js基础
- JavaScript学习小结之使用canvas画“哆啦A梦”时钟
- js之变量的定义
- javascript权威指南--对象到原始值的转换（未完成）
- servlet、session、jsp的生命周期
- 深入理解javascript作用域系列第二篇——词法作用域和动态作用域
- js之hello world
- 前端基础问题整理-JavaScript相关(一)
- js初等函数
- 【慕课学习】《JavaScript深入浅出》——语句
- 《JavaScript 闯关记》之简介
- 《JavaScript 闯关记》
- 《JavaScript 闯关记》之简介
- 《JavaScript 闯关记》
- js断点调试心得
- Jackson和FastJson性能谁更快
- 本地简单json解析Demo
- JS之路——浏览器window对象