DOM对象，控制HTML元素

野性酷女 2022-06-11 02:50 185阅读 0赞

## 1 认识DOM ##

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

先来看看下面代码:

[![5375ca640001c67307860420.jpg][]][5375ca640001c67307860420.jpg]

将HTML代码分解为DOM节点层次图:

[![5375ca7e0001dd8d04830279.jpg][]][5375ca7e0001dd8d04830279.jpg]

HTML文档可以说由节点构成的集合，DOM节点有:

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

节点属性:

[![5375c953000117ee05240129.jpg][]][5375c953000117ee05240129.jpg]

遍历节点树:

[![53f17a6400017d2905230219.jpg][]][53f17a6400017d2905230219.jpg]

以上图ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。

DOM操作:

[![538d29da000152db05360278.jpg][]][538d29da000152db05360278.jpg]

注意:前两个是document方法。

## 2 getElementsByName()方法 ##

返回带有指定名称的节点对象的集合。

语法：

document.getElementsByName(name)

与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。

注意:

1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

看看下面的代码:

[![5375d5ec00012bac06210322.jpg][]][5375d5ec00012bac06210322.jpg]

运行结果:

[![53795f0b0001233404580318.jpg][]][53795f0b0001233404580318.jpg]

## 3 getElementsByTagName()方法 ##

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

语法:

document.getElementsByTagName(Tagname)

说明:

1. Tagname是标签的名称，如p、a、img等标签名。

2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

看看下面代码，通过getElementsByTagName()获取节点。

[![53ec174a0001404206540436.jpg][]][53ec174a0001404206540436.jpg]

## 4 区别getElementByID,getElementsByName,getElementsByTagName ##

以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。

1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。

2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。

3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。

把上面的例子转换到HTML中，如下:

<input type="checkbox" name="hobby" id="hobby1">  音乐

input标签就像人的类别。

name属性就像人的姓名。

id属性就像人的身份证。

方法总结如下:

[![5405263300018bcf05760129.jpg][]][5405263300018bcf05760129.jpg]

注意：方法区分大小写

通过下面的例子(6个name="hobby"的复选项，两个按钮)来区分三种方法的不同:

1. document.getElementsByTagName("input")，结果为获取所有标签为input的元素，共8个。

2. document.getElementsByName("hobby")，结果为获取属性name="hobby"的元素，共6个。

3. document.getElementById("hobby6")，结果为获取属性id="hobby6"的元素，只有一个，"跑步"这个复选项。

## 5 getAttribute()方法 ##

通过元素节点的属性名称获取属性的值。

语法：

elementNode.getAttribute(name)

说明:

1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。

2. name：要想查询的元素节点的属性名字

看看下面的代码，获取h1标签的属性值：

[![538d242700019ec809330432.jpg][]][538d242700019ec809330432.jpg]

运行结果:

h1标签的ID ：alink  
h1标签的title ：getAttribute()获取标签的属值

## 6 setAttribute()方法 ##

setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：

elementNode.setAttribute(name,value)

说明：

1.name: 要设置的属性名。

2.value: 要设置的属性值。

注意：

1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。

2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

[5375ca640001c67307860420.jpg]: /images/20220611/a0c9f2cfbdf44e4fa89397ed1bb67df4.png
[5375ca7e0001dd8d04830279.jpg]: /images/20220611/7cf44affdf204eda8dd9915905ce6893.png
[5375c953000117ee05240129.jpg]: /images/20220611/77eb586c973849bd967f77f30461e9e4.png
[53f17a6400017d2905230219.jpg]: /images/20220611/d33ccdd8307046278ec46f78078becb8.png
[538d29da000152db05360278.jpg]: /images/20220611/bc7b0bc4b5b640dcaa6f9bb416e00589.png
[5375d5ec00012bac06210322.jpg]: /images/20220611/91218f44aaef4ae986b3588aa2f64461.png
[53795f0b0001233404580318.jpg]: /images/20220611/02d6536b3ed84bc184204c2463a07335.png
[53ec174a0001404206540436.jpg]: /images/20220611/f8cf83c431244005a370b7548ca6da85.png
[5405263300018bcf05760129.jpg]: /images/20220611/232a4f8b7bee44ecad81cb750c97d48a.png
[538d242700019ec809330432.jpg]: /images/20220611/35a6abc7a3114e72b51aaf2a6fcefa9f.png