这篇文章将教会大家如何查找和访问网页中的HTML元素。

一、找到HTML元素

通常,使用JavaScript,想操作HTML元素。要做到这一点,必须先找到元素。有几种方法可以做到这一点。

找到DOM中的HTML元素的最简单的方法,是利用元素的id。

使用id=”intro”找到元素 :

  1. varmyElement=documen\ ! o ! B J At.getElementById("intro");

如果找到元素s B L T,则该方法将返回元素作为对象 (赋值给myElement)。

元素没有被发现,myElement将是空的。

二、通过标签名称找到HTML元素

找到所有<p>元素:

  1. varx=d- a _ 1 G L Wocument.getElementsBi I HyTagName("p");

这个例子使用id=”m@ e fain”找到元素 , 并C Z x F – 7且在”ma2 E ein”r _ (里面找到所有的 <p> 元素:

  1. varx=docu% 2 { B k 2 6 % 4ment.getElementById("main");
  2. vary=x.getElementsByTagName("p");

三、通过类名称找到HTML元素

如果想找到同一类名称的所有HTML元素,使用ge9 R J * i ^ ntElementsByClassName()。

例:

返回所H g \ y L有class=”intro”的元素列表.

  1. varh n 5x=documenB f C U Y % W * *t.getElemr B N - 3 u XentsByClassName("intj . dro");

在Internet Explorer 8和早期版本中,按类名v C %查找元素不起作用。

四、通过CSS选择器找到HTML元素

如果想找到8 # p D a所有的HTML元素,匹配指定的CSS选择器 (id, 类名, 类型, 属性, 属性值, 等等), 使用querySelectorAll() 方法。

此示例返回所有class=”intro”的

元素列表。

  1. varx=document.querySelectorA9 # h ; t 6 u ell("p.intro");

quer$ I 6 WySelectorAll() 方法在Internetd 7 p ? – Q * m y Explorer 8和早期版本中不起作@ O n用。

五、通过HTML对象集合找到HTML元素

此示例查找id=”frJ ~ Nm1″的表单元素,在表单集合里,并显示所有的颜色值。

  1. v\ M ! l ! I - @ 3arx=document.forms["frm1"];
  2. vartext="";
  3. vari;
  4. for(i=0;i<x.length;i++){
  5. tex; m u f \ b Yt+=x.elements[i].value+"<br>R F A;";
  6. }
  7. document.getElementById("demo").innerHTML=text;

下面的HTML对象(或对象的集合)也可访问:

1. document.a\ ~ j nnchors

  1. <} M N Z;!DOCTYPEhtml>
  2. <htmllang="en"&gs V w | N V \t;
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>项目&6 h ! A 1 H . 1 5lt;/title] 1 h . & |>a o : , O;
  6. </head>
  7. <bodyst9 G )yle="background-color:aqua;">
  8. <aname="html">HTMLTutorial</a><br>
  9. <aname="css">CSSTutorial<L N b 7 + H \ P n/a><br>
  10. <aname="xml">XMLTutorial</a>&0 l Q 0 } X 4 h Glt;br>
  11. <pid="demo"></p>
  12. &! ^ e ^ llt;script>
  13. document.getElementById("demo").innerHTML=
  14. "Numberofanchorsare:"+document.anchors.length;
  15. </script>
  16. </body>
  17. &7 O o j C [ q u wlt;/html>

2. document.body

  1. <script>
  2. aler\ o z ct(document.body.innerHTML);
  3. </script>


3. document.embeds

  1. &lq Q 6 2 Ut;script>
  2. document. $ s I O o F.getElemenl u e / ~tById("demo").innerHTML=
  3. "Numberofembeds:"+document.embeds.length;
  4. </script>

4. document.head

  1. <script>
  2. do` i } |cument.getElew z N T [mentById("demo").innerHTML=document.head;
  3. </script>

5. document.images

  1. <!DOCTYPEhtml>
  2. <htmllang="en">$ 4 \ # X _
  3. <head; % & B&g# y # + @ * ~ zt;
  4. <] J | $ G | i &;metacharset="UTF-8">
  5. <title>项目</title>
  6. </heaz 0 S Jd>
  7. <body>
  8. <imgsrc% - i H c="pic_htmltree.gif">
  9. <imgsrc="r , : } g y ?pic_navigate.gif">
  10. <pid="demo"></p>
  11. <script>s ! [ r F w r
  12. document.getElementById("dem1 ) X ,o").innerHTML=
  13. "Numberofimages| # 6 : W $ 6 , j:"+document.i] o ! Q Pmages.length;
  14. </script>
  15. </B , s 0 ? m | l #bodj % Q h l I p \y>
  16. </html>

6. document.title

  1. <!DOCTYPEhtml/ B D>
  2. <htm\ A lllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>项目</title>
  6. </head>
  7. &l` d 9 it;bodystyle="background-color:aqua;">
  8. <pid="demo"></p>
  9. <script>
  10. document.getElementB_ N + X K L v ^ !yId("demo").innerHTML="Tht 2 ! V C Z k Eetitleofthisdocumentis:"+document.tS } k 3 1 /itle;
  11. &y d vlt;/script>
  12. &l[ u n 1 K pt;/body>
  13. </html>

HTML DOM允许JavaScriJ 5 & e F T Vpt获取和更改HTML元素的属性。

六、扩展

获取元素的属性值

getAtt? # o nribute()方法用于获取元素上指定属性的当前值。

以下示例获取锚元素的href和title属性的值。

  1. varlink=document.getElementById("demo");
  2. varhref; 0 #=link.getAttriX r ` B h % e \ ~bute("href");
  3. vartitle=link.getAttribute("title");

1. 在元素上设置属性

setAttribute()方法用于设置指定元素上的属性的值。

如果属性已经存在,则更新值;否则,将添加具有指定名称和值的新属性,将href属性的值设置为锚元素:

  1. varx=document.getElementsByTagName("a")[0];
  2. x.setAttribute("href","httW c jps://wwe 0 * { nw.baidu.com/css3/");

同样,可以使d u 1用setAttribute( )方法0 Z / u = T来更新或更改HTML& \ ? r J P (元素上现有属性的值。

  1. document.getElementsBy0 D & z )TagName("input")[0].setAttributQ ) s fe("type"~ } W = o i u G,"text");

