DOM操作HTML文档
概述
之前写过一些关于DOM方法的知识，理论方法的偏多，所以，这篇博客主要是实践方面的Demo，如果，大家觉得理论方面有所欠缺，大家可以看看这几篇博客：JavaScript总结(一、基本概念)和JavaScript总结(三、DOM)
实例程序
根节点属性和方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>根节点属性和方法</title>
<script type="text/javascript">
function DOMTest(){
//1、属性
//获得文档根元素节点
var htmlRootElement = document.documentElement;
//2、方法
//第一类方法：获取元素节点
//a、通过id属性的属性值获取元素节点
var divNode = document.getElementById("div1");
//b、通过标签名获取元素数组
var divNodes = document.getElementsByTagName("div");
//通过name属性的属性值获取元素数组
//var divNodes2 = document.getElementsByName("div");
//第二类方法：创建其它各种类型的节点
//a、创建元素节点
var newDivNode = document.createElement("div");
//b、创建文本节点
var newTextNode = document.createTextNode("This is a new TextNode!");
//c、创建属性节点
var newAttributeNode = document.createAttribute("value");
//d、创建注释节点
var newCommentNode = document.createComment("这个是注释信息节点");
alert("");
}
</script>
</head>
<body>
<input type="button" value="测试" onclick="javascript:DOMTest();"/>
<div id="div1">123123</div>
<input type="text" id="inputtext"/>
<div id="div2">
456
<div>789</div>
<div id="a">AAA</div>
</div>
<input type="button" value="点击" id="clic"/>
</body>
</html>
元素节点属性和方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>元素节点属性和方法</title>
<script type="text/javascript">
function DOMTest(){
//1、属性
//A、DOM的特有属性
//a、返回元素节点的标签名(大写)
//a1、获得指定的元素节点
var divNode1a1 = document.getElementById("div1");
//a2、获得元素节点的标签名(大写)
var tagNameElement1a2 = divNode1a1.tagName;
//测试
alert(tagNameElement1a2);
//B、操作字符串.格式：元素节点.属性名 = 属性值
//a、获得属性值
//a1、获得元素节点
var textNodeaa1 = document.getElementById("inputtext");
//a2、取出元素节点相应的属性值
var attValue = textNodeaa1.value;
//测试
alert(attValue);
//b、设置属性值
//a1、获得元素节点
var textNodeba1 = document.getElementById("inputtext");
//a2、设置元素节点相应的属性值
textNodeba1.value="name";
//2、方法
//第一类方法：获取该元素节点的子孙元素节点
//a1、获取元素节点
var divNode2a1 = document.getElementById("div2");
//a2、通过元素节点获取该元素内的子孙节点(直接通过document也可以)
var divNodes2a2 = divNode2a1.getElementsByTagName("div");
//第二类方法：操作元素节点中所包含的属性
//A、属性节点j
//a、添加属性节点
//a1、创建属性节点：根据属性名创建一个确定的属性节点
var textAttributeNodeja1 = document.createAttribute("value");
//a2、设置属性节点的属性值：属性节点为属性名和属性值(value)
textAttributeNodeja1.value = "新添加的属性节点值";
//a3、添加属性节点：向指定元素节点上添加属性节点
//a31、获取指定元素节点
var textNodeja3 = document.getElementById("inputtext");
//a32、添加属性节点
textNodeja3.setAttributeNode(textAttributeNodeja1);
//b、获取属性节点
//b1、获取指定的元素节点
var textNodejb1 = document.getElementById("inputtext");
//b2、获取指定(属性名)的属性节点
var textAttributeNodejb2 = textNodejb1.getAttributeNode("value");
//b3、获取属性节点的值：读取属性节点的属性值
var attValuejb3 = textAttributeNodejb2.value;
//测试
alert(attValuejb3);
//c、删除指定的属性节点
//c1、获取元素节点
var textElementNodejc1 = document.getElementById("inputtext");
//c2、获取(创建)相应的属性节点
var textAttributeNodejc2 = document.createAttribute("id");
//c3、删除指定的属性节点
textElementNodejc1.removeAttributeNode(textAttributeNodejc2);
//B、属性值z
//a、添加(设置)属性值
//a1、获取元素节点
var textNodeza1 = document.getElementById("inputtext");
//a2、设置相应的属性值
textNodeza1.setAttribute("value","另一种方式添加节点属性");
//b、获取属性值
//b1、获取元素节点
var textNodezb1 = document.getElementById("inputtext");
//b2、获取相应的属性值
var attValuezb2 = textNodezb1.getAttribute("value");
//测试
alert(attValuezb2);
//c、删除指定属性
//c1、获取元素节点
var textElementNodezc1 = document.getElementById("inputtext");
//c2、删除指定属性的属性值
textElementNodezc1.removeAttribute("id");
alert("");
}
</script>
</head>
<body>
<input type="button" value="测试" onclick="javascript:DOMTest();"/>
<div id="div1">123123</div>
<input type="text" id="inputtext" value="测试数据"/>
<div id="div2">
456
<div>789</div>
<div id="a">AAA</div>
</div>
<input type="button" value="点击" id="clic"/>
</body>
</html>
属性节点属性和方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>属性节点的属性</title>
<script type="text/javascript">
function DOMTest(){
//A、获得属性节点
//a1、获取元素节点。通过根节点，依据id，获得相应的元素节点
var textElementNodeAa1 = document.getElementById("inputtext");
//a2、获取属性节点。通过元素节点，依据属性名，获得相应的属性节点
var textAttributeNodeAa2 = textElementNodeAa1.getAttributeNode("value");
//B、获得属性节点的属性名
var attNameB = textAttributeNodeAa2.name;
//测试
alert(attNameB);
//C、获得属性节点的属性值
var attValueC = textAttributeNodeAa2.value;
//测试
alert(attValueC);
}
</script>
</head> <body>
<input type="button" value="测试" onclick="javascript:DOMTest();"/>
<div id="div1">123123</div>
<input type="text" id="inputtext" value="测试数据"/>
<div id="div2">
456
<div>789</div>
<div id="a">AAA</div>
</div>
<input type="button" value="点击" id="clic"/>
</body>
</html>
所有节点属性和方法
实例一：基本属性和方法的联系
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>所有节点的属性和方法</title>
<script type="text/javascript">
function DOMTest(){
//属性
//A、第一类
//a、返回节点上所有属性节点对象的数组。虽然所有节点都有这个属性，但是，只有元素有意义
//a1、获得元素节点
var buttonElementNodeAa1 = document.getElementById("clic");
//a2、获得元素节点上所有属性节点
var buttonAttributesNoteAa2 = buttonElementNodeAa1.attributes;
//B、第二类
//a、节点的类型
//a1、获得相应的节点,以属性节点为例
var divElementNodeBa1 = document.getElementById("a");
var divAttributeNodeBa1 = divElementNodeBa1.getAttributeNode("id");
//a2、节点的类型
var divNodeType = divAttributeNodeBa1.nodeType;
//测试
alert(divNodeType);
//b、节点的名字
//b1、获得相应的节点，以属性节点为例
var divElementNodeBb1 = document.getElementById("a");
var divAttributeNodeBb1 = divElementNodeBb1.getAttributeNode("id");
//b2、获得节点的名字
var divNodeName = divAttributeNodeBb1.nodeName;
//测试
alert(divNodeName);
//c、节点的内容
//c1、获得相应的节点，以属性节点为例
var divElementNodeBc1 = document.getElementById("a");
var divAttributeNodeBc1 = divElementNodeBc1.getAttributeNode("id");
//c2、获得节点的内容(vlaue值)
var divAttributeValueBc2 = divAttributeNodeBc1.nodeValue;
//测试
alert(divAttributeValueBc2);
//C、第三类(帮助我们在DOM树中进行遍历)
//a、一个元素节点里面的孩子节点，可以是文本节点，注释节点，元素节点。“节点”和“节点”直接可以是兄弟，和父子的关系
//获得元素节点
var divElementNodeCc1 = document.getElementById("div2"); //0、获得该元素节点中所有的元素节点。子一代节点之间如果有换行，空格时，这些会被当做文本节点
var divChildElementsNodeCa2 = divElementNodeCc1.childNodes;
//1、返回当前元素节点子一代的第一个子节点
var divFirstElementNode = divElementNodeCc1.firstChild;
//2、返回当前节点的父节点
var divParentNode = divFirstElementNode.parentNode;
//3、返回该节点的下一个兄弟节点
var divNextSibling = divFirstElementNode.nextSibling;
//4、返回当前元素节点子一代的最后一个节点
var divLastElementNode = divElementNodeCc1.lastChild;
//5、返回当前节点的上一个兄弟节点
var divPreviousSibling = divLastElementNode.previousSibling;
//方法
//获得元素节点
var divElementNodef = document.getElementById("a"); //1、当前元素节点是否拥有子节点，有则true，无则false
var flag = divElementNodef.hasChildNodes();
//测试
alert(flag);
//2、给当前节点增加一个子节点(所有字节的末尾)
//创建文本节点
var textTextNode21 = document.createTextNode("元素节点的子节点的末尾添加新的子节点");
//创建元素节点，并设置其属性值
var textElementNode21 = document.createElement("input");
textElementNode21.type="text";
textElementNode21.value="元素节点的子节点的末尾添加新增的子节点";
textElementNode21.id = "newText1";
//添加文本节点
divElementNodef.appendChild(textTextNode21);
//添加元素节点
divElementNodef.appendChild(textElementNode21);
//3、在当前节点的指定子节点的前面插入新的节点
//创建文本节点
var textTextNode31 = document.createTextNode("向元素节点的指定子节点前插入文本节点");
//创建元素节点
var textElementNode31 = document.createElement("input");
textElementNode31.type="text";
textElementNode31.value="插入元素节点";
textElementNode31.id="newText2";
//添加文本节点
divElementNodef.insertBefore(textTextNode31,textTextNode21);
//添加元素节点
divElementNodef.insertBefore(textElementNode31,textTextNode31);
//4、删除元素节点中指定的子节点，同时返回删除的子节点
var removeElementNode = divElementNodef.removeChild(textElementNode31);
//5、用另一个节点替换当前节点的一个子节点，并且返回指定的子节点
//创建一个元素节点
var buttonElementNodef5 = document.createElement("input");
buttonElementNodef5.type="button";
buttonElementNodef5.value="新加节点";
//替换之前的节点
divElementNodef.replaceChild(buttonElementNodef5,textTextNode31);
//6、复制当前节点(只复制当前节点或者复制当前节点和他的子孙节点)
var cloneO = divElementNodef.cloneNode(false);
var cloneA = divElementNodef.cloneNode(true);
alert("");
}
</script>
</head> <body>
<input type="button" value="测试" onclick="javascript:DOMTest();"/>
<div id="div1">123123</div>
<input type="text" id="inputtext" value="测试数据"/> <div id="div2">
<!--这个有相应的节点吗？-->
文本节点1
文本节点2
<div>
<input type="text" value="子节点"/>
</div>
<div id="a">AAA</div>
</div> <input type="button" value="点击" id="clic"/>
</body>
</html>
实例二：综合型的实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>增删查改DOM节点</title>
<script type="text/javascript">
var index=0;
//A、末尾追加节点
function appendnode(){
//1、找到相应的元素节点F
var divFElementNode = document.getElementsByTagName("div");
//2、创建容纳文本节点的元素节点S
var divSElementNode = document.createElement("div");
//3、创建文本节点
index++;
var textTextNode = document.createTextNode("我是新加入的节点" + index);
//4、向元素节点S上添加创建的文本节点
divSElementNode.appendChild(textTextNode);
//5、向元素节点F上添加创建的元素节点S
divFElementNode[0].appendChild(divSElementNode);
} //B、首位插入节点
function insertnode(){
//1、获得元素节点F
var divFElementNode = document.getElementById("divId");
//2、获得元素节点的子节点的第一个元素节点S1
//2.1、定义接收第一个元素节点的变量
var divS1ElementNode;
//2.2、获得该元素节点里的所有节点（数组）
var divSElementNodes = divFElementNode.childNodes;
//2.3、判断数组中的第一个元素节点
for(var i=0; i<divSElementNodes.length; i++){
if(divSElementNodes[i].nodeType == 1){
divS1ElementNode = divFElementNode.firstChild;
break;
}
}
//2.4、判断是否存在元素节点
if(divS1ElementNode == null || divS1ElementNode == undefined || divS1ElementNode == ""){
return;
}
//3、创建元素节点S0，用来存放创建的文本节点
var divS0ElementNode = document.createElement("div");
//4、创建文本节点S01
index++;
var textS01TextNode = document.createTextNode("我是新加入的节点" + index);
//5、将文本节点添加到元素节点S0里
divS0ElementNode.appendChild(textS01TextNode);
//6、将元素节点S0插入到S1的前面
divFElementNode.insertBefore(divS0ElementNode,divS1ElementNode);
} //C、克隆末尾元素节点，并追加
function clonenode(){
//1、找到元素节点F
//1.1、相同标签名的数组
var divFElementNodes = document.getElementsByTagName("div");
//1.2、指定的元素节点
var divFElementNode = divFElementNodes[0];
//2、找到元素节点F中的最后的一个子元素节点S
//2.1、定义接收最后一个子元素节点的变量
var divSElementNode;
//2.2、获得F中的所有子元素节点
var divSElementNodes = divFElementNode.childNodes;
//2.3、判断数组中最后的一个元素节点
for(var i=divSElementNodes.length-1; i>0; i--){
if(divSElementNodes[i].nodeType == 1){
divSElementNode = divSElementNodes[i];
break;
}
}
//2.4、判断是否存在子元素节点
if(divSElementNode == null || divSElementNode == undefined){
return;
}
//3、克隆子元素节点S
var cloneDivSElementNode = divSElementNode.cloneNode(true);
//4、将克隆的子元素节点追加到F中
divFElementNode.appendChild(cloneDivSElementNode);
} //D、移除第一个元素节点
function removenode(){
//1、找到相应的元素节点F
var divFElementNode = document.getElementById("divId");
//2、找到要移除的元素节点S
//2.1、定义获得第一个子元素节点
var divSElementNode;
//2.2、获得F中的所有孩子节点
var divSElementNodes = divFElementNode.childNodes;
//2.3、判断数组，从中等到第一个子元素节点
for(var i=0; i<divSElementNodes.length; i++){
if(divSElementNodes[i].nodeType == 1){
divSElementNode = divSElementNodes[i];
break;
}
}
//2.4、判断是否存在子元素节点
if(divSElementNode == null | divSElementNode == undefined){
return;
}
//3、将S从F中移除
var deleteElement = divFElementNode.removeChild(divSElementNode);
} //E、替换元素节点(第一个和最后一个交换)
function replacenode(){
//找到id=divId的div
var divFElementNode = document.getElementById("divId");
//找到该div里面的所有div
var divSElementNodes = divFElementNode.getElementsByTagName("div"); var divLength = divSElementNodes.length;
if(divLength >= 2){
var firstDiv = divSElementNodes[0];
var lastDiv = divSElementNodes[divLength -1];
var replaceNode = divFElementNode.replaceChild(firstDiv, lastDiv);
divFElementNode.insertBefore(replaceNode,divSElementNodes[0]);
}
}
</script>
</head> <body>
<input type="button" value="追加节点" id="append" onclick="javascript:appendnode();"/>
<input type="button" value="插入节点" id="insert" onclick="javascript:insertnode();"/>
<input type="button" value="克隆节点" id="clone" onclick="javascript:clonenode();"/>
<input type="button" value="移除节点" id="remove" onclick="javascript:removenode();"/>
<input type="button" value="替换节点" id="replace" onclick="javascript:replacenode();"/>
<div id="divId"></div>
</body>
</html>
总结
本篇博客主要给出了一些实例，大家可以根据这些实例，自己联系联系，由于程序代码里的注释很详细，所以就不在过多的在别的地方解释，大家好好看看这些实例，相信一定会有收获的。
DOM操作HTML文档的更多相关文章
- javascript DOM操作HTML文档
文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...
- 使用DOM进行xml文档的crud（增删改查）操作<操作详解>
很多朋友对DOM有感冒,这里我花了一些时间写了一个小小的教程,这个能看懂,会操作了,我相信基于DOM的其它API(如JDOM,DOM4J等)一般不会有什么问题. 后附java代码,也可以下载(可点击这 ...
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- HTML DOM 定义了访问和操作 HTML 文档标准
HTML DOM 定义了访问和操作 HTML 文档的标准. 您应该具备的基础知识 在您继续学习之前,您需要对以下内容拥有基本的了解: HTML CSS JavaScript 如果您需要首先学习这些项目 ...
- XML DOM (Document Object Model) 定义了访问和操作 XML 文档的标准方法。
XML DOM DOM 把 XML 文档视为一种树结构.通过这个 DOM 树,可以访问所有的元素.可以修改它们的内容(文本以及属性),而且可以创建新的元素.元素,以及它们的文本和属性,均被视为节点. ...
- 文档对象模型操作xml文档
简介 :文档对象模型(DOM)是一种用于处理xml文档的API函数集. 2.1文档对象模型概述 按照W3C的定义,DOM是“一种允许程序或脚本动态地访问更新文档内容,结构和样式的.独立于平台和语言的规 ...
- js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型
js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...
- python 之 前端开发（ jQuery选择器、筛选器、样式操作、文本操作、属性操作、文档操作）
11.5 jQuery 引入方式: 方式一:本地引入 <script src="jquery-3.3.1.min.js"></script> <scr ...
- 精讲 org.w3c.dom(java dom)解析XML文档
org.w3c.dom(java dom)解析XML文档 位于org.w3c.dom操作XML会比较简单,就是将XML看做是一颗树,DOM就是对这颗树的一个数据结构的描述,但对大型XML文件效果可能会 ...
随机推荐
- 在raw_input()中使用中文提示，在CMD下中文乱码问题解决。。。
错误的程序及结果: 解决1: guess = int(raw_input('请输入一个整数:'.decode('utf-8').encode('gbk'))) 解决2: guess = int(raw ...
- PowerShell Remove all user defined variable in PowerShell
When PS scripts executes, it is possibly create much user defined variables. So, sometimes these var ...
- ASP.NET MVC进阶之路:依赖注入(Di)和Ninject
0X1 什么是依赖注入 依赖注入(Dependency Injection),是这样一个过程:某客户类只依赖于服务类的一个接口,而不依赖于具体服务类,所以客户类只定义一个注入点.在程序运行过程中,客户 ...
- 过目不忘JS正则表达式（转）
正则表达式,有木有人像我一样,学了好几遍却还是很懵圈,学的时候老明白了,学完了忘光了.好吧,其实还是练的不够,所谓温故而知新,可以为师矣,今天就随我来复习一下这傲娇的正则表达式吧. 为啥要有正则表达式 ...
- javadoc入门
斌斌 (给我写信) 原创博文(http://blog.csdn.net/binbinxyz),转载请注明出处! java凝视 java里面有两种类型的凝视.一种是以"/*"起头,以 ...
- 道路软件质量：SourceMonitor
有些事情必须这样做,不是幸福,但是,缓解疼痛,因为不.更痛苦--这是无奈. 夏中义 <文心独白> 1 简介 博客没有更新了一段时间,了阿里上市的成功之处:选择和坚持.事实上人生并没有绝对的 ...
- Js用正则表达式验证字符串
js 常用正则表达式表单验证代码 作者: 字体:[增加 减小] 类型:转载 js 常用正则表达式表单验证代码,以后大家就可以直接使用了. 正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模 ...
- 【在网页中获取截图数据】Chrome和Firefox下的实战经验
[转载自我在segmentfault的专栏:https://segmentfault.com/a/1190000004584071] 最近在实现一个功能,需求如下: 前提:当前页面无弹窗 页面任意位置 ...
- 使用uWSGI+nginx部署Django项目
最近使用django写了一些项目,不过部署到服务器上碰到一些问题,还有静态文件什么的一堆问题,这里总结一下碰到的问题和解决方案,总体思路是按照官方文档走的. 原文地址:http://uwsgi-doc ...
- 条款21： 必须返回对象时，不要强行返回对象的reference
总结: 绝不要返回一个local栈对象的指针或引用:绝不要返回一个被分配的堆对象的引用:绝不要返回一个静态局部对象(为了它,有可能同时需要多个这样的对象的指针或引用). 条款4中给出了“在单线程环境中 ...