李小抽SuperITGirl
- 浏览: 46527 次
- 性别:
- 来自: 沈阳
-
文章分类
最新评论
一、什么是DOM
本人认为，DOM和Java中的包JDOM是一样的东西，就好像是一个包，在包里面提供了一些方法可以让程序员对XHTML中的节点进行访问和操作。
DOM是文档对象模型（document objec model）的缩写。
在这里不详细介绍DOM的其他情况，只是记录了一些方法
二、操作：
1.访问DOM节点：
1.1 按id取元素：getElementById()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM</title>
<script>
function displayNodeInfo()
{
var x = document.getElementById("test");
alert("nodeName:"+x.nodeName+";nodeValue:"+x.nodeValue+";nodeType:"+x.nodeType);
}
</script>
</head>
<body>
<input type="button" value="测试" onclick="displayNodeInfo();"/>
<br/>
<div id="test">Test</div>
</body>
</html>
取到的节点是id值为"test”的div节点。
在DOM中一共有四种类型的节点：
| nodetype的值 | 节点类型 |
| 1 | 元素节点 |
| 2 | 属性节点 |
| 3 | 文本节点 |
| 4 | 注释节点 |
1.2 按标签名取元素集：getElementByTagName()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM</title>
<script>
function displayNodeInfo2()
{
var x = document.getElementsByTagName("li");
alert("长度为："+x.length);
}
</script>
</head>
<body>
<input type="button" value="测试2" onclick="displayNodeInfo2()"/>
<ul>
<li>太极1：从零开始</li>
<li>白鹿原</li>
<li>二次曝光</li>
</ul>
</body>
</html>
getElementByTagName将会返回一个对象数组，每个对象分别对应着document对象中的一个列表项li元素，因此可以利用length属性查出这个数组里的元素个数。因为x是一个数组，因此可以用循环语句来遍历这个数组中的元素。
2.操作元素内的文本
想要获取元素内文本内容，首先需要理解，DOM中元素并不是直接包含文本的，而是包含在一个子文本节点的。理解这一点非常关键。
但是这个操作会因浏览器的不同而不同（某书上说的）
方法：元素.innerText不适用于火狐，适用于IE
方法：元素.firstChild.nodeValue适用于火狐，也适用于IE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM</title>
<script>
function displayNodeInfo3()
{
var x2 = document.getElementById("test3");
/* alert(x2.innerText);*/
alert(x2.firstChild.nodeValue);
}
</script>
</head>
<body>
<input type="button" value="测试3" onclick="displayNodeInfo3()"/>
<div id="test3">我是一个程序员</div>
</body>
</html>
3.操作元素内的HTML
用法和innerText相似，但是可以适用于所有的浏览器，但是他会获取的不仅仅是文本，还有标签，举个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM</title>
<script>
function displayNodeInfo3()
{
var x2 = document.getElementById("test3");
alert(x2.innerText);
/*alert(x2.firstChild.nodeValue);*/
}
function displayNodeInfo4()
{
var x2 = document.getElementById("test3");
alert(x2.innerHTML);
}
</script>
</head>
<body>
<input type="button" value="测试3" onclick="displayNodeInfo3()"/>
<div id="test3">我是<br/>一个<br/>程序员</div>
<br/>
<input type="button" value="测试4" onclick="displayNodeInfo4()"/>
<div id="test4">我是<br/>一个<br/>程序员</div>
</body>
</html>
上面两个方法分别用的是innerText和innerHTML方法，运行之后，会发现，按钮“测试3”点击之后，弹出来的对话框是按照格式输出的，而按钮“测试4”弹出来的对话框没有按格式输出，而是一行输出，同时输出了HTML标签<br>
4.修改DOM节点
4.1 创建DOM节点
常用方法如下：
| 方法 | 描述 |
| createAttribute(name) | 用给定名称name创建属性节点 |
| createCDATASection(text) | 用包含文本text的文本子节点创建一个CDATA Section |
| createComment(text) | 创建包含文本text的注释节点 |
| createDocumentFragment() | 创建文档碎片节点 |
| createElement(tagname) | 创建标签名为tagname的元素 |
| createEntityReference(name) | 创建给定名称的实体引用节点 |
| createProcessing Instruction(target,data) | 创建包含给定target和data的PI节点 |
| createTextNode(text) | 创建包含文本text的文本节点 |
举个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM节点操作</title>
<script>
function createDiv()
{
var newDiv = document.createElement("div");
newDiv.setAttribute("id","test");
var bodyTags = document.getElementsByTagName("body");
var thisBody = bodyTags[0];
thisBody.appendChild(newDiv);
var textNode = document.createTextNode("这是一个新的div");
newDiv.appendChild(textNode);
}
</script>
</head>
<body>
<input type="button" value="创建一个新的div" onclick="createDiv()" />
</body>
</html>
首先创建一个div元素，但是为了以后方便对此元素的引用，要给此元素添加一个id因此用setAttribute的方法，为div添加了一个id，之后要用appendChild方法将div元素添加到HTML中，此方法会将div添加到父节点的尾部，所以我们要找到目标父节点，我们想要将div添加到body标签里面，就要获取body元素，bodyTags是getElementsByTagName("body");返回的一个数组，因此body节点就是此数组中的第一个元素，之后将div添加至body里面，再创建一个text节点，添加到div元素里面。
4.2 插入DOM节点
在已有的HTML文档中插入一个DOM节点，首先要考虑插入的位置，是在某些元素之前还是之后，下面介绍两种常用方法：insetBefore和appendChild
1. insertBefore函数：
此函数可以在另一个子元素前插入一个元素：父节点.insertBefore(待插入节点，基准节点)
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM节点操作</title>
<script>
function insertBeforeE()
{
var liNode = document.createElement("li");
liNode.setAttribute("id","newOne");
var textNode = document.createTextNode("女朋友，男朋友");
liNode.appendChild(textNode);
var targetNode = document.getElementById("flag");
var ul = document.getElementsByTagName("ul")[0];
ul.insertBefore(liNode,targetNode);
}
</script>
</head>
<body>
<input type="button" value="前插入一个节点" onclick="insertBeforeE()"/>
<ul>
<li>疯狂愚蠢的爱</li>
<li id="flag">蓝精灵</li>
<li>暮光之城</li>
</ul>
</body>
</html>
2.appendChild函数
在前面的例子当中已经用过了
用法：父节点.appendChild(待插入节点)；
他不需要指定其兄弟节点的位置，因为他的作用是添加到末尾。
4.3 删除DOM节点
函数及用法：父节点.removeChild(待删除节点)
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM节点操作</title>
<script>
function deleteNode()
{
var ul = document.getElementsByTagName("ul")[0];
var deleteLi = document.getElementById("bang");
ul.removeChild(deleteLi);
}
</script>
</head>
<body>
<input type="button" value="删除一个节点" onclick="deleteNode()"/>
<ul>
<li>向左走，向右走</li>
<li>重庆森林</li>
<li id="bang">瑞恩.高斯林</li>
</ul>
</body>
</html>
由于可以用parentNode方法获取元素的父节点，因此亦可以用一下方法来实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM节点操作</title>
<script>
function deleteNode()
{
var deleteLi = document.getElementById("bang");
remove(deleteLi);
}
function remove(elem)
{
if(elem)
{
elem.parentNode.removeChild(elem);
}
}
</script>
</head>
<body>
<input type="button" value="删除一个节点" onclick="deleteNode()"/>
<ul>
<li>向左走，向右走</li>
<li>重庆森林</li>
<li id="bang">瑞恩.高斯林</li>
</ul>
</body>
</html>
删除全部节点：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM节点操作</title>
<script>
function deleteNode()
{
var ul = document.getElementsByTagName("ul")[0];
emptyNode(ul);
}
function emptyNode(elem)
{
while(elem.firstChild)
{
remove(elem.firstChild);
}
}
function remove(elem)
{
if(elem)
{
elem.parentNode.removeChild(elem);
}
}
</script>
</head>
<body>
<input type="button" value="删除全部子节点" onclick="deleteNode()"/>
<ul>
<li>向左走，向右走</li>
<li>重庆森林</li>
<li id="bang">瑞恩.高斯林</li>
</ul>
</body>
</html>
分享到：
发表评论
-
jQuery数组处理详解(含实例演示)（转）
2013-05-06 16:55 795http://www.cnblogs.com/lexus/ar ... -
关于JS、jQuery中个别方法的浏览器兼容性问题之总结（陆续更新）
2013-04-19 16:36 7157一、CSS样式的获取 比如，我想获取当前页面中font-s ... -
JavaScript基础（二）
2012-11-12 16:44 863三、变量 1.变量的声明 在变量声明时需要注意的 ... -
JavaScript基础（一）
2012-10-29 16:53 948一、什么是JavaScript Java ... -
jQuery初认识
2012-10-29 16:08 610一、jQuery是什么 jQuery是一个功能强大的 ...
相关推荐
从菜鸟教程上学习的关于js的学习笔记，可以用于参考学习使用，脑图样式，浏览更方便，有需要的同学可以带走
在JS基本功DOM学习笔记中，我们将深入探讨以下几个核心知识点： 1. **DOM树**：DOM将网页内容表示为一棵由节点构成的树形结构，其中每个节点代表HTML元素、属性、文本等。根节点通常是`document`，其他节点如`<div>...
JavaScript DOM 学习笔记 JavaScript DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，它提供了一种访问和操作文档结构和内容的方式。DOM 将文档表示为一个树状结构，其中每个节点都代表文档中的一个...
韩顺平js-DOM学习笔记
### JavaScript DOM 学习笔记知识点总结 #### 一、DOM基础概述 DOM（Document Object Model）文档对象模型是一种处理可扩展标记语言的标准编程接口。它提供了结构化文档（如HTML和XML）的标准方法来访问、修改文档...
根据给定的文件信息，我们可以总结出以下关于DOM（Document Object Model）操作的关键知识点： ### DOM简介 DOM是一种处理HTML和XML文档的标准接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM...
根据给定的文件信息，我们可以总结出一系列与DOM（Document Object Model）操作、JavaScript事件处理以及浏览器窗口操作相关的IT知识点。以下是对这些知识点的详细解释： ### 1. DOM Event Handling（DOM事件处理）...
dom编程学习笔记.pdf
根据给定的文件信息，以下是关于JavaScript中DOM（文档对象模型）的相关知识点详解： DOM是文档对象模型（Document Object Model）的缩写，它是一个跨平台的接口，由W3C组织制定标准，用于在HTML或XML文档中创建和...
### 一、选择并修改DOM元素 #### 1.1 直接修改元素属性 在示例代码中，我们看到通过`getElementById`方法选取了ID为`div1`的`<div>`元素，并通过修改其`style`属性中的`width`和`height`值来改变其大小。具体实现...
**标题解析：** "Dom4j学习笔记" 这个标题明确指出了我们要探讨的主题——Dom4j。Dom4j是一个流行的Java库，用于处理XML文档。它提供了丰富的API，使得XML的读取、写入、操作变得简单易行。在学习笔记中，通常会涵盖...
本篇学习笔记主要探讨了DOM的基础知识，包括不同类型的节点以及如何访问和操作这些节点。 1. **DOM节点层次** - **Document**：作为整个文档的顶级节点，它包含了文档的全部内容。 - **DocumentType**：表示文档...
Window对象是DOM中的一个重要组成部分，它提供了很多方法和属性，如`alert()`用于弹出对话框，`open()`用于打开新的窗口，`location`用于获取或改变页面URL，`history`用于管理浏览历史，`screen`提供了关于用户屏幕...
韩顺平老师的javascript之dom编程的笔记
本篇笔记将深入探讨XML DOM4J的学习要点。 一、XML基础知识 1. XML结构：XML文档由元素（Element）、属性（Attribute）、文本内容（Text）、注释（Comment）等组成。每个XML文档都有一个根元素，其他元素嵌套在根...
**DOM4J学习笔记** DOM4J是一个强大的Java XML API，它提供了丰富的XML处理功能，包括文档构建、解析、修改和查询。作为一个开源项目，DOM4J在XML处理领域具有广泛的用户基础，因其简单易用和高效性能而备受青睐。...