js常用DOM方法详解

　　

介绍几个js DOM的常用方法

　　

获取元素节点<强> getElementById ,,getElementsByTagName ,,getElementsByClassName

　　

先写一个简单的网页做测试:

　　 　　/* 　　test.html 　　*/& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=皍tf - 8”比; 　　& lt; title> test 　　& lt;/head> 　　& lt; body> 　　& lt; p id="版权id”有些过火的在这段的id是版权id。你们有些过火;/p> 　　& lt; p class=" contentClass”在这段的类名是contentClass。;/p> 　　& lt;/body> 　　& lt;/html> 　　 　　

<强> 1只;getElementById 

　　

　　

　　

js常用DOM方法详解

　　

<强> 2只;getElementsByTagName ,

　　

　　

　　

　　

　　

　　

由此可知getElementsByTagName ,返回的是数组!

　　

<强> 3只;getElementsByClassName 

　　

　　

　　

　　

js常用DOM方法详解

　　

我们常用的还有getAttribute, setAttribute,子节点的时候存在缺陷,nodeType, nodeValue,接着,lastChild方法获取一些信息。

　　

<强> 4。分别用getAttribute和setAttribute获取和设置属性:

　　

js常用DOM方法详解

　　

改变风格属性后:

　　

js常用DOM方法详解

　　

<强> 5。那么这是子节点的时候存在缺陷:

　　

js常用DOM方法详解

　　

也就是说,& lt; p> & lt;/p>在遇到块元素时,块元素之间会有一个换行符& lt; br>,浏览器在查找子节点时会将它视为一个文本节点。从图中也可以看出子节点的时候存在缺陷返回的也是数组。

　　

那如果是& lt; p # contentId>呢?

　　

js常用DOM方法详解

　　

nodeType的值有12种,常用的也就三种:<强> 1表示元素节点,2表示属性节点,3表示文本节点。

　　

nodeValue不仅可以获取文本节点的值,还可以改变文本节点的值。

　　

js常用DOM方法详解

　　

js的dom方法还有好多,可以看看这个W3school js参考手册,相信对初学者有很大帮助。

　　

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

js常用DOM方法详解