JavaScript:DOM编程
1.节点及其类型
1)元素节点
2)属性节点:元素的属性,通常情况下, 操作属性节点直接通过 "元素节点.属性名" 的方式来读写属性值
3)文本节点:是元素的子节点,其内容为文本
例<p title="name">donot forget me</p>
element node : p
attribute node : title="name"
text node :donot forget me
2.js在html中的位置
在<head>中,写在window.onload = function(){ // js代码 };
window.onload事件,在文档加载完成后执行,故在这里可以获得任何元素。
3.如何获取元素节点
Element getElementById(String elementId):根据id属性获取对应的单个节点
NodeList getElementByTagName(String tagName):根据标签名获取指定节点的集合
NodeList getElementByName(String elementName):根据节点的name属性获取节点的集合
但IE的实现方式和W3C标准有差别:在html文档中,若某个节点(例如li)没有name属性,则IE使用getElementByName()不能获取到节点,但是火狐可以
4.获取属性节点
1)**可以通过Node.id(节点.属性)的方式来获取和设置属性节点的值
2)通过元素节点getAttributeNode(name)方法来获取属性节点,然后再通过nodeValue来读写属性值
5.获取元素节点的子节点(**只有元素节点才有子节点!!)
1)childNodes属性获取全部的子节点,但方法不实用。因为如果要获取指定的节点的指定子节点的结合,可以直接调用元素节点的getElementByTagName()方法来获取
2)firstChild属性获取第一个子节点
3)lastChild属性最后一个子节点
4)parentNode属性获取父节点
6.获取文本节点:
1)步骤:元素节点-->获取元素节点的子节点
2)若元素节点只有一个文本节点一个子节点
例如<li id="bj" name="BeiJing">北京</p>
可以先获取到指定的元素节点eleNode,然后利用eleNode.firstChild.nodeValue的方法来读写其文本节点的值
7.节点属性(nodeType、nodeName、nodeValue)
nodeType、nodeName、nodeValue是每个Node都有的属性,像id、name是具体某个节点所具有的属性
1)nodeName:代表当前节点的名字,只读属性。**如果给定节点是一个文本节点,nodeName是#text
2)nodeType:返回一个整数,这个数值代表给定节点是类型。只读属性。1--元素节点,2--属性节点,3--文本节点
**3)nodeValue:返回给定节点的当前值(字符串)。可读写属性
①元素节点,返回值是null
②属性节点,返回值是这个属性的值
③文本节点,返回值是这个文本节点的内容
8.创建一个元素节点
1).createElement(String elementName):按照给定的标签名创建一个新的元素节点。
方法只有一个参数:被创建的元素节点的名字,是一个字符串。
方法的返回值:是一个指向新建节点的引用指针,返回值是一个元素节点,所以它的nodeType属性值等于1
**新元素节点不会自动添加到文档里,它只是一个存在于JavaScript上下文的对象
9.创建一个文本节点
1).createTextNode(String textValue):创建一耳光包含着给定文本的新文本节点,返回值是一个指向新文本节点的引用指针
方法只有一个参数:新建文本节点锁包含的文本字符串,新元素节点不会自动添加到文档整里。
10.为元素节点添加子节点
1)appendChild(Node node)
var reference = element.appendChild(newChild);
给定子节点newChild将成为给定元素节点element的最后一个子节点
方法的返回值是一个指向新增子节点的引用指针
11.节点的替换
1).replaceChild():把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,lodChild)
返回值是一个指向已被替换的那个子节点的引用指针
2).该节点除了替换功能以外还有移动的功能
3).该方法只能完成单向替换,若需要使用双向替换,需要自定义函数
12.删除节点
1).removeChild():从一个指定元素里删除一个子节点
var reference = element.removeChild(node)
返回值是一个指向已被删除的子节点的引用指针,某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除
如果删除某个节点,但不知道其父节点,可以通过parentNode属性获取
13.插入节点
1).insertBefore():把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode)
节点newNode将被插入到元素节点element中并出现在targetNode的前面
节点targetNode必须是element元素的一个子节点
14.innerHTML属性
1).浏览器几乎都支持该属性,但不是DOM标准的组成部分
innerHTML属性可以用来读写某个给定元素里的HTML内容
15.其他属性
parentNode属性:获取给定元素的父节点
nextSibling属性:获取给定元素的上一个元素
previousSibling属性:获取给定元素的下一个元素
原文地址:http://blog.csdn.net/sd_tz_wzg/article/details/40784881