DOM节点操作可以使网页变得更像应用程序,而不是一般的静态页面。可以让页面在不与服务器进行通信的情况下,根据用户输入的内容发生改变,以及在脚本控制下更新页面。
尽管可以用innerHTML这样的技术实现相同的效果,但是它并不是W3C官方支持的。W3C建议符合标准的浏览器采用节点操作的方式支持网页,即规定浏览器应该如何处理文档对象模型(Document Object Model,DOM)。
那么,到底什么是DOM?
在网页上,组成页面的对象被组织在一个树形结构中,页面的顶级包含在<html>标签中,在其中会找到<head>和<body>标签,而其他标签包含在这两个标签中,依此类推。
Javascript将文档树中的每个项目当作对象,通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的对象,要改变页面的某个东西,JavaScript就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的,也就是说,文档中对象的表示称为文档对象模型,即Document Object Model,简称DOM。
在 1998年,W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。所有的浏览器都执行了这个标准,因此,DOM的兼容性问题也几乎难觅踪影了。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。
DOM被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3):
Core DOM,定义了一套标准的针对任何结构化文档的对象
XML DOM,定义了一套标准的针对 XML 文档的对象
HTML DOM,定义了一套标准的针对 HTML 文档的对象。
下面,向大家演示如何增加,删除,更改节点。
javascript脚本:
//当页面装载完毕,加载操作
addOnload(initAll);
addOnload(initList);
var nodeChangingArea;
function addOnload(newFunction){
var oldOnload=window.onload;
if(typeof oldOnload=="function"){
window.onload=function(){
if(oldOnload){oldOnload();}
newFunction();}
}
else
{window.onload=newFunction;}
}
//初始化
function initAll(){
document.getElementsByTagName("form")[0].onsubmit=function(){return nodeChanger();}
nodeChangingArea=document.getElementById("modifiable");
}
//在最后增加节点
function addNode(){
var inText=document.getElementById("textArea").value;
var newText=document.createTextNode(inText);
var newGraf=document.createElement("p");
newGraf.appendChild(newText);
nodeChangingArea.appendChild(newGraf);
}
//插入节点
function insertNode(){
var inChoice=document.getElementById("grafCount").selectedIndex;
var inText=document.getElementById("textArea").value;
var newText=document.createTextNode(inText);
var newGraf=document.createElement("p");
newGraf.appendChild(newText);
var allGraf=nodeChangingArea.getElementsByTagName("p");
var oldGraf=allGraf.item(inChoice);
nodeChangingArea.insertBefore(newGraf,oldGraf);
}
//删除节点
function delNode(){
var delChoice=document.getElementById("grafCount").selectedIndex;
var allGrafe=nodeChangingArea.getElementsByTagName("p");
var killGrafe=allGrafe.item(delChoice);
nodeChangingArea.removeChild(killGrafe);
}
//替换节点(更改节点)
function replaceNode(){
var inChoice=document.getElementById("grafCount").selectedIndex;
var inText=document.getElementById("textArea").value;
var newText=document.createTextNode(inText);
var newGraf=document.createElement("p");
newGraf.appendChild(newText);
var allGraf=nodeChangingArea.getElementsByTagName("p");
var oldGraf=allGraf.item(inChoice);
nodeChangingArea.replaceChild(newGraf,oldGraf);
}
//控制节点的增删改
function nodeChanger(){
var actionType=-1;
var currentPgraphCount=nodeChangingArea.getElementsByTagName("p").length;
var radioButtonSet=document.getElementsByTagName("form")[0].nodeAction;
for (var i=0;i<radioButtonSet.length;i++)
{
if(radioButtonSet[i].checked){
actionType=i;
}
}
switch(actionType){
case 0:
addNode();
break;
case 1:
if(currentPgraphCount>0){
delNode();
break;
}
case 2:
if(currentPgraphCount>0){
insertNode();
break;
}
case 3:
if(currentPgraphCount>0){
replaceNode();
break;
}
default:
alert("No valid action was chosen");
}
document.getElementById("grafCount").options.length=0;
for(i=0;i<nodeChangingArea.getElementsByTagName("p").length;i++)
{
document.getElementById("grafCount").options[i]=new Option(i+1);
}
return false;
}
//初始化下拉框(如果已经存在段落,防止段落序号下拉框为空)
function initList(){
document.getElementById("grafCount").options.length=0;
for(i=0;i<nodeChangingArea.getElementsByTagName("p").length;i++)
{
document.getElementById("grafCount").options[i]=new Option(i+1);
}
}
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>无标题文档</title>
<script type="text/javascript" src="untitled1.js"></script>
</head>
<body>
<form action="#">
<p>请在此输入节点内容:</p>
<p><textarea id="textArea" rows="5" cols="30"></textarea></p>
<p><label><input type="radio" name="nodeAction" />在结尾增加节点</label>
<label><input type="radio" name="nodeAction" />删除节点</label>
<label><input type="radio" name="nodeAction" />插入节点</label>
<label><input type="radio" name="nodeAction" />替换(更改)节点</label></p>
段落序号:<select id="grafCount"></select>
<input type="submit" value="提交"/>
</form>
<div id="modifiable">
</div>
</body>
</html>
分享到:
相关推荐
在javascript中,用DOM节点去实现表格内容移上 移下的效果 以及对表格进行添加删除等功能的实现。
纯JavaScript操作DOM节点,通过动态JS创建元素标签,自定义元素的个数,并显示序号和对应的正则表达式验证和图片类型大小验证,,在前端用户姓名和性别多选框的取值已拿到,最后把后面的if else代码放开就可以了,...
JS原生判断DOM节点是否存在页面中 JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样...
主要介绍了JS实现DOM节点插入操作之子节点与兄弟节点插入操作,涉及JavaScript节点的创建、添加简单操作技巧,需要的朋友可以参考下
主要介绍了JavaScript实现获取dom中class的方法,涉及javascript操作dom节点的使用技巧,需要的朋友可以参考下
主要介绍了JS常见DOM节点操作,结合实例形式分析了JavaScript针对DOM节点的创建 ,插入,删除,复制,查找等操作相关函数与使用技巧,需要的朋友可以参考下
JavaScript获取HTMLDOM节点元素的方法的总结
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式、...令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过):
JAVASCRIPT操作DOM建立增加删除克隆访问节点示例宣贯.pdf
本文实例讲述了JS实现的DOM插入节点操作。分享给大家供大家参考,具体如下: 一 介绍 插入节点通过使用insertBefore()方法来实现。 insertBefore()方法将在另一个子节点前插入新的子节点。 obj.insertBefore(new,ref...
主要介绍了利用vue.js插入dom节点的相关资料,文中介绍的非常,对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
DOM是 Document Object Model的缩写,由W3C进行标准化。文档对象模型(DOM)是一个基础性概念,主要涉及网页页面元素...介绍DOM中的节点操作,主要包括:节点插入与追加、节点复制、节点删除与替换、修改节点内容等知识。
javascript将DOM节点添加到文档的方法实例分析.docx
1、获取元素节点 getElementById():获取指定唯一id的元素。 getElementByTagName():获取指定元素标签名的元素数组。 getElementByName():获取具有指定属性name的元素数组。 2、子节点 element.childNodes:返回该...
js dom操作节点仿视频网站文字幕动画代码
javascriptDom节点API个人总结.docx
更新:更新Dom节点 添加:添加一个新的节点 删除:删除一个Dom节点 要操作一个Dom节点,就必须要先获得这个Dom节点。 1 获取Dom节点 获得Dom节点代码: Title 标题一 p1 p2 var h1 = document....