html文档中怎么区分节点对象的,HTML DOM文档对象查找元素的方法

一、HTML DOM 节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:文档是一个文档节点。

所有的HTML元素都是元素节点。

所有 HTML 属性都是属性节点。

文本插入到 HTML 元素是文本节点。

注释是注释节点。

二、Document 对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象是 HTML 文档的根节点。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

三、HTML DOM 定义的查找对象的方法

HTML文档常见的方法:getElementsByName()

getElementsByTagName()

getElementsByClassName()

getElementById()

(一)、getElementsByName()

1、定义和用法

getElementsByName() 方法可返回带有指定名称的对象的集合。

2、语法

document.getElementsByName(name)

3、参数

name 必须。元素的名称。

4、实例

getElementsByName()实例

var f=document.getElementsByName("fruit");

alert(f.length);

}

苹果:

香蕉:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

5、效果图

(二)、getElementsByTagName()

1、定义和用法

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

提示： 参数值 “*” 返回文档的所有元素。

2、语法

document.getElementsByTagName(tagname)

3、参数

tagname String 必须。你要获取元素的标签名。

4、返回值

NodeList 对象 指定标签名的元素集合

5、实例

getElementsByTagName()实例

单击按钮来改变这一段中的文本。

点我

document.getElementsByTagName("P")[0].innerHTML="Hello World";

};1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

6、效果

单击按钮前：

单击按钮后：

(三)、getElementsByClassName()

1、定义和使用

getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。

注意: Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。

2、语法

document.getElementsByClassName(classname)

3、参数

classname String 必须。你需要获取的元素类名。

多个类名使用空格分隔，如 “test demo”。

4、实例

getElementsByClassName()实例

border: 1px solid black;

margin: 5px;

}

.example {

border: 1px solid black;

margin: 5px;

}

实例一

P 元素在在第一个样式为 class="example" 的 Div 元素中。Div 的索引值为 0。

P 元素在在第一个样式为 class="example color" 的 Div 元素中。Div 的索引值为 0。

P 元素在在第二个样式为 class="example color" 的 Div 元素中。Div 的索引值为 1。

点击按钮修改第一个类为 "example" 的 div 元素的背景颜色。

获取到的对象的长度(数量)：

---

实例二

样式 class="example" 的 Div 元素

另外一个样式 class="example" 的 Div 元素

样式为 class="example" 的 p 元素。

这是一个插入在 p 元素中样式 class="example" 的span 元素 。

点击按钮修改所有样式 class="example" 的背景颜色。

点我

注意: Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。

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

53

54

55

56

5、效果图

单击按钮前：

单击按钮后：

(四)、getElementsById()

1、定义和使用

getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。

2、方法

getElementsById()

3、语法

document.getElementsById(id)

4、参数

id String 必须。你需要获取的元素id。

5、实例

getElementById()

单击按钮来改变这一段中的文本。

点我

document.getElementById("demo").innerHTML="Hello World";

};1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

6、效果图

单击按钮前

单击按钮后