DOM基础知识
2011-02-07 16:38
148 查看
备注:由于胃出血，DOM的例子(还是很重要很好的，一共有五个)没有敲。现在将核心基础知识总结在此
DOM ：DOM是Document Object Model文档对象模型的缩写
关于什么是节点：
如果说Java是面向对象编程，那么DOM是面向节点编程
1,整个文档就是一个文档节点(即document)。
2,每一个HMTL标签都是一个元素节点。
3,标签中的文字则是文本节点。
4,标签的属性是属性节点。
一切都是节点……
1,关于元素节点的操作：
查找元素节点
方法(1)：getElementById() 寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点
注意此方法只能用于document对象，即只有document可以调用此方法。
方法(2)：getElementsByTagName()寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，常用的属性有length。
该方法不必非得用在整个文档上(即不是只有document可以调用)。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。
比如：
var eduSelectElement=document.getElementById("edu");
var eduOptionsElements=eduSelectElement.getElementsByTagName("option");
获得了eduSelectElement节点下的所有标签名为option的元素节点
var eduOptionsElements=document.getElementsByTagName("option");
获得了整个文档下的标签名为option的元素节点
方法(3)：getElementsByName()寻找有着给定name属性的所有元素，返回值是一个集合，常用的属性有length。
注意：注意此方法只能用于document对象，即只有document可以调用此方法；这点和getElementsByTagName()不一样
创建元素节点
createElement()按照给定的标签名创建一个新的元素节点。是document调用此方法。
方法的返回值：是一个指向新建节点的引用指针。
注意此节点不会自动添加到document里面。
2,关于节点的操作
hasChildNodes()该方法用来检查一个元素是否有子节点
注意：文本节点和属性节点不可能再包含任何子节点！！！
可以利用此方法如果返回值为真，再利用firstChild或者lastchild来此元素的第一个或者最后一个子元素
replaceChild()把一个给定父元素里的一个子节点替换为另外一个子节点.即调用时父节点.replaceChild()
其返回值是一个指向已被替换的那个子节点的引用指针。
如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中
尤其要注意这两点：
(1):是父节点调用此方法
(2):注意返回值
举例：
<body>
您喜欢的城市:<br>
<ul id="test">
<li id="bj" value="beijing" >北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing"> 重庆</li>
</ul>
您喜欢的游戏:<br>
<ul>
<li id="fk" value="fangkong">反恐</li>
<li id="ms" value="moshou">魔兽</li>
<li id="cq" value="chuanqi">传奇</li>
</ul>
</body>
注意:要是把城市里的第一个节点替换为游戏里的节点，那么是整体替换！！而不是简简单单的把"北京"替换为"反恐"
即城市里的<li id="bj" value="beijing" >北京</li>变成了<li id="fk" value="fangkong">反恐</li>
appendChild()为给定元素增加一个子节点。该方法通常与 createElement() createTextNode() 配合使用
insertBefore()把一个给定节点插入到一个给定元素节点的某个子节点的前面。如var reference = element.insertBefore(newNode,targetNode);
即节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.
该方法通常与 createElement() 和 createTextNode() 配合使用
注意：
(1)节点 targetNode 必须是 element 元素的一个子节点。
(2)DOM 没有提供 insertAfter() 方法
removeChild()从一个给定元素里删除一个子节点，即父节点.removeChild()。当删除某个节点可用parentNode属性获得其父节点
说明:某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除。
ChildNodes()遍历子节点。返回一个数组，这个数组由给定元素节点的子节点构成。因为属性节点和文本节点没有子节点，所以
这个方法是元素节点所特有的。
此方法经常配合firstChild(等价于ChildNodes[0])和lastchild使用。
nextSibling: 返回一个给定节点的下一个兄弟节点。
parentNode：返回一个给定节点的父节点。
注意:
(1)parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。
(2)document 节点没有父节点。
previousSibling：返回一个给定节点的上一个兄弟节点
innerHTML
用于向一个标签里插入HTML。使用起来很方便。
浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。
3,DOM节点的属性
每个节点都具备以下属性：nodeName，nodeType，nodeValue
如果节点是元素节点，nodeName返回这个元素的名称
如果节点是属性节点，nodeName返回这个属性的名称
如果节点是文本节点，nodeName返回一个内容为#text 的字符串
注意nodeType的返回值是整数
如果给定节点是属性节点，nodeValue返回值是这个属性的值。
如果给定节点是文本节点，nodeValue返回值是这个文本节点的内容。
如果给定节点是元素节点，nodeValue返回值是 null
4,关于属性节点的操作
注意：属性节点不是元素节点的孩子
得到属性节点的方法：element.getAttributeNode("属性名"),其返回值是一个属性节点
说明:这个方法的实际意义不大,因为我们一般的操作是想得到某个属性的值。
得到属性节点的值的两个方法:
方法1:先利用element.getAttributeNode("属性名")返回一个属性节点然后调用.nodeValue()
方法2:直接利用element.getAttribute("属性名")
总结:方法1在不同的浏览器支持不一样，性能显得不稳定。所以一般采用方法2
element.setAttribute()给元素节点添加一个新的属性值或改变它的现有属性的值。
5,关于文本节点的操作
注意：文本节点是元素节点的孩子
创建文本节点：
createTextNode()创建一个包含着给定文本的新文本节点。方法的返回值是一个指向新建文本节点引用指针。
新元素节点不会自动添加到document里
得到文本节点的两个方法：
var liElements=document.getElementsByTagName("li");
for(var i=0;i<liElements.length;i++){
方法1：
alert(liElements[i].childNodes[0].nodeName);
alert(liElements[i].childNodes[0].nodeType);
alert(liElements[i].childNodes[0].nodeValue);
方法2：
alert(liElements[i].firstChild.nodeName);
alert(liElements[i].firstChild.nodeType);
alert(liElements[i].firstChild.nodeValue);
}
设置文本节点值的两个方法:
方法1：
liElements[i].childNodes[0].nodeValue="南京";
方法2：
liElements[i].firstChild.nodeValue="古都南京";
总结：
一定要清楚文本节点是元素节点的孩子，但是属性节点不是。
所以它们的创建和得到等方式是不一样的。
DOM ：DOM是Document Object Model文档对象模型的缩写
关于什么是节点：
如果说Java是面向对象编程，那么DOM是面向节点编程
1,整个文档就是一个文档节点(即document)。
2,每一个HMTL标签都是一个元素节点。
3,标签中的文字则是文本节点。
4,标签的属性是属性节点。
一切都是节点……
1,关于元素节点的操作：
查找元素节点
方法(1)：getElementById() 寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点
注意此方法只能用于document对象，即只有document可以调用此方法。
方法(2)：getElementsByTagName()寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，常用的属性有length。
该方法不必非得用在整个文档上(即不是只有document可以调用)。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。
比如：
var eduSelectElement=document.getElementById("edu");
var eduOptionsElements=eduSelectElement.getElementsByTagName("option");
获得了eduSelectElement节点下的所有标签名为option的元素节点
var eduOptionsElements=document.getElementsByTagName("option");
获得了整个文档下的标签名为option的元素节点
方法(3)：getElementsByName()寻找有着给定name属性的所有元素，返回值是一个集合，常用的属性有length。
注意：注意此方法只能用于document对象，即只有document可以调用此方法；这点和getElementsByTagName()不一样
创建元素节点
createElement()按照给定的标签名创建一个新的元素节点。是document调用此方法。
方法的返回值：是一个指向新建节点的引用指针。
注意此节点不会自动添加到document里面。
2,关于节点的操作
hasChildNodes()该方法用来检查一个元素是否有子节点
注意：文本节点和属性节点不可能再包含任何子节点！！！
可以利用此方法如果返回值为真，再利用firstChild或者lastchild来此元素的第一个或者最后一个子元素
replaceChild()把一个给定父元素里的一个子节点替换为另外一个子节点.即调用时父节点.replaceChild()
其返回值是一个指向已被替换的那个子节点的引用指针。
如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中
尤其要注意这两点：
(1):是父节点调用此方法
(2):注意返回值
举例：
<body>
您喜欢的城市:<br>
<ul id="test">
<li id="bj" value="beijing" >北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing"> 重庆</li>
</ul>
您喜欢的游戏:<br>
<ul>
<li id="fk" value="fangkong">反恐</li>
<li id="ms" value="moshou">魔兽</li>
<li id="cq" value="chuanqi">传奇</li>
</ul>
</body>
注意:要是把城市里的第一个节点替换为游戏里的节点，那么是整体替换！！而不是简简单单的把"北京"替换为"反恐"
即城市里的<li id="bj" value="beijing" >北京</li>变成了<li id="fk" value="fangkong">反恐</li>
appendChild()为给定元素增加一个子节点。该方法通常与 createElement() createTextNode() 配合使用
insertBefore()把一个给定节点插入到一个给定元素节点的某个子节点的前面。如var reference = element.insertBefore(newNode,targetNode);
即节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.
该方法通常与 createElement() 和 createTextNode() 配合使用
注意：
(1)节点 targetNode 必须是 element 元素的一个子节点。
(2)DOM 没有提供 insertAfter() 方法
removeChild()从一个给定元素里删除一个子节点，即父节点.removeChild()。当删除某个节点可用parentNode属性获得其父节点
说明:某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除。
ChildNodes()遍历子节点。返回一个数组，这个数组由给定元素节点的子节点构成。因为属性节点和文本节点没有子节点，所以
这个方法是元素节点所特有的。
此方法经常配合firstChild(等价于ChildNodes[0])和lastchild使用。
nextSibling: 返回一个给定节点的下一个兄弟节点。
parentNode：返回一个给定节点的父节点。
注意:
(1)parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。
(2)document 节点没有父节点。
previousSibling：返回一个给定节点的上一个兄弟节点
innerHTML
用于向一个标签里插入HTML。使用起来很方便。
浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。
3,DOM节点的属性
每个节点都具备以下属性：nodeName，nodeType，nodeValue
如果节点是元素节点，nodeName返回这个元素的名称
如果节点是属性节点，nodeName返回这个属性的名称
如果节点是文本节点，nodeName返回一个内容为#text 的字符串
注意nodeType的返回值是整数
如果给定节点是属性节点，nodeValue返回值是这个属性的值。
如果给定节点是文本节点，nodeValue返回值是这个文本节点的内容。
如果给定节点是元素节点，nodeValue返回值是 null
4,关于属性节点的操作
注意：属性节点不是元素节点的孩子
得到属性节点的方法：element.getAttributeNode("属性名"),其返回值是一个属性节点
说明:这个方法的实际意义不大,因为我们一般的操作是想得到某个属性的值。
得到属性节点的值的两个方法:
方法1:先利用element.getAttributeNode("属性名")返回一个属性节点然后调用.nodeValue()
方法2:直接利用element.getAttribute("属性名")
总结:方法1在不同的浏览器支持不一样，性能显得不稳定。所以一般采用方法2
element.setAttribute()给元素节点添加一个新的属性值或改变它的现有属性的值。
5,关于文本节点的操作
注意：文本节点是元素节点的孩子
创建文本节点：
createTextNode()创建一个包含着给定文本的新文本节点。方法的返回值是一个指向新建文本节点引用指针。
新元素节点不会自动添加到document里
得到文本节点的两个方法：
var liElements=document.getElementsByTagName("li");
for(var i=0;i<liElements.length;i++){
方法1：
alert(liElements[i].childNodes[0].nodeName);
alert(liElements[i].childNodes[0].nodeType);
alert(liElements[i].childNodes[0].nodeValue);
方法2：
alert(liElements[i].firstChild.nodeName);
alert(liElements[i].firstChild.nodeType);
alert(liElements[i].firstChild.nodeValue);
}
设置文本节点值的两个方法:
方法1：
liElements[i].childNodes[0].nodeValue="南京";
方法2：
liElements[i].firstChild.nodeValue="古都南京";
总结：
一定要清楚文本节点是元素节点的孩子，但是属性节点不是。
所以它们的创建和得到等方式是不一样的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- web开发基础知识之html常用标签和dom结构
- HTML DOM基础知识
- ExtJs基础知识总结：Dom、IFrame和TreePanel、TabPanel（三）
- JS基础知识（dom，bom操作）
- Dom 结点创建 基础知识
- javascript中DOM部分基础知识总结
- 【VB6】使用VB6创建和访问Dom树【爬虫基础知识】
- JS之DOM基础知识总结
- JS基础知识之:DOM学习
- 【知了堂学习笔记】_Jquery基础知识之DOM操作（二）
- Dom 结点创建 基础知识
- DOM 基础知识
- 关于dom的一些基础知识-来自w3shool.com.cn
- Dom 结点创建【基础知识】
- C#-WebForm-JS知识：基础部分、BOM部分、DOM部分、JS事件
- 4 HTML&JS等前端知识系列之Dom的基础
- jQuery基础知识点（DOM操作）
- JavaScript DOM基础知识总结（二）
- 【黑马程序员】DOM基础知识
- javascript基础知识梳理-DOM