当前位置：
  1. 首页
  2. 精品源码
  3. CMS模板 / 插件
  4. WordPress
  5. 正文

这篇文章将教会大家如何查找和访问网页中的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. 

  2. vary=x.getElementsByTagName("p");
    3.

三、通过类名称找到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. 

  2. vartext="";
    3. 

  3. vari;
    4. 

  4. for(i=0;i<x.length;i++){
    5. 

  5. tex; m u f \ b Yt+=x.elements[i].value+"<br>R F A;";
    6. 

  6. }
    7. 

  7. document.getElementById("demo").innerHTML=text;
    8.

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

1. document.a\ ~ j nnchors

    

  1. <} M N Z;!DOCTYPEhtml>
    2. 

  2. <htmllang="en"&gs V w | N V \t;
    3. 

  3. <head>
    4. 

  4. <metacharset="UTF-8">
    5. 

  5. <title>项目&6 h ! A 1 H . 1 5lt;/title] 1 h . & |>a o : , O;
    6. 

  6. </head>
    7. 

  7. <bodyst9 G )yle="background-color:aqua;">
    8. 

    9. 

  9. <aname="html">HTMLTutorial</a><br>
    10. 

  10. <aname="css">CSSTutorial<L N b 7 + H \ P n/a><br>
    11. 

  11. <aname="xml">XMLTutorial</a>&0 l Q 0 } X 4 h Glt;br>
    12. 

    13. 

  13. <pid="demo"></p>
    14. 

    15. 

  15. &! ^ e ^ llt;script>
    16. 

  16. document.getElementById("demo").innerHTML=
    17. 

  17. "Numberofanchorsare:"+document.anchors.length;
    18. 

  18. </script>
    19. 

    20. 

  20. </body>
    21. 

  21. &7 O o j C [ q u wlt;/html>
    22.

2. document.body

    

  1. <script>
    2. 

  2. aler\ o z ct(document.body.innerHTML);
    3. 

  3. </script>
    4.


3. document.embeds

    

  1. &lq Q 6 2 Ut;script>
    2. 

  2. document. $ s I O o F.getElemenl u e / ~tById("demo").innerHTML=
    3. 

  3. "Numberofembeds:"+document.embeds.length;
    4. 

  4. </script>
    5.

4. document.head

    

  1. <script>
    2. 

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

  3. </script>
    4.

5. document.images

    

  1. <!DOCTYPEhtml>
    2. 

  2. <htmllang="en">$ 4 \ # X _
    3. 

  3. <head; % & B&g# y # + @ * ~ zt;
    4. 

  4. <] J | $ G | i &;metacharset="UTF-8">
    5. 

  5. <title>项目</title>
    6. 

  6. </heaz 0 S Jd>
    7. 

  7. <body>
    8. 

    9. 

  9. <imgsrc% - i H c="pic_htmltree.gif">
    10. 

  10. <imgsrc="r , : } g y ?pic_navigate.gif">
    11. 

    12. 

  12. <pid="demo"></p>
    13. 

    14. 

  14. <script>s ! [ r F w r
    15. 

  15. document.getElementById("dem1 ) X ,o").innerHTML=
    16. 

  16. "Numberofimages| # 6 : W $ 6 , j:"+document.i] o ! Q Pmages.length;
    17. 

  17. </script>
    18. 

    19. 

  19. </B , s 0 ? m | l #bodj % Q h l I p \y>
    20. 

  20. </html>
    21.

6. document.title

    

  1. <!DOCTYPEhtml/ B D>
    2. 

  2. <htm\ A lllang="en">
    3. 

  3. <head>
    4. 

  4. <metacharset="UTF-8">
    5. 

  5. <title>项目</title>
    6. 

  6. </head>
    7. 

  7. &l` d 9 it;bodystyle="background-color:aqua;">
    8. 

    9. 

  9. <pid="demo"></p>
    10. 

    11. 

  11. <script>
    12. 

  12. document.getElementB_ N + X K L v ^ !yId("demo").innerHTML="Tht 2 ! V C Z k Eetitleofthisdocumentis:"+document.tS } k 3 1 /itle;
    13. 

  13. &y d vlt;/script>
    14. 

    15. 

  15. &l[ u n 1 K pt;/body>
    16. 

  16. </html>
    17.

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

六、扩展

获取元素的属性值

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

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

    

  1. varlink=document.getElementById("demo");
    2. 

  2. varhref; 0 #=link.getAttriX r ` B h % e \ ~bute("href");
    3. 

  3. vartitle=link.getAttribute("title");
    4.

1. 在元素上设置属性

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

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

例

    

  1. varx=document.getElementsByTagName("a")[0];
    2. 

  2. x.setAttribute("href","httW c jps://wwe 0 * { nw.baidu.com/css3/");
    3.

同样，可以使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. 

  2. <htt Q ) M _ W W 9 Oml>
    3. 

  3. <titw 1 [ 7 w Ule>| P 2 R h项目<[ p r ( ^ ) n/title>
    4. 

    5. 

  5. <bodystyle="background-color:aqua;"&g? X v L /t;
    6. 

    7. 

  7. <p>单击按钮可将输y p , w | g n入按钮更改为输入字段:</p>
    8. 

    9. 

  9. <inputtype="butto# j b ? 8n"onclick="myFunc(this)"value="Clickme">
    10. 

    11. 

  11. <script>
    12. 

  12. functionmyFunc(x){
    13. 

  13. x.setAttribute("type","text");
    14. 

  14. }
    15. 

  15. </script>
    16. 

    17. 

  17. </body>
    18. 

  18. </hb X w xtml>
    19.

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元素。

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

上一篇 DevSecOps 调查：60％ 的开发者发布代码速度增长了 2 倍
下一篇 Python优秀代码实践：性能、内存和可用性！

相关文章