js增强for循环,js加强用聚脂布吗
一. DOM
DOM: DOM=DocumentObject模型,文档对象模型。DOM可以以独立于平台和语言的方式访问和修改文档的内容和结构。换句话说,这是表示和处理HTML或XML文档的一种常见方式。需要注意的是,DOM的设计是基于对象管理组(OMG)的,所以可以在任何编程语言中使用。
文档——HTML文档或xml文档
o:object文档对象的属性和方法
男:型号
DOM是xml(html)的基于树的API。
DOM树:节点的层次结构。
DOM将文档表示为家谱(父亲、儿子、兄弟)
DOM定义了节点和许多节点类型的接口,以表示XML节点的许多方面。
二、DOM的结构
三。节点
根据DOM,HTML文档中的每个组件都是一个节点。DOM是这样规定的:
整个文档是一个文档节点。
每个HTML标签都是一个元素节点。
HTML元素中包含的文本是一个文本节点。
每个HTML属性都是一个属性节点。
评论属于评论节点。
四。节点级别
节点之间有层次关系。
HTML中的所有节点形成一个文档树(或节点树)。每个元素、属性、文本等。表示树中的一个节点。树从文档节点开始,然后继续分支,直到树的最低层的所有文本节点。
动词(verb的缩写)节点及其类型
结节
*从结构图可以看出,整个文档是一个文档节点。
*每个HMTL标签是一个元素节点。
*标签中的文本是一个文本节点。
*标签的属性是一个属性节点。
*一切都是节点.
节点
一棵树的概念从图中很清楚,顶端就是“根”。节点之间有父子关系,祖孙关系,兄妹关系。从图中也能看出这些关系。直接联系就是父子关系。而有父亲是兄妹关系.
不及物动词查找和访问节点
您可以通过多种方式找到想要操作的元素:
通过使用getElementById()和getElementsByTagName()方法
通过使用元素节点的parentNode、firstChild和lastChild属性
七。查找元素节点
getElementById()
查找一个给定id属性值的元素,返回值是一个给定id属性值的元素节点。如果不存在这样的元素,则返回null。
var OE element=document . getelementbyid(sID)
此方法只能用于文档对象。
Type= text value=国庆60周年 id=tid
功能测试(){
var username element=document . getelementbyid(" tid ");
//获取元素的值
警报( username element . value: username element . value )
//获取元素的类型
alert( username element . type: username element . type
}
getElementsByName()
找到所有具有给定name属性的元素,这个方法将返回一组节点,这些节点可以被视为一个数组。该集合的length属性等于当前文档中具有给定name属性的所有元素的总数。
表单名称=form1
Type= text name= tname value=国庆60周年_1/br
Type= text name= tname value=国庆60周年_2/br
Type= text name= tname value=国庆60周年_3/br
type= button name= ok value= save id= ok
/表单
功能测试(){
var tname array=document . getelementsbyname( tname )。
alert(tname array . length);
for(var I=0;i tnameArray.lengthi ){
window.alert(tnameArray[i].值);
}
}
type= text name= username value=国庆60周年_1/br
type= text name= username value=国庆60周年_2/br
type= text name= username value=国庆60周年_3/br
type= button name= ok value= save id= ok br
scriptlanguage=JavaScript
//方法返回数组类型。
var username elements=document . getelementsbyname( username );
for(vari=0;i usernameElements.lengthi ){
//获取元素的类型
//alert(usernameElements[i].类型)
//获取元素值的值
//alert(usernameElements[i].值);
//采用函数直接量的方法
usernameElements[i].onchange=function(){
警惕(这个。值);
}
}
/脚本
输入类型=文本名称=用户名值=国庆60年_1/br
输入类型=文本名称=用户名值=国庆60年_2/br
输入类型=文本名称=用户名值=国庆60年_3/br
输入类型=按钮名称=确定值=保存id=好的英国铁路公司
脚本语言=JavaScript
//该方法返回是数组类型
var用户名元素=文档。getelements byname(“用户名”);
for(var I=0;i usernameElements.lengthi ) {
//获取元素的类型
//alert(usernameElements[i].类型)
//获取元素价值的值
//alert(usernameElements[i].值);
//采用函数直接量的方法
usernameElements[i].onchange=function(){
警惕(这个。值);
/脚本
getElementsByTagName()
寻找有着给定标签名的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的长度属性等于当前文档里有着给定标签名的所有元素的总个数。
var元素=文档。getelementsbytagname(标记名);
var元素=元素。getelementsbytagname(标记名);
该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。
var容器=文档。getelementbyid(" sid ");
var元素=容器。getelementsbytagname(" p ");
警报(元素。长度);
////处理投入
//varinputElements=document。getelementsbytagname(“input”);
////输出投入标签的长度
////alert(输入元素。长度);
//for(vari=0;我输入长度;i ){
//if(inputElements[i].打字!= button ){//提交
//alert(inputElements[i].值);
//}
//}
//处理挑选
////获取挑选标签
//varselectElements=document。getelementsbytagname( select );
////获取挑选下的子标签
//for(varj=0;j selectElements.lengthj ){
//varoptionElements=select elements[j].getElementsByTagName( option );
//for(vari=0;i optionElements.lengthi ){
//alert(optionElements[i].值);
//}
//}
vartextareaElements=document。getelementsbytagname( textarea );
alert(textareaElements[0]).值);
//for(var I=0;我输入长度;i ){
//if(inputElements[i].打字!= button ){//提交
//alert(inputElements[i].值);
//处理挑选
////获取挑选标签
//var选择元素=文档。getelementsbytagname( select );
////获取挑选下的子标签
//for(var j=0;j selectElements.lengthj ){
//var option elements=select elements[j].getElementsByTagName( option );
//for(var I=0;i optionElements.lengthi ){
//alert(optionElements[i].值);
var textarea元素=文档。getelementsbytagname( textarea );
alert(textareaElements[0]).值);
varinputElements=文档。getelementsbytagname(“input”);
for(vari=0;我输入长度;i ){
if(inputElements.type!=提交){
输入元素[i].onchange=function(){
警报(此值)
};
}
varselectElements=document。getelementsbytagname( select );
for(vari=0;我选择selectElements.lengthi ){
选择元素[我].onchange=function(){
警惕(这个。值);
}
}
var输入元素=文档。getelementsbytagname(“input”);
for(var I=0;我输入长度;i ){
if (inputElements.type!=提交){
输入元素[i].onchange=function(){
警报(此值)
var选择元素=文档。getelementsbytagname( select );
for(var I=0;我选择selectElements.lengthi ) {
选择元素[我].onchange=function(){
警惕(这个。值);
}
八、parentNode、firstChild以及最后一个孩子
这三个属性parentNode、firstChild以及最后一个孩子可遵循文档的结构,在文档中进行"短距离的旅行"。
请看下面这个超文本标记语言片段:
在上面的超文本标记语言代码中,第一个任务描述是tr元素的首个子元素(第一胎),而最后一个任务描述是tr元素的最后一个子元素(最后一个孩子).
此外,tr是每个任务描述元素的父节点(父节点).
vartextareaElements=document。getelementsbytagname( textarea );
for(vari=0;i textareaElements.lengthi ){
textareaElements[i].onchange=function(){
alert(this . value);
};
}
var textarea elements=document . getelementsbytagname( textarea );
for(var I=0;i textareaElements.lengthi ) {
textareaElements[i]。onchange=function(){
alert(this . value);
}
九。检查是否有子节点。
hasChildNodes()
该方法用于检查一个元素是否有子节点,返回值为真或假。
var boolean value=element . haschildnodes();
文本节点和属性节点不能再包含任何子节点,因此这两类节点的hasChildNodes方法的返回值始终为false。
如果hasChildNodes方法的返回值为false,则ChildNodes、firstchild、lastchild将为空数组和空字符串。
hasChildNodes()
varselectElements=document . getelementsbytagname( select );
alert(selectElements[0])。hasChildNodes())
varinputElements=document . getelementsbytagname( input );
for(vari=0;I输入长度;i ){
alert(inputElements[i].hasChildNodes());
}
var select elements=document . getelementsbytagname( select );
alert(selectElements[0])。hasChildNodes())
var input elements=document . getelementsbytagname( input );
for(var I=0;I输入长度;i ){
alert(inputElements[i].hasChildNodes());
}
X.根节点
有两种特殊的文档属性可用于访问根节点:
document.documentElement
文档.正文
第一个属性可以返回存在于XML和HTML文档中的文档根节点。
第二个属性是对HTML页面的特殊扩展,它提供了对body标记的直接访问。
Xi。DOM节点信息
每个节点都有一个属性,该属性包含关于该节点的一些信息。这些属性是:
节点名(节点名)
nodeName属性包含节点的名称。
var name=node.nodeName
元素的节点名是标签名。
属性的节点名是属性名。
文本的节点名总是#text。
文档的节点名总是#document。
注意:nodeName中包含的html元素的标记名总是大写。
节点值(节点值)
NodeValue:返回给定节点的当前值(字符串)。
如果给定节点是一个属性节点,则返回值是该属性的值。
如果给定的节点是文本节点,则返回值是该文本节点的内容。
如果给定节点是元素节点,返回值为null。
nodeValue是读/写属性,但不能设置元素节点的NodeValue属性的值。
但是,您可以为文本节点的nodeValue属性设置一个值。
var Li=document . getelementbyid(" Li ");
if(li.firstChild.nodeType==3)
Li.firstChild.nodeValue="国庆60周年";
NodeType(节点类型)
NodeType:返回一个整数,表示给定节点的类型。
nodeType属性返回的整数值对应12种类型的节点,常用的有三种:
节点。元素节点- 1 -元素节点
节点。属性节点- 2 -属性节点
节点。文本节点- 3 -文本节点
NodeType是只读属性。