完整代码:

  1. <!DOCTYPEhtml>
  2. <htt Q ) M _ W W 9 Oml>
  3. <titw 1 [ 7 w Ule>| P 2 R h项目<[ p r ( ^ ) n/title>
  4. <bodystyle="background-color:aqua;"&g? X v L /t;
  5. <p>单击按钮可将输y p , w | g n入按钮更改为输入字段:</p>
  6. <inputtype="butto# j b ? 8n"onclick="myFunc(this)"value="Clickme">
  7. <script>
  8. functionmyFunc(x){
  9. x.setAttribute("type","text");
  10. }
  11. </script>
  12. </body>
  13. </hb X w xtml>

2. 从元素中删除属性

remoP ` o % W @ + =veAttribute()方法用于从指定元素中删除属性。

本示例从锚元素中移除href属性:

  1. docz 9 A T H K ^ 4 -ument.gy ; # e oetW E [ : h \ElementsByTaZ t /gName("a")[0].removeA $ q K ZAttribute(B l ; @ E ,"href");

七、总结

本文: n C | B !基于JavaScript基础,介U L 3 _ Q ~ B {绍了Html元素,从最基本的通过标签名找Html元素,通过类名找Html元素。通过CSS选择器找Html元。最后扩展如何设置元素属性,如何去删除元素属性。通过丰富的效果图展示,能够帮助读者更好的了解Html元素。

代码很简单了,希望能够帮助你。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注