JavaScript DOM常用方法和属性实例讲解

1、getelementbyid方法

此方法返回一个有着给定id属性值的对象，例如一个img元素id值为logo：

<img src="a.jpg" id="logo" />

那么我们可以通过该方法建立该属性值的对象并赋给变量img：

var img = document.getelementbyid('logo');

注意：应该在body标签结束之前引入，不要放置于body标签开头。

2、getelementsbytagname方法

这个方法会返回包含所有指定参数标签的对象数组，它的参数为标签的名字。 

例如：

<h1>语言</h1>

<p>java</p>

<p>c++</p>

<h1>java web框架</h1>

<p>spring mvc</p>

<p>hibernate</p>

<script type="text/javascript">

    var p = document.getelementsbytagname('p');

    alert(p.length)

</script>

将会输出4，因为该页面中有4个<p>元素

3、getelementsbyclassname方法

这个方法可以通过一个元素的class属性来访问元素，参数为类名，返回值为具有相同类名元素的数组。 

例如：

<p class="test">

    <p>java</p>

</p>

<p class="test">

    <p>c++</p>

</p>

<script type="text/javascript">

    var p = document.getelementsbyclassname('test');

    alert(p.length)

</script>

将会输出2

4、getattribute方法

此方法不属于document对象，它只能通过元素节点对象调用。 

它的参数是你打算查询的属性的名字。 

例如：

<p title="编程语言">java、c++</p>

<p title="java框架">spring、hibernate</p>

<script type="text/javascript">

    var paras = document.getelementsbytagname("p");

    for(var i = 0; i < paras.length; i++)

        alert(paras[i].getattribute("title"));

</script>

将会弹出两个提示框分别是：编程语言、java框架

5、setattribute方法

setattribute方法用来对属性节点的值做出修改。类似getattribute，setattribute也只能用于元素节点。它有两个参数：你需要修改的属性的名字和你想修改的值。

<p title="编程语言">java、c++</p>

<p title="java框架">spring、hibernate</p>

<script type="text/javascript">

    var paras = document.getelementsbytagname("p");

    for(var i = 0; i < paras.length; i++)

    {

        paras[i].setattribute("title","hello");

        alert(paras[i].getattribute("title"));

    }

</script>

将会弹出两个提示框：都是hello

6、children属性

同样children不属于document对象，它也只能通过元素节点对象调用 

children属性可以用来获取一个元素的所有dom元素，返回包含这个元素所有子元素的数组。 

例如：

<p>java、c++</p>

<p>spring、hibernate</p>

<script type="text/javascript">

    var para = document.getelementsbytagname("body")[0];

    alert(para.children.length)

</script>

将会输出3，因为有两个<p…/>属性和一个<script…/>属性

7、childnodes属性

这个方法类似children方法，不过childnodes方法会返回一个元素包含的所有元素，包含文本节点。 

例如：

<p>java、c++</p>

<p>spring、hibernate</p>

<script type="text/javascript">

    var para = document.getelementsbytagname("body")[0];

    alert(para.childnodes.length)

</script>

将会输出6，因为有两个<p…/>属性和一个<script…/>属性，每个<p…/>属性和<script…/>各自包含一个文本元素。

8、nodetype属性

nodetype属性值可以让我们知道自己正在与哪一种节点打交道，它只能通过元素节点对象调用。其中： 

元素节点的nodetype为1，属性结点为2，文本节点为3

<p>java、c++</p>

<p>spring、hibernate</p>

<script type="text/javascript">

    var para = document.getelementsbytagname("body")[0].childnodes;

    for(var i = 0; i < para.length; i++)

        alert(para[i].nodetype);

</script>

将会输出3、1、3、1、3、1

9、firstchild和lastchild属性

node.firstchild等价于node.childnodes[0]， 

node.lastchild等价于node.childnodes[node.childnodes.length-1]

10、createelement方法

该方法可以创建一个元素节点，例如：

var para = document.createelement("p");

这仅仅只是创建一个元素节点对象，并没有插入到html中。

11、appendchild方法

如果我想让上面新创建的<p>节点成为某个元素的子节点，那么我们可以使用这个方法。例如：

var test = document.getelementbyid("testid");

var para = document.createelement("p");

test.appendchild(para);

上述代码的执行效果为将<p>元素插入到了id属性值为testid的节点中。

12、createtextnode方法

插入一个<p>元素后，我们可以通过createtextnode方法来为这个元素添加内容，例如：

<p id="insert"></p>

<script type="text/javascript">

    window.onload = function()

    {

        var para = document.createelement("p");

        var insert = document.getelementbyid("insert");

        insert.appendchild(para);

        var text = document.createtextnode("hello");

        para.appendchild(text);

    }

</script>

页面将会输出hello

13、insertbefore方法

insertbefore方法用于把一个新元素插入到一个现有的元素的前面。调用此方法你必须知道： 

（1）新元素：你想插入的元素（newelement） 

（2）目标元素：你想把这个新元素插入到哪个元素（targetelement）之前。 

（3）父元素：目标元素的父元素（parentelement）

parentelement.insertbefore(newelement,targetelement);

示例代码：

<p id="target">

    <p>java</p>

</p>

<script type="text/javascript">

    window.onload = function()

    {

        var para = document.createelement("p");

        var targetid = document.getelementbyid("target");

        var text = document.createtextnode("python");

        para.appendchild(text);

        targetid.insertbefore(para,targetid.children[0]);

    }

</script>

页面将会输出：python java