DOM基础知识

备注:由于胃出血,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="古都南京";

总结:
一定要清楚文本节点是元素节点的孩子,但是属性节点不是。
所以它们的创建和得到等方式是不一样的。

时间: 2024-11-02 07:52:35

DOM基础知识的相关文章

JavaScript DOM操作表格及样式_基础知识

一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.createElement('caption'); table.appendChild(caption); caption.appe

JavaScript DOM进阶方法_基础知识

DOM自身存在很多类型,在上一章中有介绍,比如Element类型:表示的是元素节点;再比如Text类型;表示的是文本节点; 一 DOM类型 类型名                        说明 Node                 表示所有类型值的统一接口,IE不支持; Document             表示文档类型; Element              表示元素节点类型; Text                 表示文本节点类型; Comment           

浅析JS操作DOM的一些常用方法_基础知识

getElementById(): 获取有指定惟一ID属性值文档中的元素 getElementsByName(name): 返回的是数组 getElementsByTagName(): 返回具有指定标签名的元素子元素集合 getAttribute(): 返回指定属性名的属性值 document.getElementsByTagName("a")[0].getAttribute("target"); setAttribute(): 添加指定的属性,并为其赋指定的值.

JavaScript操作HTML DOM节点的基础教程_基础知识

因为 DOM 的存在,这使我们可以通过 JavaScript 来获取.创建.修改.或删除节点. NOTE:下面提供的例子中的 element 均为元素节点.获取节点 父子关系 element.parentNode element.firstChild/element.lastChild element.childNodes/element.children 兄弟关系 element.previousSibling/element.nextSibling element.previousEleme

用JavaScript获取DOM元素位置和尺寸大小的方法_基础知识

在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识. 基础概念 为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLeft clientL

在javascript中对于DOM的加强_基础知识

一.DOM DOM: DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.换句话说,这是表示和处理一个HTML或XML文档的常用方法.有一点很重要,DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言.D:文档 – html 文档 或 xml 文档O:对象 – document 对象的属性和方法M:模型DOM 是针对xml(html)的基于树的API.DOM树:节点(node)的层次.

js对象关系图 方便dom操作_基础知识

js对象关系图 JavaScript 对象参考手册 本参考手册描述每个对象的属性和方法,并提供实例. Array Boolean Date Math Number String RegExp Global Browser 对象参考手册 本参考手册描述每个对象的属性和方法,并提供实例. Window Navigator Screen History Location HTML DOM 对象参考手册 本参考手册描述每个对象的属性和方法,并提供实例. Document Anchor Area Base

JavaScript 学习笔记(十三)Dom创建表格_基础知识

Dom基础-创建表格 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().但第一种有可能在IE上有问题,所以推荐使用第二种. 1.insertRow(index):index从0开始 这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前.默认的insertRow()函数相当于 insertRow(-1),将新行添加到表的最后.一般我们在使用的时候都是: objTable.insertRow (ob

JAVA AJAX教程第二章-JAVASCRIPT基础知识

开篇:JAVASCRIPT是AJAX技术中不可或缺的一部分,所以想学好AJAX以及现在流行的AJAX框架,学好JAVASCRIPT是最重要的.这章我给大家整理了一些JAVASCRIPT的基础知识.常用代码和事件汇总. 一.基础知识: 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,