JS基础
一、JavaScript入门篇
第1章 请做好准备
1-1 为什么学习JavaScript
一、你知道,为什么JavaScript非常值得我们学习吗?
1.所有主流浏览器都支持JavaScript
2.目前,全世界大部分网页都使用JavaScript
3.它可以让网页呈现各种动态效果
二、易学性
1-2 新朋友你在哪里(如何插入JS)
JavaScript代码写在之间
之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于javascript语言
1-3 我也可以独立(引用JS外部文件)
我们可以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js,然后将JS代码直接写在JS文件中
注意:在JS文件中,不需要
1-4 找到你的位置(JS在页面中的位置)
javascript作为一种脚本语言可以放在html页面中任何位置,一般放在网页的head或者body部分,但是浏览器解析html时是按先后顺序的,前面的script就先被执行
1-5 JavaScript----认识语句和符号
每一句JavaScript代码格式:语句;
虽然分号";'也可以不写,但我们需要养成编程的好习惯,记得在语句末尾写上分号
1-6 JavaScript----注释很重要
单行注释,在注释内容前加符号"//”。
多行注释以“/*“开始””,以“*/”结束。
1-7 JavaScript----什么是变量
1.定义变量使用关键字var,语法如下:
var 变量名
2.变量名可以任意取名,但要遵循命名规则:
a.变量必须使用字母、下划线(_)或者美元符($)开始
b.然后使用任意多个英文字母、数字、下划线(_)或者美元符($)组成
c.不能使用JavaScript关键词与JavaScript保留字
3.变量要先声明再赋值
4.变量可以重复赋值
注意:a.在JS中区分大小写
b.变量虽然也可以不声明,直接使用,但不规范,需要先声明,后使用
1-8 JavaScript判断语句(if...else)
1-9 JavaScript----什么是函数
1.如何定义一个函数呢?基本语法如下:
function 函数名()
{
函数代码;
}
2.函数调用
在这里相信有许多想要学习前端的同学,我自己建的web前端学习群:688676,
066,免费领取一整套系统的web前端学习教程!
第2章 请和我互动(常用互动方法)
2-1 JavaScript----输出内容(document.write)
1.document.write()可用于直接向HTML输出流写内容。简单的说就是直接在网页中输出内容
第一种:输出内容用""括起,直接输出”“内的内容
第二种:通过变量,输出内容
第三种:输出多项内容,内容之间用+号连接
第四种:输出HTML标签,并起作用,标签使用“”括起来
换行符  空格
2-2 JavaScript----警告(alert消息对话框)
1.语法:alert(字符串或变量)
2.注:a.alert弹出消息对话框(包含一个确定按钮)
b.在点击对话框“确定”按钮前,不能进行任何其它操作
c.消息对话框通常可以用于调试程序
d.alert输出内容,可以是字符串或变量,与doucument.write相似
2-3 JavaScript----确认(confirm 消息对话框)
1.语法:confirm(str);
参数说明:str:在消息对话框中要显示的文本
返回值:Boolean值
2.注:消息对话框是排它的,即用户在点击对话框按钮前,不能进行任何其它操作
2-4 JavaScript----提问(prompt消息对话框)
1.语法:prompt(str1,str2);
2.参数说明:str1:要显示在消息对话框中的文本,不可修改
str2:文本框中的内容,可以修改、
3.返回值:a.点击确定按钮,文本框中的内容将作为函数返回至
b.点击取消按钮,将返回null
2-5 JavaScript----打开新窗口(window.open)
1.作用:open()方法可以查找一个已经存在或者新建的浏览器窗口
2.语法;window.open([URL],[窗口名称],[参数字符串])
3.参数说明:a.URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档
b.窗口名称:可选参数,被打开窗口的名称
(a)该名称由字母、数字、下划线字符组成
(b)“_top”、”_blank“,"_self"具有特殊意义的名称
_blank:在新窗口显示目标网页
_self:在当前窗口显示目标网页
_top:框架网页中在上部窗口中显示目标网页
(c)相同name的窗口只能创建一个,要想创建多个窗口则name不能相同
(d)name不能包含有空格
c.参数字符串:可选参数,设置窗口参数,各参数用逗号隔开
4.注:运行结果考虑浏览器兼容问题
2-6 JavaScript----关闭窗口(window.close)
1.用法:window.close(); //关闭本窗口
.close(); //关闭指定的窗口
第3章 你也有控制权(DOM操作)
3-1 认识DOM
1.文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构(节点树)
将HTML代码分解为DOM节点层次图
DOM
javaScript DOM
对HTML元素进行操作,可添加、改变或移除css样式等
JavaScript
DOM
CSS
2.HTML文档可以说由节点构成的集合,三种常见的DOM节点
a.元素节点:上图中、、
等都是元素节点,即标签
b.文本节点:向用户展示的内容,如
......
中的JavaScript、DOM、CSS等文本
c.属性节点:元素属性,如标签的链接属性href=“http://www.imooc.com”
javaScript DOM
3-2 通过ID获取元素
1.语法:document.getElementById("id")
2.结果:null或[object HTMLParagraghElement]
3.注:获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法
3-3 innerHTML属性
1.作用:innerHTML属性用于获取或替换HTML元素的内容
2.语法:Object.innerHTML
3.注意:a.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素
b.注意书写,innerHTML区分大小写
3-4 改变HTML样式
1.语法:Object.style.property=new style;
2.注意:基本属性表(property)
该表只是一小部分css样式属性,其他样式也可以通过该方法设置和修改
3-5 显示和隐藏(display属性)
网页中经常会看到显示和隐藏的效果,可通过display属性来设置
1.语法;Object.style.diaplay=value
2.value取值
3-6 控制类名(className属性)
1.语法:object.className=classname
2.作用:a.获取元素的class属性
b.为网页内的某个元素指定一个css样式来更改该元素的外观
二、JavaScript进阶篇
第1章 系好安全带,准备启航
1-1 让你认识JS
javaScript能做什么?
a.增强页面动态效果(如:下拉菜单,图片轮播,信息滚动等)
b.实现页面与用户之间的实时、动态交互(如:用户注册、登录验证等)
1.注意:JS是区分大小写的,如:classname与className是不一样的。同时注意方法、属性、变量等的 大小写吆
JS中的字符、符号等一定要在英文状态下输入吆
第2章 你要懂的规则(JS基础语法)
2-1 什么是变量
什么是变量?从字面上看,变量是可变的量;从编程角度讲,变量是用于存储某种、某些数值的存储器
2-2 给变量取个名字(变量命名)
1.变量名字可以任意取,只不过取名字要遵循一些规则
a.必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字
b.变量名区分大小写,如:A和a是两个不同变量
c.不允许使用JavaScript关键字和保留字做变量名
2-3 确定你的存在(变量声明)
1.语法:var 变量名;
2.作用:声明变量,并为"变量"准备位置(即内存)
var可以一次声明多个变量,变量之间用","逗号隔开
3.注意:变量也可以不声明,直接使用,但为了规范,需要先声明,后使用
2-4 多样化的我(变量赋值)
1.语法:a.var 变量名=数值/字符串/布尔值;
b.var 变量名;
变量名=数值/字符串/布尔值;
2-5 表达出你的想法(表达式)
表达式与数学中的定义相似,表达式是指具有一定的值,用操作符把常数和变量连接起来的代数式。一个表达式可以包含常数或变量
例:num(变量)=(赋值)num+1(表达式)
a.串表达式:值为字符串,"I"+"love"+"you" "super"+mychar
b.数值表达式:值为数值,num+5*3 2+2.5
c.布尔表达式:编写布尔值true或false的表达式 2>3 num==5 num
2-6 我还有其他用途(+号操作符)
1.操作符:是用于在javascript中指定一定动作的符号
a.算数操作符(+,-,*,/等)
b.比较操作符(,>=,
c.逻辑操作符(&&,||,!)
2."+"操作符
不只代表加法,还可以连接两个字符串
2-7 自加一,自减一(++和--)
2-8 较量较量(比较操作符)
两个操作数通过比较操作符进行比较,得到值为真(true)和假(false)
2-9 我与你同在(逻辑与操作符)&&
2-10 我或你都可以(逻辑或操作符)||
2-11 是非颠倒(逻辑非操作符)!
2-12 保持先后顺序(操作符优先级)
操作符之间的优先级(高到低)
算术操作符->比较操作符->逻辑操作符->“=”赋值符号
如果同级的运算是按从左到右次序进行,多层括号由里向外
第3章 一起组团(数组)
3-1 一起组团(什么是数组)
数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值 ,根据需要添加更多数值
3-2 组团,并给团取个名(如何创建数组)
1.创建数组语法
var myarray=new Array();
var myarray=new Araay(8);
2.注意:创建的新数组是空数组,没有值,如输出,则显示undefined
虽然创建数组shi,指定了长度,但实际上数组都是变长的,也就是说即使指定了长度为8,仍然可以将元素储存在规定长度以外
3-3 谁是团里成员(数组赋值)
我们可以用简单的方法创建上面的数组和赋值:
第一种方法:var myarray=new Array(66,80,90,77,59);//创建数组同时赋值
第二种方法:var myarray=[66,80,90,77,59];//直接输入一个数组(称“字面量”数组)
注:数组存储的数据可以是任何类型(数字、字符、布尔值等)
3-4 团里添加新成员(向数组增加一个新元素)
只需使用下一个未用的索引,任何时刻可以不断向数组增加新元素
3-5 呼叫团里成员(使用数组元素)
要得到一个数组元素的值,只需引用数组变量并提供一个索引
3-6 了解成员数量(数组属性length)
Javascript数组的length属性是可变的
var arr=[98,76,54,56,76]
arr.length=10;
arr[5]=34;
alert(arr.length);//显示数组的长度16
3-7 二维数组
一维数组,我们看成一组盒子,每个盒子只能放一个内容 myarr[]
二维数组,我们看成一组盒子,不过每个盒子里还可以放多个盒子 myarr[][]。二维数组的两个维度的索引值也是从0开始,两个维度的最后一个索引值为长度-1
1.二维数组的定义方法一
var myarr=new Array;//先声明一维
for(var i=0;i
myarr[i]=new Array(); //再声明二维
for(var j=0;j
myarr[i][j]=i+j;//赋值,每个数组元素的值为i+j
}
}
2.二维数组的定义方法二
var Myarr=[[0,1,2],[1,2,3]]
3.赋值
myarr[0][1]=5;
myarr[0][1],0表示表的行,1表示表的列
第4章 跟着我的节奏走(流程控制语句)
4-1 做判断(if语句)
1.语法:if(条件)
注意:if小写,大写字母(IF)会出错
4-2 二选一(if...else语句)
1.语法:if(条件)
if(条件)
4-3 多重判断(if...else嵌套语句)
1.语法:if(条件1)
else if(条件2)
......
else if(条件n)
else
4-4 多种选择(switch语句)
1.语法:
switch(表达式)
2.说明:switch必须赋初始值,值与每个case值匹配。满足执行该case后的所有语句,并用break语句来阻止运行下一个case。如所有case值都不匹配,执行default后的语句
4-5 重复重复(for循环)
1.for语句结构
for(初始化变量;循环条件;循环迭代)
{
循环语句
}
4-6 反反复复(while循环)
1.whiley语句结构
while(判断条件)
{
循环语句
}
4-7 来来回回(do...while循环)
1.do...while语句结构
do
{
循环语句
}
while(判断条件)
4-8 退出循环break
4-9 继续循环continue
1.语法作用:仅仅跳过本次循环,而整个循环体继续执行
第5章 小程序,大作用(函数)
5-1 什么是函数
1.作用:可以写一次代码,然后反复地重用这个代码
5-2 定义函数
function 函数名()
{
函数体;
}
5-3 函数调用(直接写函数名)
第一种情况:在标签内调用
第二种情况:在HTML文件中调用,如通过点击按钮后调用定义好的函数
5-4 有参数的函数
1.function 函数名(参数1,参数2)
{
函数代码
}
5-5 返回值的函数
第6章 事件响应,让网页响应
6-1 什么是事件
JavaScript创建动态页面。事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数或程序的事件。
主要事件表
6-2 鼠标单击事件(onclick)
6-3 鼠标经过事件(onmouseover)
6-4 鼠标移开事件(onmouseout)
6-5 光标聚焦事件(onfocus)
6-6 失焦事件(onblur)
6-7 内容选中事件(onselect)
6-8 文本框内容改变事件(onchange)
6-9 加载事件(onload)
加载页面时,触发onload事件,事件写在标签内
6-10 卸载事件(onunload)
注意:不同浏览器对onunload事件支持不同
第7章 JavaScript内置对象
7-1 什么是对象
1.JavaScript中的所有事物都是对象,如字符串、数值、数组、函数等,每个对象带有属性和方法。
2.使用对象前先定义
3.访问对象属性的语法:objectName.propertyName
4.访问对象的方法:object.methodName()
7-2 Date日期对象
日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000秒)
1.定义一个时间对象:var Udate=new Date();
注意:使用关键字new,Date()的首字母必须大写。使Udate成为日期对象,并且已有初始值:当前时间(当前电脑系统时间)
2.如果要定义初始值,可以用以下方法:var d=new Date(2012,10,1);
var d=new Date('Oct 1,2012);
3.访问方法语法:"."
7-3 返回/设置年份方法
1.不同浏览器,mydate,setFullYear(81)结果不同,年份被设定为0081或81两种情况
2.结果格式依次为:星期,月,日,年,时,分,秒,时区(火狐浏览器)
Thu Mar 06 2014 10:57:47 GMT+0800 2014
不同浏览器,时间格式有差异
7-4 返回星期方法
1.getDay()返回星期,返回的是0-6的数字,0表示星期天
7-5 返回/设置时间方法
1.get/setTime()返回/设置时间,单位毫秒数,计算从1970年1月1日零时到日期对象所指的日期的毫秒数
7-6 String字符串对象
1.定义字符串的方法就是直接赋值
2.访问字符串对象的属性length
3.访问字符串 对象的方法:使用String对象的toUpperCase()方法来将字符串小写字母转换为大写
7-7 返回指定位置的字符
1.语法:stringObject.charAt(index)
2.参数说明:index必需。表示字符串中某个位置的数字,即字符在字符串中的下标
3.注意:a.字符串中第一个字符的下标是0。最后一个字符的下标为字符串长度减一(string.length-1)
b.如果参数index不在0与string.length-1之间,该方法将返回一个空字符串
7-8 返回指定的字符串首次出现的位置
1.语法:stringobject.indexOf(substring,startpos)
2.参数说明:
3.注意:a.区分大小写
b.如果要检索的字符串值没有出现,则该方法返回-1
7-9 字符串分割split()
1.语法:stringObject.split(separator,limit)
2.参数说明:
3.注意:如果把空字符串("")用作separator,那么stringObject中的每个字符之间都会被分割
7-10 提取字符串substring()
1.语法:stringObject.substring(startPos,stopPos)
2.参数说明:
3.注意:a.返回的内容是从start开始(包含start位置的字符)到stop-1处的所有字符,其长度为stop减start
b.如果参数start与stop相等,那么该方法返回的就是一个空串(即长度为0的字符串)
c.如果start比stop大,那么该方法在提取子串之前会先交换这两个参数
7-11 提取指定数目的字符substr()
1.语法:stringObject.substr(startPos,length)
2.参数说明:
3.注意:如果参数startPos是负数,从字符串的尾部开始算起的位置。也就是说,-1指字符串中最后一个字符,-2指倒数第二个字符,以此类推
如果startPos为负数且绝对值大于字符串长度,startPos为0
7-12 Math对象
1.Math对象,提供对数据的数学计算
2.Math对象属性
3.Math对象方法
4.注意:Math对象是一个固定的对象,无需创建它,直接把Math作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别
7-13 向上取整ceil()
1.语法:Math.ceil(x)
2.参数说明:
7-14 向下取整floor()
1.语法:Math.floor()
2.参数说明:
7-15 四舍五入round()
1.语法:Math.round(x)
2.参数说明:
3.注意:a.如果x与两侧整数同等接近,则结果接近+00方向的数字值(如-5.5将舍入为-5,-5.52将舍入为-6)
b.对于0.5,该方法将进行上舍入(5.5将舍入为6)
7-16 随机数random()
1.语法:Math.random()
2.语义:返回一个大于或等于0但小于1的符号为正的数字值
7-17 Array数组对象
7-18 数组连接concat()
concat()方法用于连接两个或多个数组。此方法返回一个新数组,不改变原来的数组
1.语法:arrayobject.concat(array1,array2,...,arrayn)
array可以是数组名或列举的数组元素
7-19 指定分隔符连接数组元素join()
1.语法:arrayObject.join(分隔符)
2.参数说明:
7-20 颠倒数组元素顺序reverse()
1.注意:该方法会改变原来的数组,而不会创建新的数组
7-21 选定元素slice()
1.语法:array.Object.slice(start,end)
2.参数说明:
3.注意:返回一个新的数组,包含从start到end(不包括该元素)的arrayObject中的元素
该方法并不会修改数组,而不是返回一个子数组
String.slice与Array.slice()相似
7-22 数组排序sort()
1.语法:arrayObject.sort(方法函数)
2.参数说明:
3.注意:a.如果不指定,则按unicode码顺序排列
b.如果指定,则按所指定的排列方法排序
第8章 浏览器对象
8-1 window对象
window对象是BOM的核心,window对象指当前的浏览器窗口
1.window对象方法:
8-2 JavaScript计时器
在JavaScript中,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行
1.计时器类型:一次性计时器:仅在指定的延迟时间之后触发一次
间隔性触发计时器:每隔一定的时间间隔就触发一次
2.计时器方法:
8-3 计时器setInterval()
1.语法:setInterval(代码,交互时间);
2.参数说明:a.代码:要调用的函数或要执行的代码串
b.交互时间:周期性地执行或调用表达式之间的时间间隔,以毫秒计(1=1000ms)
3.返回值:一个可以传递给clearInterval()从而取消对代码的周期性执行的值
8-4 取消计时器clearInterval()
1.语法:clearInterval(id_of_setInterval)
2.参数说明:id_of_setInterval:由setInterval()返回的ID值
8-5 计时器setTimeout()
1.语义:在载入后延迟指定时间后,去执行一次表达式,仅执行一次
2.语法:setTimeout(代码,延迟时间)
3.参数说明:a.要调用的函数或要执行的代码串
b.延长时间:在执行代码前需等待的时间,以毫秒为单位(1s=1000ms)
8-6 取消计时器clearTimeout()
1.语法:clearTimeout(id_of_setTimeout)
2.参数说明:id_of_setTimeout:由setTimeout()返回的ID值。该值标识要取消的延迟执行代码块
8-7 History对象
History对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能
注意:从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的windows对象关联
1.语法:window.history.[属性|方法]
window可以省略
2.History对象属性
3.History对象方法
8-8 返回前一个浏览的页面
1.window.history.back(0相当于window.history.go(-1),等同于点击浏览器的倒退按钮
8-9 返回下一个浏览的页面
1.window.history.go(-1)相当于window.history,forward()
8-10 返回浏览历史中的其他页面
1.语法:window.history.go(number)
2.参数:
8-11 Location对象
Location对象用于获取或设置窗体的URL,并且可以用于解析URL
2.location对象属性图示
2.location对象属性
3.location对象方法
8-12 Navigator对象
Navigator对象包含有关浏览器的信息,通常用于检测浏览器于操作系统的版本
1.对象属性:
8-13 userAgent
返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
1.语法: navigator.userAgent
几种浏览的useragent,像360的兼容模式用的是IE,极速模式用的是chrome的内核
8-14 screen对象
screen对象用于获取用户的屏幕信息
1.语法:window.screen.属性
2.对象属性
8-15 屏幕分辨率的高和宽
window.screen对象在编写时可以不使用window这个前缀
8-16 屏幕可用高和宽度
1.screen.availWidth属性返回访问者的屏幕的宽度,以像素计,减去界面特性,比如任务栏
2.screen.availHeight属性返回访问者的屏幕的高度,以像素计,减去界面特性,比如任务栏
注意:不同系统的任务栏默认高度不一样,即任务栏的位置可在屏幕上下左右任何位置,所以有可能可用宽度和高度不一样
第9章 DOM对象,控制HTML元素
9-1 认识DOM
文档对象模型DOM(Document Object model)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构(节点 树)。
来看看下面的代码:
将HTML代码分解为DOM节点层次图:
HTML文档可以说由节点构成的集合,DOM节点有:
a.元素节点:上图中、、
等都是元素节点,即标签
b.文本节点: 向用户展示的内容,如
...
中的Javascript、DOM、css等文本
c,属性节点:元素属性,如标签的链接属性href="http://www.imooc.com"
节点属性:
遍历节点树:
以上图ul为例,它的父级节点body,它的子节点3个li,它的兄弟节点h2、p
DOM操作:
注意:前面两个是document方法
9-2 getElementsByName()方法
返回带有指定名称的节点对象的集合
1.语法:document.getElementsByName(name)
与getElementById()方法不同的是,通过元素的name属性查询元素,而不是通过id属性
2.注意:a.因为文档中的name属性可能不唯一,所有getelementsByName()方法可以返回的是元素的数组,而不是一个元素
b.和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始
9-3 getElementsByTagName()方法
返回带有指定标签名的节点对象的集合,返回元素的顺序是它们在文档中的顺序
1.语法:document.getElementsByTagName(Tagname)
2.说明:a.Tagname是标签的名称,如p、a、img等标签名
b.和数组类似也有length属性,可以和访问数组一样的方法来访问,所以从0开始
9-4 区分getElementByID,getElementsByName,getElementsByTagName
9-5 getAttribute()方法
通过元素节点的属性名称获取属性的值
1.语法:elementNode.getAttribute(name)
2.说明:a.elementNode:使用getElementById()、getElementbByTagName()等方法,获取到的元素节点
b.name:要想查询的元素节点的属性名字
9-6 setAttribute()方法
setAttribute()方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值
1.语法:elementNode.setAttribute(name,value)
2.说明:a.name要设置的属性名
b.value要设置的属性值
3.注意:a.把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性
b.类似于getAttribute()方法,setAttribute()方法只能通过元素节点对象调用的函数
9-7 节点属性
在文档对象模型(DOM)中,每个节点都是一个对象。DOM节点有三个重要的属性
a.nodeName:节点的名称
b.nodeValue:节点的值
c.nodeType:节点的类型
一、nodeName属性:节点的名称,是只读的
a.元素节点的nodeName与标签名相同
b.属性节点的nodeName是属性的名称
c.文本节点的nodeName永远是#text
d.文档节点的nodeName永远是#document
二、nodeValue属性:节点的值
a.元素节点的nodeValue是undeifined或null
b.文本节点的nodeValue文本本身
c.属性节点的nodeValue是属性的值
三、nodeType属性:节点的类型,是只读的。以下常用的几种节点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
9-8 访问子节点childNodes
访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,它具有length属性
1.语法:elementNode.childNodes
2.注意:如果选定的节点没有子节点,则该属性返回不包含节点的Nodelist
9-9 访问子节点的第一和最后项
一、firstChild属性返回childNodes数组的第一个子节点。如果选定的节点没有子节点,则该属性返回NULL。
1.语法:node.firstChild
2.说明:与elementNode.childNodes[0]是同样的效果
二、lastChild属性返回childNodes数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回NULL。
1.语法:node.lastChild
2.说明:与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果
3.注意:上一节中,我们知道IntenetExplorer会忽略节点之间生成的空白文本节点,而其它浏览器不会。我们可以通过检测节点类型,过滤子节点。(以后章节讲解)
9-10 访问父节点parentNode
1.语法:elementNode.parentNode
注意:父节点只有一个
2.访问祖节点:elementNode.parentNode.parentNode
注意:浏览器兼容问题,chrome,firefox等浏览器标签之间的空白也算是一个文本节点
9-11 访问兄弟节点
1.nextSibling属性可返回某个节点之后紧跟的节点(处于同一树层级中)
2.语法:nodeObject.nextSibling
说明:如果无此节点,则该属性返回null
3.previousSibling属性可返回某个节点之前紧跟的节点(处于同一树层级中)
4.语法:nodeObject.previousSibling
说明:如果无此节点,则该属性返回null
5.注意:两个属性获取的是节点。Internet Explorer会忽略节点间生成的空白文本节点(例如,换行符号),而其他浏览器不会忽略
解决问题方法:判断节点nodeType是否为1,如是为元素节点跳过
9-12 插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点
1.语法:appendChild(newnode)
9-13 插入节点insertBefore()
insertBefore()方法可在已有的子节点前插入一个新的子节点
1.语法:insertBefore(newnode,node);
2.参数:newnode:要插入的新节点
node:指定此节点前插入节点
领取专属 10元无门槛券
私享最新 技术干货