脚本宝典收集整理的这篇文章主要介绍了js实例教程-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

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-JavaScript DOM常用方法和属性实例讲解全部内容，希望文章能够帮你解决js实例教程-JavaScript DOM常用方法和属性实例讲解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。