插入JS:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=gb18030">
<title>插入JS代码</title>
<script type="text/javascript">
document.write("开启JS之旅!");
</script>
</head>
</html>
可以把html文件和js代码分开,单独创建一个js文件保存js代码。
引用js代码: <script src="one.js"></script>
例:one.js文件:
alert("JS代码");
js文件不能直接运行,需要嵌入到html文件中执行。
我们可以将JavaScript代码放在html文件的任何位置,但一般放在head或者body部分;
放在<head>部分:浏览器解析head部分就会执行这个代码,然后才解析页面其余元素
放在<body>部分:JavaScript代码在网页读取到该语句的时候就会执行
注意:进行页面显示初始化的js必须放在head里,因为初始化都要求提前进行。
如果是通过实践调用执行function那么对位置没有要求。
一行的结束就被认定为语句的结束,通常在后面加上分号。
单行注释: 在内容前加//
多行注释: 以/* 开始,以*/结束
定义变量使用关键字var,变量必须以字母,下划线或美元符号开始。变量要先声明再赋值。
定义函数: function 函数名(){
函数代码;
}
函数的调用:直接写函数名即可。
JavaScript输出内容:
document.write("内容"+变量名);
输出多项内容,内容之间可用+号连接。
JavaScript警告:(alter消息会话框)
alter(字符串或变量)
JavaScript确认(confirm消息对话框):
语法:confirm(str);
参数说 str:在消息会话框中要显示的文本 返回值:Boolean值,当点击确定时返回true,当点击取消时返回false.
例:<script type="text/javascript">
var mymessage=connfirm("你喜欢JavaScript吗?");
if(mymessage==true){
document.write("很好,加油!");
}else{
document.write("js功能强大,要学习!");
}
</script>
javascript提问(prompt消息对话框)
prompt弹出消息对话框通常用于询问一些需要与用户交互的信息。
语法:prompt(str1,str2);
str1表要显示在消息对话框中的文本,不可修改
str2表文本框中的内容,可修改
javascript打开新窗口(window.open)
语法:window.open([URL],[窗口名称],[参数字符串]);
JavaScript关闭窗口(window.close)
语法:window.close();//关闭本窗口
或 窗口对象.close();//关闭指定窗口
文档对象模型DOM(document object model)定义访问和处理html文档的标准方法。DOM将html文档
呈现为带有元素、属性和文本的树结构(节点树)
通过ID获取元素: document.getElementById("id");
innerHTML:该属性用于获取或替换HTML元素的内容 语法:Object,.innerHTML
改变HTML样式: 语法 Object.style.property=new style;
属性property:backgroundColor、height、width、color、font、fontsize等。
Object为获取的元素对象
显示和隐藏(display属性): Object.sytle.display=value;
value取值:none 隐藏
block 显示
控制类名(className属性):设置或返回元素的class属性
语法:object.className=className;
创建数组: var myarr=new Array();//创建一个空的数组
或 var myarr=[10,0,50,60];
或var myarr=new Array(50,40,20);//创建数组并赋值
数组属性:length 语法:myarr.length;//获取数组的长度
二维数组:var myarr=new Array();
for(var i=0;i<2;i++){
myarr[i]=new Array();//先声明一维,再声明二维
for(var j=0;j<3;j++){
myarr[i][j]=i+j;//赋值
}
Switch语句:
switch(表达式){
case值1:
执行代码块1
break;
case值2:
执行代码块2
break;
。。。。。
default:
不同时执行的代码
}
继续循环(continue):continue的作用是仅仅跳过本次循环,而整个循环体继续执行
语句结构: for(.....){
if(特殊情况){
continue;
}
循环代码;
}
JavaScript事件:
onclick 鼠标单击事件
onmouseover 鼠标经过事件
onmouserout 鼠标移开事件
onchange 文本框内容改变事件
onselect 文本框内容被选中事件
onfocus 光标聚集
onblur 光标离开
onload 网页导入
onunload 关闭网页
什么是对象:JavaScript中所有事物都是对象,如字符串、数组、数值、函数等,每个对象都带有属性和方法。
对象的属性:反映该对象某些特定的性质的,如字符串长度,图像的长度等。
对象的方法:能够在对象上执行的动作,如表单的提交submit、时间的获取getYear等
var objectName=new Array();//使用new关键字定义对象
或者 var objectName=[];
访问对象属性的语法:objectName.propertyName;
访问对象的方法:objectName.methodName();
Date日期对象:
定义一个时间对象:var udate=nw Date();//当前电脑系统时间
var d=new Date(2012,10,1);//2012年10月1日
或var d=new Date('Oct 1,2012');
访问方法: 日期对象.方法名;
Date对象中处理时间和日期的常用方法:get/setDate() //返回/设置日期
get/setFullYear() //返回/设置年份
get/setMonth()
get/setHours()
get/setMinutes()
get/setSeconds()
get/setTime()
例:var mydate=new Date();
document.write(mydate+"<br>");//输出当前时间
document.write(mydate.getFullYear()+"<br>");//输出当前年份
mydate.setFullYear(1981);//设置年份
返回星期方法:getDay(),返回的是0-6的数字,0表示星期日。
var mydate=new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var mynum=mydate.getDay();
document.write(mydate.getDate());//输出getDate()获取值
document.write("今天是"+weekday[mynum]);//输出星期几
String字符串对象:
var mystr="i love javascript";
访问字符串对象的属性length: stringObject.length;//返回字符串的长度
将小写转换成大写: stringObjectName.toUpperCase();
返回指定位置的字符:charAt();
语法:stringObjectName.charAt(index);
返回指定字符串首次出现的位置: stringObjectName.indexOf(substring,startpos);
参数:substring:规定需检索的字符串值
startpos:规定字符串中开始检索的位置
字符串分割:split();
语法:stringObject.split(separator,limit);
参数:separator:从该参数指定的地方分割
limit:分割的次数
提取字符串substirng();
语法:stringObject.substring(startpos,stoppos);
参数:starpos:开始位置
stoppos:结束位置
提取指定数目的字符substr()
语法:stringObject.substr(startpos,length);
参数:startpos:提取的字符串起始位置
length:提取字符串的长度
Math对象:
Math对象属性: E //返回算术常量e(约等于2.718)
LN2 //返回2的自然对数(约等于0.693)
LN10 //返回10的自然对数(约等于2.302)
PI //圆周率(3.14159)
Math对象方法: abs(x) //返回数的绝对值
acos(x) //返回数的反余弦值
exp(x) //返回e的指数
floor(x) //对数进行向下取整
max(x,y) //取最大
round(x) //四舍五入
pow(x,y) //返回x的y次幂
sqrt(x) //平方根
random() //0-1之间的随机数
ceil(x) //向上取整
数组连接concat():用于连接两个或多个数组
指定分隔符连接数组元素join(): arrayObject.join(分隔符);
颠倒数组元素顺序reverse()
选定元素slice() ; arrayObject.slice(start,end);
数组排序:sort()
window对象:window对象是BOM的核心,window对象指当前的浏览器窗口
window对象方法:alert() 显示警告框
prompt() 显示可提示输入对话框
confirm() 确认对话框
open() 打开一个新的窗口
close() 关闭浏览器窗口
print() 打印当前窗口内容
。。。
JavaScript计时器:
计时器方法;setTimeout() //指定的延迟时间之后来执行的代码
claerTimeout() //取消setTimeout设置
setInterval() //每隔指定时间执行代码
clearInterval() //取消setInterval设置
例:设置一个计时器,每隔100秒调用clock()函数;
<script type="text/javascript">
var int=setInterval(clock,100);
function clock(){
var time=new Date();
document.getElementById("clock").value=time;
}
</script>
<form>
<input type="text" id="clock" size="50" />
</form>
History对象:history对象记录了用户曾经浏览过的页面URL,并可以实现浏览器前进与后退相似导航的功能。
语法: window.history.[属性|方法]
history对象属性: length 返回浏览器历史列表中的URL数量
history对象方法: back() 加载history列表中的前一个URL
forward() 加载history列表中的下一个URL
go() 加载history列表中的某个集体的页面
Location对象:location对象用于获取或设置窗体的URL,并且可以用于解析URL
语法:location.[属性|方法]
location对象属性:hash 设置或返回从井号#开始的URL
host 设置或返回主机名和当前URL的端口号
hostname 设置或返回当前URL的主机名
href 设置或返回完整的URL
port 设置或返回当前URL的端口号
location对象的方法;assign() 加载新的文档
reload() 重新加载当前文档
replace() 用新的文档替换当前文档
Navigator对象:Navigator对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。
对象属性:appCodeName 浏览器胆码名的字符串表示
appName 返回浏览器的名
appVersion 返回浏览器的平台和版本信息
platform 返回运行浏览器的操作系统平台
userAgent 返回由客户机发送服务器的user-agent头部的值
screen对象:screen对象用于获取用户的屏幕信息
语法:window.screen.属性
对象属性:availHeight 窗口可使用的屏幕高度
availWidth 窗口可使用的宽度
colorDepth 颜色位数
height 屏幕高度
whdth 屏幕宽度
获取屏幕的可用高度和宽度:
<script type="text/javascript">
document.write("可用宽度"+screen.availWidth);
document.write("可用高度"+screen.availHeight);\
</script>
DOM对象,控制HTML元素:
文档对象模型DOM(document Object Model)定义访问和处理HTML的标准方法。
DOM将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<h2><a href="http://www.baidu.com">javascript DOM</a></h2>
<p>对HTML元素进行操作,可添加,改变或移除CSS样式等</p>
<ul>
<li>JavaScript</li>
<li>DOM</li>
<li>CSS</li>
</ul>
</body>
</html>
HTML文档可以说是由节点构成的集合,DOM节点有:
1.元素节点:上述<html> <body> <p>等都是元素节点,即标签。
2.文本节点:向用户展示的内容,如<li> 中的JavaScript,DOM,CSS等文本
3.属性节点:元素的属性,如<a>标签的链接属性href。
节点属性:
方法 说明
nodeName 返回一个字符串,其内容是给定节点的名字
nodeType 返回一个整数,这个数值代表给定节点的类型
nodeValue 返回给定节点的当前值
遍历节点树:
方法 说明
childNode 返回一个数组,这个数组有给定的元素节点的子节点构成、
firstChild 返回第一个节点
lastChild 返回最后一个子节点
parentNode 返回一个给定节点的父节点
nextSibling 返回给定节点的下一个子节点
preiousSibling 返回给定节点的上一个子节点
DOM操作:
方法 说明
createElement(element) 创建一个新的元素节点
createTextNode() 创建一个包含给定文本的新文本节点
appendChild() 指定节点的最后一个子节点列表之后添加一个新的子节点
insertBefore() 将一个给定节点插入到一个给定元素的给定子节点的前面
removeChild() 从一个给定元素中删除一个子节点
replaceChild() 把一个给定父元素里的一个子节点替换为另一个节点
getElementByName()方法:返回带有指定名称的节点对象的集合
document.getElementByName(name)
该方法返回的是元素的数组,而不是一个元素,有length属性。
<script type="text/javascript">
function getElements(){
var x=document.getElementByName("alink");
alert(x.length);
}
<body>
<a name="alink" href="#">我是链接一</a><br/>
<a name="alink" href="#">我是链接二</a><br/>
<a name="alink" href="#">我是链接三</a><br/>
<a name="alink" href="#">我是链接四</a><br/>
<input type="button" οnclick="getElements()" value="几个链接"/>
</body>
getElementByTagName()方法:返回带有指定标签的节点对象的集合。
getElementByTagName(TagName);
getAttribute()方法:通过元素节点的属性名称获取属性的值。
elementNode.getAttribute(name);
1.elementNode:使用getElementById(),getElementByTagName()等方法获取到的元素的节点。
2.name:想要查询得元素节点的属性名称。
setAttribute()方法:增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。
elementNode.setAttribute(name,value);
1.name:要设置的属性名
2.value:要设置的属性值
节点属性:在文档对象模型(DOM)中,每个节点都是一个对象。DOM节点有三个重要的属性:
1.nodeName:节点的名称
2.nodeValue:节点的值
3.nodeType:节点的类型
一、nodeName属性:节点的名称,就是只读的。
1.元素节点的nodeName与标签名相同
2.属性节点的nodeName是属性的名称
3.文本节点的nodeName永远是#text
4.文档节点的nodeName永远是#document
二、nodeValue属性:节点的值
1.元素节点的nodeValue是undifined或null
2.文本节点的nodeValue是文本自身
3.属性节点的nodeValue是属性的值
三、nodeType属性:节点的类型,是只读的。一下常用的集中节点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=gb18030">
<title>插入JS代码</title>
<script type="text/javascript">
document.write("开启JS之旅!");
</script>
</head>
</html>
可以把html文件和js代码分开,单独创建一个js文件保存js代码。
引用js代码: <script src="one.js"></script>
例:one.js文件:
alert("JS代码");
js文件不能直接运行,需要嵌入到html文件中执行。
我们可以将JavaScript代码放在html文件的任何位置,但一般放在head或者body部分;
放在<head>部分:浏览器解析head部分就会执行这个代码,然后才解析页面其余元素
放在<body>部分:JavaScript代码在网页读取到该语句的时候就会执行
注意:进行页面显示初始化的js必须放在head里,因为初始化都要求提前进行。
如果是通过实践调用执行function那么对位置没有要求。
一行的结束就被认定为语句的结束,通常在后面加上分号。
单行注释: 在内容前加//
多行注释: 以/* 开始,以*/结束
定义变量使用关键字var,变量必须以字母,下划线或美元符号开始。变量要先声明再赋值。
定义函数: function 函数名(){
函数代码;
}
函数的调用:直接写函数名即可。
JavaScript输出内容:
document.write("内容"+变量名);
输出多项内容,内容之间可用+号连接。
JavaScript警告:(alter消息会话框)
alter(字符串或变量)
JavaScript确认(confirm消息对话框):
语法:confirm(str);
参数说 str:在消息会话框中要显示的文本 返回值:Boolean值,当点击确定时返回true,当点击取消时返回false.
例:<script type="text/javascript">
var mymessage=connfirm("你喜欢JavaScript吗?");
if(mymessage==true){
document.write("很好,加油!");
}else{
document.write("js功能强大,要学习!");
}
</script>
javascript提问(prompt消息对话框)
prompt弹出消息对话框通常用于询问一些需要与用户交互的信息。
语法:prompt(str1,str2);
str1表要显示在消息对话框中的文本,不可修改
str2表文本框中的内容,可修改
javascript打开新窗口(window.open)
语法:window.open([URL],[窗口名称],[参数字符串]);
JavaScript关闭窗口(window.close)
语法:window.close();//关闭本窗口
或 窗口对象.close();//关闭指定窗口
文档对象模型DOM(document object model)定义访问和处理html文档的标准方法。DOM将html文档
呈现为带有元素、属性和文本的树结构(节点树)
通过ID获取元素: document.getElementById("id");
innerHTML:该属性用于获取或替换HTML元素的内容 语法:Object,.innerHTML
改变HTML样式: 语法 Object.style.property=new style;
属性property:backgroundColor、height、width、color、font、fontsize等。
Object为获取的元素对象
显示和隐藏(display属性): Object.sytle.display=value;
value取值:none 隐藏
block 显示
控制类名(className属性):设置或返回元素的class属性
语法:object.className=className;
创建数组: var myarr=new Array();//创建一个空的数组
或 var myarr=[10,0,50,60];
或var myarr=new Array(50,40,20);//创建数组并赋值
数组属性:length 语法:myarr.length;//获取数组的长度
二维数组:var myarr=new Array();
for(var i=0;i<2;i++){
myarr[i]=new Array();//先声明一维,再声明二维
for(var j=0;j<3;j++){
myarr[i][j]=i+j;//赋值
}
Switch语句:
switch(表达式){
case值1:
执行代码块1
break;
case值2:
执行代码块2
break;
。。。。。
default:
不同时执行的代码
}
继续循环(continue):continue的作用是仅仅跳过本次循环,而整个循环体继续执行
语句结构: for(.....){
if(特殊情况){
continue;
}
循环代码;
}
JavaScript事件:
onclick 鼠标单击事件
onmouseover 鼠标经过事件
onmouserout 鼠标移开事件
onchange 文本框内容改变事件
onselect 文本框内容被选中事件
onfocus 光标聚集
onblur 光标离开
onload 网页导入
onunload 关闭网页
什么是对象:JavaScript中所有事物都是对象,如字符串、数组、数值、函数等,每个对象都带有属性和方法。
对象的属性:反映该对象某些特定的性质的,如字符串长度,图像的长度等。
对象的方法:能够在对象上执行的动作,如表单的提交submit、时间的获取getYear等
var objectName=new Array();//使用new关键字定义对象
或者 var objectName=[];
访问对象属性的语法:objectName.propertyName;
访问对象的方法:objectName.methodName();
Date日期对象:
定义一个时间对象:var udate=nw Date();//当前电脑系统时间
var d=new Date(2012,10,1);//2012年10月1日
或var d=new Date('Oct 1,2012');
访问方法: 日期对象.方法名;
Date对象中处理时间和日期的常用方法:get/setDate() //返回/设置日期
get/setFullYear() //返回/设置年份
get/setMonth()
get/setHours()
get/setMinutes()
get/setSeconds()
get/setTime()
例:var mydate=new Date();
document.write(mydate+"<br>");//输出当前时间
document.write(mydate.getFullYear()+"<br>");//输出当前年份
mydate.setFullYear(1981);//设置年份
返回星期方法:getDay(),返回的是0-6的数字,0表示星期日。
var mydate=new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var mynum=mydate.getDay();
document.write(mydate.getDate());//输出getDate()获取值
document.write("今天是"+weekday[mynum]);//输出星期几
String字符串对象:
var mystr="i love javascript";
访问字符串对象的属性length: stringObject.length;//返回字符串的长度
将小写转换成大写: stringObjectName.toUpperCase();
返回指定位置的字符:charAt();
语法:stringObjectName.charAt(index);
返回指定字符串首次出现的位置: stringObjectName.indexOf(substring,startpos);
参数:substring:规定需检索的字符串值
startpos:规定字符串中开始检索的位置
字符串分割:split();
语法:stringObject.split(separator,limit);
参数:separator:从该参数指定的地方分割
limit:分割的次数
提取字符串substirng();
语法:stringObject.substring(startpos,stoppos);
参数:starpos:开始位置
stoppos:结束位置
提取指定数目的字符substr()
语法:stringObject.substr(startpos,length);
参数:startpos:提取的字符串起始位置
length:提取字符串的长度
Math对象:
Math对象属性: E //返回算术常量e(约等于2.718)
LN2 //返回2的自然对数(约等于0.693)
LN10 //返回10的自然对数(约等于2.302)
PI //圆周率(3.14159)
Math对象方法: abs(x) //返回数的绝对值
acos(x) //返回数的反余弦值
exp(x) //返回e的指数
floor(x) //对数进行向下取整
max(x,y) //取最大
round(x) //四舍五入
pow(x,y) //返回x的y次幂
sqrt(x) //平方根
random() //0-1之间的随机数
ceil(x) //向上取整
数组连接concat():用于连接两个或多个数组
指定分隔符连接数组元素join(): arrayObject.join(分隔符);
颠倒数组元素顺序reverse()
选定元素slice() ; arrayObject.slice(start,end);
数组排序:sort()
window对象:window对象是BOM的核心,window对象指当前的浏览器窗口
window对象方法:alert() 显示警告框
prompt() 显示可提示输入对话框
confirm() 确认对话框
open() 打开一个新的窗口
close() 关闭浏览器窗口
print() 打印当前窗口内容
。。。
JavaScript计时器:
计时器方法;setTimeout() //指定的延迟时间之后来执行的代码
claerTimeout() //取消setTimeout设置
setInterval() //每隔指定时间执行代码
clearInterval() //取消setInterval设置
例:设置一个计时器,每隔100秒调用clock()函数;
<script type="text/javascript">
var int=setInterval(clock,100);
function clock(){
var time=new Date();
document.getElementById("clock").value=time;
}
</script>
<form>
<input type="text" id="clock" size="50" />
</form>
History对象:history对象记录了用户曾经浏览过的页面URL,并可以实现浏览器前进与后退相似导航的功能。
语法: window.history.[属性|方法]
history对象属性: length 返回浏览器历史列表中的URL数量
history对象方法: back() 加载history列表中的前一个URL
forward() 加载history列表中的下一个URL
go() 加载history列表中的某个集体的页面
Location对象:location对象用于获取或设置窗体的URL,并且可以用于解析URL
语法:location.[属性|方法]
location对象属性:hash 设置或返回从井号#开始的URL
host 设置或返回主机名和当前URL的端口号
hostname 设置或返回当前URL的主机名
href 设置或返回完整的URL
port 设置或返回当前URL的端口号
location对象的方法;assign() 加载新的文档
reload() 重新加载当前文档
replace() 用新的文档替换当前文档
Navigator对象:Navigator对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。
对象属性:appCodeName 浏览器胆码名的字符串表示
appName 返回浏览器的名
appVersion 返回浏览器的平台和版本信息
platform 返回运行浏览器的操作系统平台
userAgent 返回由客户机发送服务器的user-agent头部的值
screen对象:screen对象用于获取用户的屏幕信息
语法:window.screen.属性
对象属性:availHeight 窗口可使用的屏幕高度
availWidth 窗口可使用的宽度
colorDepth 颜色位数
height 屏幕高度
whdth 屏幕宽度
获取屏幕的可用高度和宽度:
<script type="text/javascript">
document.write("可用宽度"+screen.availWidth);
document.write("可用高度"+screen.availHeight);\
</script>
DOM对象,控制HTML元素:
文档对象模型DOM(document Object Model)定义访问和处理HTML的标准方法。
DOM将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<h2><a href="http://www.baidu.com">javascript DOM</a></h2>
<p>对HTML元素进行操作,可添加,改变或移除CSS样式等</p>
<ul>
<li>JavaScript</li>
<li>DOM</li>
<li>CSS</li>
</ul>
</body>
</html>
HTML文档可以说是由节点构成的集合,DOM节点有:
1.元素节点:上述<html> <body> <p>等都是元素节点,即标签。
2.文本节点:向用户展示的内容,如<li> 中的JavaScript,DOM,CSS等文本
3.属性节点:元素的属性,如<a>标签的链接属性href。
节点属性:
方法 说明
nodeName 返回一个字符串,其内容是给定节点的名字
nodeType 返回一个整数,这个数值代表给定节点的类型
nodeValue 返回给定节点的当前值
遍历节点树:
方法 说明
childNode 返回一个数组,这个数组有给定的元素节点的子节点构成、
firstChild 返回第一个节点
lastChild 返回最后一个子节点
parentNode 返回一个给定节点的父节点
nextSibling 返回给定节点的下一个子节点
preiousSibling 返回给定节点的上一个子节点
DOM操作:
方法 说明
createElement(element) 创建一个新的元素节点
createTextNode() 创建一个包含给定文本的新文本节点
appendChild() 指定节点的最后一个子节点列表之后添加一个新的子节点
insertBefore() 将一个给定节点插入到一个给定元素的给定子节点的前面
removeChild() 从一个给定元素中删除一个子节点
replaceChild() 把一个给定父元素里的一个子节点替换为另一个节点
getElementByName()方法:返回带有指定名称的节点对象的集合
document.getElementByName(name)
该方法返回的是元素的数组,而不是一个元素,有length属性。
<script type="text/javascript">
function getElements(){
var x=document.getElementByName("alink");
alert(x.length);
}
<body>
<a name="alink" href="#">我是链接一</a><br/>
<a name="alink" href="#">我是链接二</a><br/>
<a name="alink" href="#">我是链接三</a><br/>
<a name="alink" href="#">我是链接四</a><br/>
<input type="button" οnclick="getElements()" value="几个链接"/>
</body>
getElementByTagName()方法:返回带有指定标签的节点对象的集合。
getElementByTagName(TagName);
getAttribute()方法:通过元素节点的属性名称获取属性的值。
elementNode.getAttribute(name);
1.elementNode:使用getElementById(),getElementByTagName()等方法获取到的元素的节点。
2.name:想要查询得元素节点的属性名称。
setAttribute()方法:增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。
elementNode.setAttribute(name,value);
1.name:要设置的属性名
2.value:要设置的属性值
节点属性:在文档对象模型(DOM)中,每个节点都是一个对象。DOM节点有三个重要的属性:
1.nodeName:节点的名称
2.nodeValue:节点的值
3.nodeType:节点的类型
一、nodeName属性:节点的名称,就是只读的。
1.元素节点的nodeName与标签名相同
2.属性节点的nodeName是属性的名称
3.文本节点的nodeName永远是#text
4.文档节点的nodeName永远是#document
二、nodeValue属性:节点的值
1.元素节点的nodeValue是undifined或null
2.文本节点的nodeValue是文本自身
3.属性节点的nodeValue是属性的值
三、nodeType属性:节点的类型,是只读的。一下常用的集中节点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9