javascript 获取html dom节点元素的方法,JS 5种常用的DOM方法获取元素

节点的概念

5个常用 DOM 方法

# 节点

元素节点：像

等，这种构建了 DOM 树的节点，相当于大厦的砖头

文本节点：内容由文本构成，比如

节点中的字 “Don't fool me” 就是文本节点

属性节点：对元素做出更具体的描述，属性节点总是被包含在元素节点中

为了把某一个或者某一类元素和其他元素区分开，需要使用 class 属性 或 id 属性。

# 5种常用的DOM方法，获取元素

getElementById

该方法将返回一个与那个有着给定 id 属性值的元素节点对应的对象。它是 document 对象特有的函数。想要获得的那个元素的 id 属性的值，这个 id 值必须放在单引号 或 双引号里。

document.getElementById (id)

比如

document.getElementById ("purchases")

这个调用将返回一个对象，这个对象对应着 document 对象里的独一无二的元素，那个元素的 HTML id 属性值是 purchases。

然而，一般说来，用不着为文档里的每一个元素都定义一个独一无二的 id 值，DOM 提供了另一种方法来获取那些没有 id 属性的对象

2. getElementByTagName

此方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。

document.getElementByTagName (tag)

比如

document.getElementByTagName (“li”)

这个调用将返回一个对象数组，每个对象分别对应着 document 对象中的一个列表项元素。

getElementByTagName 允许把通配符(*)作为参数，这样就意味着文档里的每个元素都将在这个函数所返回的数组里占有一席之地。通配符需双引号引起来，像这样 “*”。这是为了让通配符与乘法操作有所区别。

如果想知道某个文档里到底有多少个元素节点，这样就行

alert(document.getElementByTagName("*").length);

3. getElementByClassName

这是 H5 DOM 新增的。这个方法让我们能够通过 class 属性中的类名访问元素。只接受一个参数。

getElementByClassName(class)

比如

document.getElementByClassName("sale")

使用该方法还可以找到带有多个类名的元素。要指定多个类名，只要在字符串参数中用空格分隔类名即可。

alert(document.getElementByClassName("important sale").length);

此时，你可能会看到跳出的弹框中，表示只有一个元素匹配，因为只有一个元素同时带有 “important” 和 “sale” 类名。即使在元素的 class 属性中，类名的顺序是 “sale important” 而不是参数中指定的顺序，也照样会匹配。不仅类名的顺序不重要，而且就算元素还带有更多类名也没有关系。

此处总结一句话：文档中的每个元素节点都是一个对象。不仅如此，这些对象中的每一个都具有一系列非常有用的方法，归功于DOM。

接下来介绍节点对象的属性和方法。

得到需要的元素以后，我们就可以设法获取它的各个属性。getAttribute 方法就是用来干这个的。相应的，setAttribute 方法则可以更改属性节点的值。

4. getAttribute

它是一个函数。它只有一个参数

object.getAttribute (attribute)

getAttribute 不属于 document 对象，所以不能通过 document 对象调用。它只能通过元素节点对象调用。

比如说，可以和 getElementByTagName 方法合用，获取每个

元素的 title 属性

1 var paras = document.getElementByTagName("p");2 for (var i=0; i < paras.length; i++) {3 alert (paras[i].getAttribute("title"));4 }

具体可敲代码验证。

前面1~4都是用来获取信息。第5个不一样，是用来修改信息。

5. setAttribute

它只能用于元素节点。

object.setAttribute(attribute,value)

比如

1 var shopping = document.getElementById("purchases");2 shopping.setAttribute("title", "a list of goods");

第一个语句得到了 id 是 purchases 的元素，第二条语句把这个元素的 title 属性值设置为 a list of goods.

明天的任务就是把书上的例子用代码实现一下，并总结跨度应该对应书中的第4~8章节。明天见咯~~~