介绍几个js DOM的常用方法 获取元素节点[b]getElementById    getElementsByTagName    getElementsByClassName[/b] 先写一个简单的网页做测试： [b]1.  getElementById  [/b] [b]　1.先定义变量 var contentId = document.getElementById("contentId");[/b] [b]　2.然后输出对象 contentId 就返回id为 contentId  的元素对象（ <p id="contentId" style="width:500px; height: 30px;background-color: #ccc"> ）。见下图：[/b] [img]http://files.jb51.net/file_images/article/201702/2017020415551417.png[/img] [b]2.  getElementsByTagName   [/b] [b]   1.还是先定义变量  var contentTag = document.getElementsByTagName("p"); [/b] [b]　2.接着我输出 contentTag ，它返回 HTMLCollection [ <p#contentId>, <p.contentClass> ] 共两个，一个以#开头表示id，另一个以.开头表示Class name。[/b] [b]　3.继续 contentTag[0]  输出 <p id="contentId" style="width:500px; height: 30px;background-color: #ccc">[/b] [b]　contentTag[1] 输出 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">[/b] [img]http://files.jb51.net/file_images/article/201702/2017020415551418.png[/img] 由此可知 getElementsByTagName   返回的是数组！ [b]3.  getElementsByClassName  [/b] [b] 　1. var contentClass = document.getElementsByClassName("contentClass");[/b] [b]　 2. contentClass 输出 HTMLCollection [ <p.contentClass> ] 返回一个元素对象数组，即使只有一个。[/b] [b]　 3. contentClass[0] 输出 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">[/b] [img]http://files.jb51.net/file_images/article/201702/2017020415551519.png[/img] 我们常用的还有 getAttribute，setAttribute，ChildNodes, nodeType, nodeValue, firstChild, lastChild 方法获取一些信息。 [b]4.分别用 getAttribute 和 setAttribute 获取和设置属性：[/b] [img]http://files.jb51.net/file_images/article/201702/2017020415551520.png[/img] 改变style属性后： [img]http://files.jb51.net/file_images/article/201702/2017020415551521.png[/img] [b]5.那么这是childNOdes：[/b] [img]http://files.jb51.net/file_images/article/201702/2017020415551522.png[/img] 也就是说， <p></p> 在遇到块元素时，块元素之间会有一个换行符 <br> ,浏览器在查找子节点时会将它视为一个文本节点。从图中也可以看出 childNodes 返回的也是数组。 那如果是<p#contentId>呢？ [img]http://files.jb51.net/file_images/article/201702/2017020415551523.png[/img] nodeType 的值有12种，常用的也就三种：[b]1表示元素节点，2表示属性节点，3表示文本节点。[/b] nodeValue 不仅可以获取文本节点的值，还可以改变文本节点的值。 [img]http://files.jb51.net/file_images/article/201702/2017020415551524.png[/img] js的dom方法还有好多，可以看看这个[url=http://www.w3school.com.cn/jsref/index.asp]W3school JS参考手册[/url]，相信对初学者有很大帮助。 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程素材网！