首页 > 代码库 > JavaScript:DOM编程
JavaScript:DOM编程
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属性：获取给定元素的下一个元素
JavaScript:DOM编程