javascript 第一节DOM和BMO详解
2011-07-10 17:07
246 查看
BOM（Browser object Model）提供了一组访问浏览器各种功能部件的途径，例如浏览器窗口，浏览器历史（例如window,location）等。
DOM（Document object Model）提供了访问浏览器中网页文档中个元素的途径，包含页面上超链接，表单，表格，图像等各种html元素以及内容。
BOM和DOM的关系飞非常密切。实际上BOM的window对象中包含一个document的属性，该属性是对DOM模型的document对象的应用。代表了当前窗口中网页文档所对应的document对象，可以通过该属性访问访问网页中的各种内容。在通过脚本实现的各种脚本应用中，更多的对网页内容的操作，所以DOM更受广泛应用，DOM也成为标准化进程的焦点，所以BOM往往被忽略，而将BOM和DOM统称为DOM。
在BOM中window对象是对顶层对象，该对象总是代表当前浏览器窗口，对浏览器窗口以及对对浏览器窗口文档的访问，均是通过window对象访问。
例如：window.alert();window.history();window.location.href=www.cnblogs.com;
即使对DOM中的document对象的访问，也是通过window对象进行，例如：window.document.write(str);所以window对象是脚本中全局对象，任何对象的使用都得最溯到window对象访问，对于脚本中出现的未明确的标识符，解析器总是尝试在window对象中寻找。所以在使用各种对象是，window对象可以省略。
例如：alter();history.forward();loaction.href=www.cnblogs.com;document.write(str);
标注DOM是在不断定义和完善的。DOM按其内容可分为5部分：
1.核心DOM:适用于XLM雨HTML专用的接口。
2.XML dom:Xml专用接口
3.HTML dom： html主用接口
4.DOM事件模型：定义DOM能够响应的事件；
5.CSS DOM:css专用接口
核心DOM：
一。核心DOM 定义了Node，Document和Element接口
node接口是所有接口的顶层接口，Node中定义了属性和方法被其他接口所继承，也就是说node接口中定义了适用于所有节点的属性和方法。在浏览器中，NODE接口并不是具体的浏览器对象，该接口中定义的方法和属性直接通过具体的节点对象进行调用，例如通过Document类型的节点的document对象调用，通过文档各element类型节点进行调用。
NODE中定义了所有适用于节点的属性和方法，与HTML相关的部分属性如下：
1.nodeName属性：String类型，表示具体节点的名称。
2.nodeValue属性：String类型，表示节点的值。改值只对text类型的节点有效，表示标记中对应的文本
3.attributes属性：该属性只用于Element类型的节点。返回节点的所有属性节点组成的NamedNodeMap,namedNodeMap是一个"nodeName/nodevalue"
的列表每一项对应节点的一个属性节点，nodeName为属性名称，nodeValue为属性值。例如：
<html>
<head></head>
<body>
<table id="tb" border="1"> .............</table>
</body>
</html>
在改例子中<table>的attributes的属性返回一个NamedNodeMap节点列表。第一个节点的nodeName为"id",nodeValue为"tb"。第二个节点的nodeName为"border"，nodevalue为"1"。
4.childNodes属性：包含所有的子节点列表。
改列表有个一length属性，表示子节点的个数。访问列表中元素有两种方法，一种是使用item(index)方法，index为由0开始的整数索引;另一种方法是像使用javascript一样，使用"[]"结合元素索引。
5.firstChild属性：返回一个节点，表示子节点列表childNodes中的第一个节点。
例如：alter(document.firstChild.nodeName);//HTML
alter(document.firstChild.firstChild.nodeName);//head
6.lastChild属性：返回一个节点，表示子节点列表childNodes中最后一个子节点。
7.parentNode属性：当前节点的父节点，如果当前节点是根节点，则返回null.
8.nodeType属性：数值型值，表示节点的类型。DOM中每一个节点的类型均对应一个常量和一个数值。该属性返回节点的类型对应的数值。
9.previousSibling属性：返回一个节点，表示当前节点的同级节点列表中的前一个兄弟节点，如果当前节点是节点列表中的第一个，则返回null.
10.nextSibling属性：返回一个节点，表示当前节点的同级节点列表中的下一个兄弟节点，如果当前节点是节点列表的最后一个节点，则返回null。
访问指定节点：
getElementsByTagName()方法：该方法是核心DOM定义的一个方法。该方法返回一个节点列表，列表中包含了当前标记下，标记名称为指定名称的所有子节点
var tr_list=getElementsByTagName("tr");改代码返回当前文档中所有<tr>节点组成的节点列表。
getElementsByName()方法：该方法是HTML DOM专用方法，该方法返回文档中name属性为指定列表值的所有节点组成的节点列表。该方法直接通过Document调用。
getElementById()方法：也是html dom的专用方法,该方法也是通过document对象调用。该方法返回指定id属性为指定值的节点。
处理节点的属性：
getNamedItem(item_name)：返回当前element节点的NamedNodeMap列表中的NodeName为item_name的一个attribute类型的节点，及属性名称为item_name的属性对应的节点。
reomveNamedItem(item_name)：删除NamedNodeMap中nodeName为item_name的Attribute类型节点，及删除item_name的属性。
例如：
<html>
<head>
</head>
<body>
<table><tr><td id="td21" name="td_name21" height="34"></td></tr></table>
</body>
</html>
var node_td=document.getElementById("td21");
var arttrs=node_td.attributes;
pro_name=arttrs.getNamedItem("height").nodeName; //pro_name="height"
pro_value=arttrs.getNamedItem("height").nodeValue; //pro_value="34";
getAttribute(item_name) 方法：pro_value=node_td.getAttribute("height");//pro_value=34;
setAttribute(item_name,new_value)方法该方法直接为执行名设置新的值：note_td.setAttribute("height",56);
removeAttribute(item_name):删除属性名为item_name的属性。
创建和操作节点：
1.createElement(tag_name)方法：创建标记名为tag_name的element节点，返回创建得到的节点。
var td= document.createElement(”td“);
2.createTextNode(text)方法：创建包含文本的text节点,返回创建得到的节点。
var text=document.createTextNode("文本内容");
3.createAttribute(item_name)方法：创建属性名为item_name的属性节点，返回创建得到的节点，
var pro=document.createAttribute("height");
4.appendChild(node)方法：向当前节点添加子节点，子节点被添加到子节点的尾部。
td.appendChild(text);
5.hasChildNodes()方法：表示当前节点是够包含子节点，如果是返回true,否则返回false;
6.removeChild(node):删除子节点列表中的node节点。通过父节点掉用该方法
7.replaceChild(new_code,old_node):将子节点中的old_node替换成new_code节点，通过父节点调用。
DOM（Document object Model）提供了访问浏览器中网页文档中个元素的途径，包含页面上超链接，表单，表格，图像等各种html元素以及内容。
BOM和DOM的关系飞非常密切。实际上BOM的window对象中包含一个document的属性，该属性是对DOM模型的document对象的应用。代表了当前窗口中网页文档所对应的document对象，可以通过该属性访问访问网页中的各种内容。在通过脚本实现的各种脚本应用中，更多的对网页内容的操作，所以DOM更受广泛应用，DOM也成为标准化进程的焦点，所以BOM往往被忽略，而将BOM和DOM统称为DOM。
在BOM中window对象是对顶层对象，该对象总是代表当前浏览器窗口，对浏览器窗口以及对对浏览器窗口文档的访问，均是通过window对象访问。
例如：window.alert();window.history();window.location.href=www.cnblogs.com;
即使对DOM中的document对象的访问，也是通过window对象进行，例如：window.document.write(str);所以window对象是脚本中全局对象，任何对象的使用都得最溯到window对象访问，对于脚本中出现的未明确的标识符，解析器总是尝试在window对象中寻找。所以在使用各种对象是，window对象可以省略。
例如：alter();history.forward();loaction.href=www.cnblogs.com;document.write(str);
标注DOM是在不断定义和完善的。DOM按其内容可分为5部分：
1.核心DOM:适用于XLM雨HTML专用的接口。
2.XML dom:Xml专用接口
3.HTML dom： html主用接口
4.DOM事件模型：定义DOM能够响应的事件；
5.CSS DOM:css专用接口
核心DOM：
一。核心DOM 定义了Node，Document和Element接口
node接口是所有接口的顶层接口，Node中定义了属性和方法被其他接口所继承，也就是说node接口中定义了适用于所有节点的属性和方法。在浏览器中，NODE接口并不是具体的浏览器对象，该接口中定义的方法和属性直接通过具体的节点对象进行调用，例如通过Document类型的节点的document对象调用，通过文档各element类型节点进行调用。
NODE中定义了所有适用于节点的属性和方法，与HTML相关的部分属性如下：
1.nodeName属性：String类型，表示具体节点的名称。
2.nodeValue属性：String类型，表示节点的值。改值只对text类型的节点有效，表示标记中对应的文本
3.attributes属性：该属性只用于Element类型的节点。返回节点的所有属性节点组成的NamedNodeMap,namedNodeMap是一个"nodeName/nodevalue"
的列表每一项对应节点的一个属性节点，nodeName为属性名称，nodeValue为属性值。例如：
<html>
<head></head>
<body>
<table id="tb" border="1"> .............</table>
</body>
</html>
在改例子中<table>的attributes的属性返回一个NamedNodeMap节点列表。第一个节点的nodeName为"id",nodeValue为"tb"。第二个节点的nodeName为"border"，nodevalue为"1"。
4.childNodes属性：包含所有的子节点列表。
改列表有个一length属性，表示子节点的个数。访问列表中元素有两种方法，一种是使用item(index)方法，index为由0开始的整数索引;另一种方法是像使用javascript一样，使用"[]"结合元素索引。
5.firstChild属性：返回一个节点，表示子节点列表childNodes中的第一个节点。
例如：alter(document.firstChild.nodeName);//HTML
alter(document.firstChild.firstChild.nodeName);//head
6.lastChild属性：返回一个节点，表示子节点列表childNodes中最后一个子节点。
7.parentNode属性：当前节点的父节点，如果当前节点是根节点，则返回null.
8.nodeType属性：数值型值，表示节点的类型。DOM中每一个节点的类型均对应一个常量和一个数值。该属性返回节点的类型对应的数值。
9.previousSibling属性：返回一个节点，表示当前节点的同级节点列表中的前一个兄弟节点，如果当前节点是节点列表中的第一个，则返回null.
10.nextSibling属性：返回一个节点，表示当前节点的同级节点列表中的下一个兄弟节点，如果当前节点是节点列表的最后一个节点，则返回null。
访问指定节点：
getElementsByTagName()方法：该方法是核心DOM定义的一个方法。该方法返回一个节点列表，列表中包含了当前标记下，标记名称为指定名称的所有子节点
var tr_list=getElementsByTagName("tr");改代码返回当前文档中所有<tr>节点组成的节点列表。
getElementsByName()方法：该方法是HTML DOM专用方法，该方法返回文档中name属性为指定列表值的所有节点组成的节点列表。该方法直接通过Document调用。
getElementById()方法：也是html dom的专用方法,该方法也是通过document对象调用。该方法返回指定id属性为指定值的节点。
处理节点的属性：
getNamedItem(item_name)：返回当前element节点的NamedNodeMap列表中的NodeName为item_name的一个attribute类型的节点，及属性名称为item_name的属性对应的节点。
reomveNamedItem(item_name)：删除NamedNodeMap中nodeName为item_name的Attribute类型节点，及删除item_name的属性。
例如：
<html>
<head>
</head>
<body>
<table><tr><td id="td21" name="td_name21" height="34"></td></tr></table>
</body>
</html>
var node_td=document.getElementById("td21");
var arttrs=node_td.attributes;
pro_name=arttrs.getNamedItem("height").nodeName; //pro_name="height"
pro_value=arttrs.getNamedItem("height").nodeValue; //pro_value="34";
getAttribute(item_name) 方法：pro_value=node_td.getAttribute("height");//pro_value=34;
setAttribute(item_name,new_value)方法该方法直接为执行名设置新的值：note_td.setAttribute("height",56);
removeAttribute(item_name):删除属性名为item_name的属性。
创建和操作节点：
1.createElement(tag_name)方法：创建标记名为tag_name的element节点，返回创建得到的节点。
var td= document.createElement(”td“);
2.createTextNode(text)方法：创建包含文本的text节点,返回创建得到的节点。
var text=document.createTextNode("文本内容");
3.createAttribute(item_name)方法：创建属性名为item_name的属性节点，返回创建得到的节点，
var pro=document.createAttribute("height");
4.appendChild(node)方法：向当前节点添加子节点，子节点被添加到子节点的尾部。
td.appendChild(text);
5.hasChildNodes()方法：表示当前节点是够包含子节点，如果是返回true,否则返回false;
6.removeChild(node):删除子节点列表中的node节点。通过父节点掉用该方法
7.replaceChild(new_code,old_node):将子节点中的old_node替换成new_code节点，通过父节点调用。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript之DOM详解
- position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,
- 实现JavaScript的组成----BOM和DOM详解
- 你不知道的JavaScript--Item29 DOM基础详解
- javascript dom 操作详解 js加强
- JavaScript学习--Item29 DOM基础详解
- javascript中DOM实现用户的增删改案例详解----
- 你不知道的JavaScript--Item29 DOM基础详解
- HTML,javaScript,DOM详解
- javascript遍历DOM节点方法详解
- JavaScript一起学之五：详解“0级DOM”——Document对象的属性和方法
- Javascript DOM Document|Element|Attribute对象方法详解
- javaScript详解---DOM
- 详解JavaScript对W3C DOM模版的支持情况
- 你不知道的JavaScript--Item32 DOM基础详解2
- JavaScript学习--Item32 DOM基础详解2
- [Javascript]：BOM对象详解和BOM与DOM的层次关系
- javascript文档对象模型DOM入门详解
- JavaScript : DOM文档解析详解