JS详解[Object HTMLDivElement]和[Object Object]

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

<code>&lt;!DOCTYPE html PUBLIC </code><code>"-//W3C//DTD XHTML 1.0 Transitional//EN"</code> <code>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</code><code>&gt;</code>

<code>&lt;html xmlns=</code><code>"http://www.w3.org/1999/xhtml"</code><code>&gt;</code>

<code>&lt;head&gt;</code>

<code>&lt;meta http-equiv=</code><code>"Content-Type"</code> <code>content=</code><code>"text/html; charset=utf-8"</code> <code>/&gt;</code>

<code>&lt;title&gt;无标题文档&lt;/title&gt;</code>

<code>&lt;script src=</code><code>"jQuery/jquery-1.6.2.js"</code> <code>type=</code><code>"text/javascript"</code><code>&gt;&lt;/script&gt;</code>

<code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>

<code> </code><code>$(</code><code>function</code><code>(){</code>

<code>      </code><code>var</code> <code>temp=$(</code><code>".one"</code><code>);</code><code>//[Object Object]</code>

<code>      </code><code>for</code><code>(</code><code>var</code> <code>i=0;i&lt;temp.length;i++){</code>

<code>        </code><code>// alert(temp[i])//[Object HTMLDivElement]</code>

<code>          </code><code>var</code> <code>str1=temp[i].innerHTML.replace(</code><code>"2"</code><code>,</code><code>"5"</code><code>);</code>

<code>         </code><code>temp[i].innerHTML=str1;</code>

<code>         </code><code>}</code>

<code>    </code><code>})</code>

<code> </code><code>function</code> <code>change(){</code>

<code>     </code><code>//案例1</code>

<code>     </code><code>//[Object HTMLDivElement]</code>

<code>    </code><code>/* var id11=document.getElementById("id1");</code>

<code>     </code><code>alert(id11);</code>

<code>     </code><code>id11.innerHTML ='12345';*/</code>

<code>     </code> 

<code>     </code><code>//案例2</code>

<code>     </code><code>//[Object Object]</code>

<code>    </code><code>/* alert($("#id1"));</code>

<code>     </code><code>$("#id1").html("1234");*/</code>

<code>     </code><code>//案例3</code>

<code>     </code><code>var</code> <code>temp=$(</code><code>".one"</code><code>);</code><code>//[Object Object]</code>

<code>     </code><code>for</code><code>(</code><code>var</code> <code>i=0;i&lt;temp.length;i++){</code>

<code>         </code><code>alert(temp[i])</code><code>//[Object HTMLDivElement]</code>

<code>         </code><code>var</code> <code>str1=temp[i].innerHTML.replace(</code><code>"5"</code><code>,</code><code>"3"</code><code>);</code>

<code>    </code><code>}</code>

<code> </code><code>}</code>

<code> </code><code>/**</code>

<code> </code><code>总结：</code>

<code> </code><code>以上可知道一个[Object HTMLDivElement] 其实就相当于一个div元素</code>

<code>  </code><code>那么尤其是我们根据class名称获取多个一个[Object HTMLDivElement]</code>

<code>  </code><code>根据i值取出每一个值之后，我们使用innerHTML方法可以进行文本操作</code>

<code> </code><code>*/</code>

<code>&lt;/script&gt;</code>

<code>&lt;/head&gt;</code>

<code>&lt;body&gt;</code>

<code>&lt;div class=</code><code>"one"</code> <code>id=</code><code>"id1"</code><code>&gt;123&lt;/div&gt;</code>

<code>&lt;div class=</code><code>"one"</code> <code>id=</code><code>"id2"</code><code>&gt;426&lt;/div&gt;</code>

<code>&lt;div class=</code><code>"one"</code> <code>id=</code><code>"id3"</code><code>&gt;729&lt;/div&gt;</code>

<code>&lt;a href=</code><code>"javascript:void(0)"</code> <code>onclick=</code><code>"change()"</code><code>&gt;改变&lt;/a&gt;</code>

<code>&lt;/body&gt;</code>

<code>&lt;/html&gt;</code>

本文转自 小夜的传说 51CTO博客，原文链接：http://blog.51cto.com/1936625305/1427025，如需转载请自行联系原作者