DOM
DOM分为HTML DOM和XML DOM两种。它们分别定义了访问和操作HTML/XML文档的标准方法，并将对应的文档呈现为带有元素、属性和文本的树结构（节点树）
1）DOM树定义了HTML/XML文档的逻辑结构，给出了一种应用程序访问和处理XML文档的方法。
2）在DOM树中，有一个根节点，所有其他的节点都是根节点的后代。
3) 在应用过程中，基于DOM的HTML/XML分析器将一个HTML/XML文档转换成一棵DOM树，应用程序通过对DOM树的操作，来实现对HTML/XML文档数据的操作。
DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言.
• D：文档 – html 文档 或 xml 文档
• O：对象 – document 对象的属性和方法
• M：模型
• DOM 是针对xml(html)的基于树的API。
• DOM树:节点（node）的层次。
• DOM 把一个文档表示为一棵家谱树（父，子，兄弟）
• DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
DOM的结构
<html>:
<head>
<title>HTML DOM</title>
</head>
<body>
<h1>DOM的结构</h1>
<p><a href=”href”>链接</a></p>
</body>
</html>
html是根节点，head，body是html的子节点，title是head的子节点，body是h1，p的父节点
节点
根据 DOM，HTML 文档中的每个成分都是一个节点。DOM 是这样规定的：
• 整个文档是一个文档节点
• 每个 HTML 标签是一个元素节点
• 包含在 HTML 元素中的文本是文本节点
• 每一个 HTML 属性是一个属性节点
• 注释属于注释节点
Node 层次
节点彼此都有等级关系。
HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
节点及其类型
节点
由结构图中我们可以看到，整个文档就是一个文档节点。
而每一个HMTL标签都是一个元素节点。
标签中的文字则是文本节点。
标签的属性是属性节点。
一切都是节点……
节点树
节点树的概念从图中一目了然，最上面的就是“树根”了。节点之间有父子关系，祖先与子孙关系，兄妹关系。这些关系从图中也很好看出来，直接连线的就是父子关系了。而有一个父亲的就是兄妹关系……
NODE接口的特性和方法
特性/方法 类型/返回类型 说 明
nodeName String 节点的名字根据节点的类型而定义
nodeValue String 节点的值根据节点的类型而定义
nodeType Number 节点的类型常量值之一
ownerDocument Document 指向这个节点所属的文档
firstChild Node 指向在childNodes列表中的第一个节点
lastChild Node 指向在childNodes列表中的最后一个节点
childNodes NodeList 所有子节点的列表
previousSibling Node 指向前一个兄弟节点；如果这个节点就是第一个兄
弟节点，那么该值为null
nextSibling Node 指向后一个兄弟节点；如果这个节点就是最后一个兄
弟节点，那么该值为null
hasChildNodes() Boolean 当childNodes包含一个或多个节点时，返回真
attributes NamedNodeMap 包含了代表一个元素的特性的Attr对象；仅用于 Element节点
appendChild(node) Node 将node添加到childNodes的末尾
removeChild(node) Node 从childNodes中删除node
replaceChild
(newnode, oldnode) Node 将childNodes中的oldnode替换成newnode
insertBefore
(newnode, refnode) Node 在childNodes中的refnode之前插入newnode
查找并访问节点
你可通过若干种方法来查找您希望操作的元素：
通过使用 getElementById() 和 getElementsByTagName() 方法
通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
查找元素节点
1）getElementById()
var element = document.getElementById ( ID )
2）getElementsByName()
<input type="text" name="tname" value="国庆60年_1" /><br>
<input type="text" name="tname" value="国庆60年_2" /><br>
<input type="text" name="tname" value="国庆60年_3" /><br>
function test(){
var tnameArray=document.getElementsByName("tname");
alert(tnameArray.length);
for(var i=0;i<tnameArray.length;i++){
window.alert(tnameArray[i].value);
}
}
3）getElementsByTagName()
var elements = document.getElementsByTagName(tagName);
var elements = element.getElementsByTagName(tagName);
或
var container = document.getElementById(“sid”);
var elements = container.getElementsByTagName(“p”);
alert(elements .length);
处理input
var inputElements=document.getElementsByTagName("input");
//输出input标签的长度
alert(inputElements.length);
for(var i=0;i<inputElements.length;i++){
if(inputElements[i].type!='button'){
alert(inputElements[i].value);
}
}
处理select
//获取select标签
var selectElements=document.getElementsByTagName("select");
//获取select下的子标签
for(var j=0;j<selectElements.length;j++){
var optionElements=selectElements[j].getElementsByTagName("option");
for(var i=0;i<optionElements.length;i++){
alert(optionElements[i].value);
}
}
一些常用的访问节点的属性及用法
parentNode：父节点、firstChil：第一个子节点、lastChild最后一个子节点
hasChildNodes() :该方法用来检查一个元素是否有子节点，返回值是 true 或 false.
var booleanValue = element.hasChildNodes();
文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.
如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串。
Document。documentElement：返回存在于 XML 以及 HTML 文档中的文档根节点
document.body ：是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
注：nodeName 所包含的 XML 元素的标签名称永远是大写的
nodeName 是一个只读属性。
案例：
获取节点的名称及value
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo01.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<h1>
你好，kouxiaolin
</h1>
</body>
</html>
<script type="text/javascript">
<!--
window.onload=function(){
var root=document.documentElement;
alert("跟标签的名称："+root.nodeName);
var ss=root.firstChild;
alert("root的第一个子标签head："+ss.nodeName);
var ee=root.lastChild;
alert("root的最后一个子标签body："+ee.nodeName);
var body=document.body;
alert("body标签："+body.nodeName);
var h1=body.firstChild;
alert("body标签的第一个子标签h1："+h1.nodeName);
var tt=h1.firstChild;
alert("h1标签的子标签名称："+tt.nodeName);
alert("h1标签的文本内容："+tt.nodeValue);
}
// -->
</script>
遍历select中所有的option对象的文本值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo02.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
window.onload = function() {
//通过getElementById("edu")方法获取select的对象
var edus = document.getElementById("edu");
//通过select中options集合获取所有的option对象
var edus1 = edus.options;
var msg ="";
//遍历所有的option对象的文本值
for(var i=0;i<edus1.length;i++){
msg+=edus1[i].innerHTML+",";
}
//把获取的msg信息写入到showMsg的div中
document.getElementById("showMsg").innerHTML=msg;
}
</script>
</head>
<body>
<div>
<form action="">
用户名:<input type="text" name="name" />
学历:<select id="edu" name="education">
<option value="大专">大专生</option>
<option value="本科">本科生</option>
<option value="硕士">硕士生</option>
<option value="博士">博士生</option>
</select>
<input type="submit" value="注册" />
</form>
</div>
用户的学历是：
<div id="showMsg">
</div>
</body>
</html>
或
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo02.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
window.onload = function() {
//通过getElementById("edu")方法获取select的对象
var edus = document.getElementById("edu");
var edus1 = edus.childNodes;
alert(edus1.length);
var fc = edus.firstChild;
alert(fc.nodeName);
var lc = edus.lastChild;
alert(lc.nodeName);
var llc = lc.firstChild;
alert(llc.nodeValue);
var msg = "";
for ( var i = 0; i < edus1.length; i++) {
if (edus1[i].nodeType == 1)
msg += edus1[i].lastChild.nodeValue + ",";
}
document.getElementById("showMsg").innerHTML = msg;
}
</script>
</head>
<body>
<div>
<form action="">
用户名:
<input type="text" name="name" />
学历:
<select id="edu" name="education">
<option value="大专">
大专生
</option>
<option value="本科">
本科生
</option>
<option value="硕士">
硕士生
</option>
<option value="博士">
博士生
</option>
</select>
<input type="submit" value="注册" />
</form>
</div>
用户的学历是：
<div id="showMsg">
</div>
</body>
</html>
分享到：
相关推荐
史上最详细的DOM笔记，最全DOM操作详解。
### 七、总结 通过 DOM 和 BOM，JavaScript 能够实现对网页的动态控制和操作，这是现代 Web 开发的核心技术之一。理解 DOM 和 BOM 的工作原理对于成为一名合格的前端开发者至关重要。此外，掌握这些技术也有助于...
DOM 总结 DOM 实例 DOM 实例 DOM 对象 DOM Window DOM Navigator DOM Screen DOM History DOM Location DOM Document DOM Anchor DOM Area DOM Base DOM Body DOM Button DOM Event DOM Form DOM ...
在本篇总结笔记中，我们将深入探讨JavaScript与DOM的互动，包括查找、修改和添加网页元素。 1. **DOM基本概念** - DOM树：HTML文档被解析后形成一棵节点树，每个节点代表文档的一部分。 - 元素节点：HTML标签对应...
DOM事件总结（教辅）DOM事件总结（教辅）DOM事件总结（教辅）DOM事件总结（教辅）DOM事件总结（教辅）DOM事件总结（教辅）DOM事件总结（教辅）DOM事件总结（教辅）DOM事件总结（教辅）DOM事件总结（教辅）DOM事件...
以下是对JavaScript DOM操作的总结，主要涉及创建、复制和插入节点的方法： 1. **创建节点** - `createElement()`：此方法用于创建一个新的元素节点。例如，`document.createElement('p')`会创建一个`<p>`元素。...
JavaScript DOM（文档对象模型）是Web开发中的一个重要概念，它是一种标准，允许程序和脚本动态...结合jQuery等库，DOM操作变得更加简便，但理解基本的DOM概念和BOM机制对于任何JavaScript开发者来说都是非常重要的。
7. **DOM Level**：DOM分为不同的级别，如DOM Level 1、DOM Level 2和DOM Level 3，每级扩展了更多的功能，如DOM Level 2引入了CSS操作，DOM Level 3增加了XML命名空间和比较文档的功能。 8. **性能考虑**：虽然DOM...
对于xml&dom&sax&dom4j 文件解析的代码总结
对于DOM的一些总结，DHTML，BOM，DOM对象里的一些属性和方法
DOM的核心在于将文档分解为一个个节点，这些节点包括元素节点、文本节点、属性节点等，形成了一个树状结构，称为DOM树。 1、DOM结构 DOM树是由各种类型的节点构成的，例如元素节点（如`<div>`）、文本节点（包含...
BOM和DOM是JavaScript中两个非常重要的概念，它们是实现网页动态交互的核心技术。BOM（Browser Object Model）指的是浏览器对象模型，它允许开发者通过JavaScript操作浏览器窗口、导航历史、定时器等浏览器自身功能...
以下是对“JavaScript获取HTML DOM节点元素的方法的总结”的详细阐述，旨在帮助开发者更好地理解和应用DOM操作。 ### 一、通过`document`对象获取DOM节点 #### 1. `document.getElementById(elementId)` 这个方法...
### JavaScript DOM API 总结 #### 一、概述 JavaScript 的 Document Object Model (DOM) API 是一种用于 HTML 和 XML 文档的标准编程接口。通过 DOM API，开发者能够动态地访问、更新文档的内容、结构和样式。...
dom4j 总结
DOM总结 tomcat服务器 servlet基础 Request&Response编程 Cookie&Session XML语言 JSP技术入门 EL表达式语言 JSTL标签库： JSP标准标签库 MVC程序架构思想&案例 [总结]Path路径问题 [总结]JavaWeb乱码问题 [转自IBM]...
总结来说，DOM解析是标准的XML处理方式，而DOM4J是其增强版，提供了更多的特性。在Java开发中，根据XML文件的大小和处理需求，可以选择DOM4J以获得更好的性能和便利性。理解并熟练掌握这两种解析技术，对于处理XML...
总结来说，DOM4J是一个强大的XML处理库，提供了丰富的API和功能，包括解析、操作和查询XML文档。两个不同版本的jar文件包含了源码和文档，方便开发者深入学习和自定义。了解和掌握DOM4J对于处理XML任务的Java开发...