JavaScript 节点分类与获取元素的方法

节点:

在DOM中有许多不同类型的节点。主要分为三类:元素节点,文本节点,属性节点。

元素节点:

像<body>,<p>,<ul>之类的元素。

文本节点:
像<p>This is an example</p>.其中This is an example 是一个文本节点。文本节点总是被包含在元素节点的内部。

属性节点:

属性节点用来对元素做出更具体的描述。例如,几乎所有的元素都有一个title属性,<p title="an example"></p> 其中title="an example"是一个属性节点。

获取元素的方法:

1.getElementById:

这个方法将返回一个与那个有着特定id属性值的元素节点对应的对象。使用形式如下:

doucument.getElementById(id);

2.getElementsByTagName:
getElementsByTagName 方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById,这个方法也是只有一个参数的函数,它的参数是标签的名字.使用形式如下:
document.getElementsByTagName("li");

3.getElementsByClassName:

这个方法让我们能够通过class属性中的类名来访问元素。这个方法的返回值也与getElementByClassName类似,都是一个具有相同类名的元素的数组。使用形式如下:
document.getElementsByClassName(class);

获取和设置属性:
1.getAttribute:
getAttribute 是一个函数。它只有一个参数--你打算查询的属性的名字:

object.getAttribute(attribute);

2.setAttribute:
setAttribute()允许我们对属性节点的值做出修改:

object.setAttribute(attribute,value);

3.childNodes:

在一棵节点树上,childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素全部子元素的数组:
element.childNodes

4.nodeType:

每一个节点都有nodeType属性,这个属性可以让我们知道自己正在与哪一种节点打交道,差劲的一点是nodeType的值并不是英文。使用形式如下:

node.nodeType;

nodeType属性总共有12种可取值,但其中仅有3种具有实用价值。

元素节点的nodeType属性值是1.

属性节点的nodeType属性值是2.

文本节点的nodeType属性值是3.

5.nodeValue:

如果想改变一个文本节点的值,那就使用DOM提供的nodeValue属性,它用来得到(和设置)一个节点的值。

node.nodeValue.

6.firstChild和lastChild:

firstChild表示的是childNodes的第一个元素,lastChild表示的是childNode的最后一个元素。

猜你喜欢

转载自www.cnblogs.com/xfy9/p/10337867.html