php 网站,国家企业信息系统公示系统下载,wordpress图册主题,电子商务网站建设 上海主要内容#xff1a;
节点5个常用的DOM方法#xff1a;getElementById、getElementByTagname、getElementByClassName、getAttribute和setAttribute详细内容:
1、文档#xff1a;DOM中的“D”如果没有document(文档),DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器…主要内容
节点5个常用的DOM方法getElementById、getElementByTagname、getElementByClassName、getAttribute和setAttribute详细内容:
1、文档DOM中的“D”如果没有document(文档),DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时DOM就在幕后悄然而生。它把你编写的网页文档转换为一个文档对象。
2、对象DOM中的“O”
对象是一种自足的数据集合。与特定某个对象相关联的变量成为这个对象的属性只能通过某个特定对象去调用的函数称为这个对象的方法。
JavaScript语言中的对象可以分为三种类型。
用户定义对象由程序员自从创建的对象。
内建对象内建在JavaScript语言里的对象例如Array、Math和Date等。
宿主对象由浏览器提供的对象。
3、模型DOM中的MDOM中的”M“代表着”Model“(模型)但说它代表着”Map“(地图)也是可以的。但他们都是某种事物的表现形式。就像一个模型火车代表着一列真正的火车那样。DOM代表着加载到浏览器窗口的当前网页。浏览器提供了网页的地图或者说模型而我们可以通过JavaScript去读取这张地图。要想从DOM获得信息必须先把各种表示和描述文档的图例弄明白。DOM把一份文档表示为一颗树这是我们理解和运用这一模型的关键。更具体地说DOM把文档表示为一颗家谱树。家谱树本身又是一种模型。家谱树的典型做法是表示一个人类家族的谱系并使用parent(父)、child(子)、sibling(兄弟)等记号来表明家族成员之间的关系。家谱树模型本身非常适合用来表示一份用(X)HTML语言编写出来的文档。
下面是一份非常基本的网页内容是一份购物清单。
!DOCTYPE html
html lang enheadmeta charset utf-8/titleShopping list/title/headbody h1What to buy/h1p title a gentle reminderDont forget to buy this stuff./pul id purchaseslia tin of beans/lili class saleCheese/lili class sale importantMilk/li/ul/body
/html
我们来分析一下在DOCTYPE之后一个打开了的html标签标识了整个文档的开始这个网页里的所有其他元素都包含在这个元素里面这表示它至少是一个父亲(parent)。又因为所有其他的元素都包含在其内部所以这个html标签既没有父亲也没有兄弟这个html就是树根。根元素是html不管从哪个角度来看html都是代表整个文档。接下来深入一层我们发现有head和body两个分支。
.....
如果把一个文档的各个元素想象成一颗家谱树我们就可以用同样的数据描述DOM不过与使用家谱树这个术语相比把文档称为节点树更准确。
4、节点节点(node)表示网络中的一个连接点。一个网络就是由一些节点构成的集合。原子是现实世界中的节点。文档是由节点构成的集合只不过此时的节点是文档树上的树枝和树叶而已。在DOM里有许多不同类型的节点。就像原子包含着亚原子颗粒那样也有很多类型的DOM节点包含着其他类型的节点。先看其中的三种元素节点、文本节点、属性节点。所谓元素节点DOM的原子就是元素节点(element node)。在上面那份购物清单文档时我们使用了诸如body、p和ul之类的元素。如果把Web上的文档比作大厦元素就是建造这座大厦的砖块这些元素在文档的布局形成了文档的结构。标签的名字就是元素的名字。文本段落元素的名字是p无序清单元素的名字是ul列表项的名字是li。元素可以包含其他元素。在上面那份购物清单文档里所有的列表项元素都包含在一个无序清单元素的内容。所谓文本节点在上面那份购物清单文档里p元素包含着”Dont forget to buy this stuff.“它是一个文本节点。text node在XHTML文档中文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含有文本节点。所谓属性节点属性节点用来对元素做出更具体的描述。几乎所有元素都有一个title属性而我们可以利用这个属性对包含在元素里的东西做出准确的描述p title a gentle reminderDont forget to buy this stuff./pCSSDOM并不是与网页结构打交道的唯一技术我们还可以通过CSS层叠样式表告诉浏览器怎么显示一份文档的内容。类似JavaScript脚本对样式的声明既可以嵌在文档的head部分(style标签之间也可以放在另外一个样式表文件里)。CSS声明元素样式的语法与JavaScript函数的定义语法很相似
selector{property:value;
}
在样式声明里我们可以定义浏览器在显示元素时使用的颜色、字体和字号如下
p{
color:yellow;
font-family:arial,sans-serif;
font-size:1.2em}继承(inheritance)是CSS技术中的一项强大功能例如如果我们为body元素定义了一些颜色或字体包含在body所有元素都将自动获得哪些样式。在某些场合当样式应用于一份文档时我们其实只想让那些样式作用于某个特定的元素。为了把某一个或几个元素与其他元素区别开来需要使用class属性或id属性。1、class属性
你可以在所有元素上任意应用class属性
p class specialThis paragraph has the special class /p
h2 class specialSo does this headline/h2
在样式表里可以像下面这样为class属性值相同的所有元素定义同一种样式
.special{font-style:italic;
}
还可以像下面这样利用class属性为一种特定类型的元素定义一种特定的样式:
h2.special{
text-transform:uppercase;
}2、id属性
id属性的用途是给网页里的某个元素加上一个独一无二的标识符如下
ul id purchases
在这样的样式表里可以像下面这样为有特定id属性值的元素定义一种独享的样式
#purchases{border: 1px solid white;background-color:#333color:#ccc;padding:1em
}
尽管id本身只能使用一次样式表还是可以利用id属性为包含在该特定元素里的其他元素定义样式。例如
#purchases li{font-weight:bold;
}
id属性就像是一个挂钩它一头连着文档里的某个元素另一头连着CSS样式表里的某个样式DOM也可以使用这种挂钩。获取元素
有3种方法可以获取元素节点分别是通过元素id、通过标签名字和类名字来获取。
1、getElementByIdDOM提供了一个名为getElementById的方法这个将返回一个与那个有着给定id属性值得元素节点对应的对象。但是请注意JavaScript区分大小写。它是document对象所特有的函数在脚本代码里函数名的后面必须有一对圆括号这对圆括号包含着函数的参数。getElementById方法只有一个参数就是你想要获得那个元素的id属性的值这个值必须放在单引号或者双引号里。
document.getElementById(id)
下面是一个例子
document.getElementById(purchases)这个调用将返回一个对象这个对象对应着document对象里的独一无二的元素那个元素的HTMLid属性值是purchases。你可以用typeof操作符来验证这一点。typeof操作符可以告我们它的操作数是一个字符串、数值、函数、布尔值还是对象。
如下
!DOCTYPE html
html lang enheadmeta charset utf-8/titleShopping list/title/headbody h1What to buy/h1p title a gentle reminderDont forget to buy this stuff./pul id purchaseslia tin of beans/lili class saleCheese/lili class sale importantMilk/li/ulscriptalert(typeof document.getElementById(purchases));/script/body
/html
运行之后会弹出一个alert对话框报告书document.getElementById(purchases)的类型-它是一个对象。
事实上文档中的每一个对象都是一个对象。利用DOM提供的方法可以得到任何一个对象。但是我们没有必要为为文档中的每一个元素都定义一个独一无二的id值。DOM提供了另一个方法来获取那些没有id属性的对象。2、getElementsByTagName
getElementByTagName方法返回一个对象数组每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById这个方法也是只有一个参数的函数它的参数是标签的名字
element.getElementsByTagName(tag)
它与getElementById方法有许多类似之处但是它返回的是一个数组。
例子
document.getElementByTagName(li)这个调用将返回一个对象数组每个对象分别对应着document对象中的一个列表项元素。与任何其他的数组一样我们可以利用length属性查出这个数组里的元素个数。
我们把原来的里中的script标签中的alert语句替换成这条语句
!DOCTYPE html
html lang enheadmeta charset utf-8/titleShopping list/title/headbody h1What to buy/h1p title a gentle reminderDont forget to buy this stuff./pul id purchaseslia tin of beans/lili class saleCheese/lili class sale importantMilk/li/ulscriptalert(document.getElementsByTagName(li).length);/script/body
/html
你会看到这份文档里的列表项元素的个数3。这个数组里的每个元素都是一个对象。可以利用循环语句和typeof操作符去遍历这个数组来验证这一点。例如
for(var i 0;idocument.getElementsByTagName(li).length;i){
alert(typeof document.getElementByTagName(li)[i]);
}
注意:即使在整个文档里这个标签里只有一个元素getElementByTagName也返回一个数组此时那个数组的长度是1。
为了改善代码的可读性只要把document.getElementByTagName(li)赋值给一个变量即可。
请把script标签中的alert语句替换成下面这些语句
var items document.getElementsByTagName(li);
for(var i 0;iitems.length;i){alert(typeof items[i])
}
即
!DOCTYPE html
html lang enheadmeta charset utf-8/titleShopping list/title/headbody h1What to buy/h1p title a gentle reminderDont forget to buy this stuff./pul id purchaseslia tin of beans/lili class saleCheese/lili class sale importantMilk/li/ulscriptvar items document.getElementsByTagName(li);for(var i 0;iitems.length;i){alert(typeof items[i])}/script/body
/html我们可以到有三个alert对话框显示消息都是”object“。
此外getElementsByTagName允许把一个通配符作为它的参数而这意味着文档里的每个元素都将在这个函数所返回的数组里占有一席之地。通配符(星号字符*)必须放在引号里这是为了让通配符与乘法操作符有所区别。如果你想知道某份文档中有多少个元素节点像下面这样使用通配符即可:alert(document.getElementsByTagName(*).length);
还可以把getElementsByTagName()与getElementById()结合起来一起使用。如果只想知道id属性值是purchases的元素包含了多少个列表项必须通过一个更具体的对象去调用这个方法如下var shopping document.getElementById(purchases);var items shopping.getElementsByTagName(*);
这两条语句执行完毕之后items数据将只包含id属性值是purchase的无序清单里的元素。具体到这个例子items数组里的长度刚好与这份文档里的列表项元素的总数相等
alert(items.length)
如果还需要跟多的证据下面这些语句将证明items数组里的每个值确实一个对象
for(var i 0;iitems.length;i){alert(typeof item[i]);
}
3、getElementsByClassName
HTML5 DOM中新增了一个令人期待已久的方法getElementsByClassName。这个方法让我们能够通过class属性中的类名来访问元素。
与getElementsByTagName()方法类似getElementsByClassName也是只接受一个参数就是类名getElementsByClassName(class)
这个方法与getElementsByTagName类似都是一个具有相同类名的元素的数组。下面这行代码返回的就是一个数组其中包含类名为sale的所有元素:
document.getElementsByClassName(sale);
使用这个方法还可以查找那些带有多个类名的元素。要指定多个类名只要在字符串参数中用空格分隔类名即可。例如
在script标签中添加这行alert代码
alert(document.getElementsByClassName(important sale).length);
你会发现只有一个元素同时带有important和sale类名。注意即使在元素的class属性中类名的顺序是sale important而非参数指定的important sale,也会照样匹配该元素。不仅类名的实际顺序不重要就算元素还带有更多的类名也没有关系。与使用getElementsByTagName一样也可以组合使用getElementsByClassName和getElementById。如果你想知道在id位purchases的元素中有多少类名包含sale列表项。可以先找到那个特定的对象然后再调用getElementsByClassName:
var shopping document.getElementById(purchases);
var sales shopping.getElementsByClassName(sale);
这样sales数组中就包含的就只是位于purchases列表项中的带有sale类的元素。
运行代码alert(sales.length);。盘点知识点一份文档就是一颗节点树节点分为不同的类型元素节点、属性节点和文本节点。getElementById将返回一个对象该对象对应着文档里的一个特定元素节点。getElementsByTagName和getElementsByClassName将返回一个对象数组它们分别对应着文档里的一组特定的元素节点。每个节点都是一个对象。
5、获取和设置属性
我们有三种获取特定元素的方法得到需要的元素之后我们就可以使用getAttribute方法获取它的各个属性。setAttribute()方法则可以更改属性节点的值。
getAttribute方法不属于document对象所有不能通过document对象来调用。它之只能通过元素节点对象调用。可以通过getElementsByTagName方法合用获取每个p元素的title属性如下所示
var paras document.getElementsByTagName(p);
for(var i 0;i paras.length;i){alert(paras[i].getAttribute(title));
}
例如
!DOCTYPE html
html lang enheadmeta charset utf-8/titleShopping list/title/headbody h1What to buy/h1p title a gentle reminderDont forget to buy this stuff./pul id purchaseslia tin of beans/lili class saleCheese/lili class sale importantMilk/li/ulscriptvar paras document.getElementsByTagName(p);for(var i 0;i paras.length;i){alert(paras[i].getAttribute(title));}/script/body
/html
会弹出什么呢
在文档文件中只有一个p元素并且它有title属性。假如这份文档有更多个p元素并且没有title属性则getAttribute(title)方法会返回null值。在JavaScript里面null的含义是没有值。我们可以试试再添加一个p标签
pThis is just a test /p
如
!DOCTYPE html
html lang enheadmeta charset utf-8/titleShopping list/title/headbody h1What to buy/h1p title a gentle reminderDont forget to buy this stuff./ppThis is just a test /pul id purchaseslia tin of beans/lili class saleCheese/lili class sale importantMilk/li/ulscriptvar paras document.getElementsByTagName(p);for(var i 0;i paras.length;i){alert(paras[i].getAttribute(title));}/script/body
/html重新加载这个页面。会出现什么呢我们可以修该脚本让它只在title属性有值时才弹出消息。我们增加一条if语句来检查getAttribute的返回值是不是null。
如下
var paras document.getElementsByTagName(p);
for(var i 0;i paras.length;i){var title_text paras[i].getAttribute(title);if(title_text ! null)alert(title_texg);
}
重新加载又会出现什么呢setAttribute
它允许我们对属性节点的值做出修该。与getAttribute一样。setAttribute也只能用于元素节点object.setAttribute(attribute,value)
例子
var shopping document.getElementById(purchases);
alert (shopping.getAttribute(title));
shopping.setAttribute(title,a list of goods);
alert (shopping.getAttribute(title));
运行之后会出现什么呢
还有一个细节通过setAttribute对文档做出修改后在通过浏览器的view source(查看源代码)选项去查看文档的源代码时看到的仍然是改变前的属性值也就是说setAttribute做出的修该不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式先加载文档的静态内容在动态刷新动态刷新不影响文档的静态内容。这是DOM的真正威力对页面内容进行刷新却不需要在浏览器里刷新页面。
