DOM(文档对象模型)--1获取节点、节点的增删改

来源：互联网发布：音乐剪辑合成软件编辑：程序博客网时间：2024/06/11 13:37

1.页面文档中一共存在3种节点: 标签、属性、文本内容

1)标签节点:类型值为1
2)属性节点:类型值为2
3)文本内容节点:类型值为3

2.每个节点有三个固定属性:

1)节点名称(nodeName)

2)节点类型(nodeType)

3)节点值(nodeValue)

4)标签节点是没有值(nodeValue)的---值为null, 只胡属性节点和文本内容节点有值

HTML DOM Tree 实例

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

从上面的 HTML 中：

<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是 <html> 节点

并且：

<html> 节点拥有两个子节点：<head> 和 <body>
<head> 节点拥有一个子节点：<title> 节点
<title> 节点也拥有一个子节点：文本节点 "文档标题"
<h1> 和 <a> 节点是同胞节点，同时也是 <body> 的子节点
<h1>节点也拥有一个子节点:文本节点 "我的标题"
<a>节点拥有两个子节点:属性节点 "href"、文本节点"我的链接"

并且：

<head> 元素是 <html> 元素的首个子节点
<body> 元素是 <html> 元素的最后一个子节点
<a> 元素是 <body> 元素的首个子节点
<h1> 元素是 <body> 元素的最后一个子节点

3. 获取节点的三种方式:

1) 通过id: document.getElementById()方法 --返回一个节点对象
2) 通过name: document.getElementsByName()方法 --返回一个节点集合
3) 通过标签名: document.getElementsByTagName()方法 --返回一个节点集合

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><!-- 1.每个结点都有三个固定属性：节点名称(nodeName),节点类型(nodeType),节点的值(nodeValue) 2.页面文档中一共存在3种节点:标签、属性、文本内容 1)标签节点:类型值为1 2)属性节点:类型值为23)文本内容节点:类型值为34)标签节点是没有值(nodeValue),只有属性节点和文本内容节点有值 3.获取节点的3种方式： 1)通过id：getElementById()方法--返回一个结点 2)通过name:getElementByName()方法--返回一个集合 3)通过标签名:getElementByTagName()方法--返回一个集合 --><script type="text/javascript">function t1(){//1.通过id获取var oDiv1=document.getElementById("div1");//document.writeln("aaa");//不能在方法内输出到文档对象,否则把页面内容充掉,后面就无法再获取下面的页面内容了alert(oDiv1.nodeName+","+oDiv1.nodeType+","+oDiv1.nodeValue);//DIV,1,nullvar txtNode=oDiv1.childNodes[0];//获取div节点中的第一个孩子节点alert(txtNode.nodeName+","+txtNode.nodeType+","+txtNode.nodeValue);//#text,3,0000//获取div标签中的id属性节点//var oIdPro=oDiv1.getAttribute("id");var oIdPro=oDiv1.attributes[0];alert(oIdPro.nodeName+","+oIdPro.nodeType+","+oIdPro.nodeValue);//id,2,div1}function t2(){//2.通过name获取var oInputName=document.getElementsByName("name")[0];oInputName.value="dragon";}function t3(){//3.通过标签名获取var oInputName=document.getElementsByTagName("input")[4];oInputName.value="1234";}</script></head><body><h1>从document对象获取结点:3中方式</h1><script type="text/javascript"></script><input type="button" value="通过id获取" onclick="t1();"/><input type="button" value="通过name属性获取" onclick="t2();"/><input type="button" value="通过标签名获取" onclick="t3();"/><br/><div id="div1">0000</div><form action="">姓名：<input type="text" name="name"/> <br/>密码：<input type="password" name="pwd"/> <br/><input type="submit" value="登陸"/></form></body></html>

4.对节点进行增删改

1.添加一个标签节点

1)document.createElement()

2)node.innerText 或node.innerHTML

2.删除一个节点

1)obj.removeNode(boo) 自己调用removeNode--boo表示是否删除其子树

2)parentNode.removeChild(obj)父节点调用removeChild

3.修改(替换)一个节点

parentNode.replaceChild(newChild, oldChild)--用newChild替换oldChild

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">div{border: red solid 1px;width: 200px;padding: 30px;margin: 20px;}</style></head><body><h1>演示节点的增删改查--CRUD</h1><div id="div1">1111111111111</div><div id="div2">2222222222222</div><div id="div3">3333333333333</div><hr/><input type="button" value="创建并添加新节点" onclick="createAndAdd1();"><script type="text/javascript">function createAndAdd1(){//创建一个文本对象var oTxtNode = document.createTextNode("创建了一个文本对象");var oDiv=document.getElementById("div1");oDiv.appendChild(oTxtNode);}</script><input type="button" value="创建并添加新节点2" onclick="createAndAdd2();"><script type="text/javascript">//添加一个标签节点--document.createElement()function createAndAdd2(){//创建一个元素var oInputNode = document.createElement("input");oInputNode.type="button";oInputNode.value="一个新按钮";var oDiv=document.getElementById("div1");oDiv.appendChild(oInputNode);}</script><input type="button" value="创建并添加新节点3" onclick="createAndAdd3();"><script type="text/javascript">//添加一个标签节点--node.innerText 或node.innerHTMLfunction createAndAdd3(){var str="000000";var oDivNode=document.getElementById("div1");//oDivNode.innerText=oDivNode.innerText+str;//oDivNode.innerHTML+="<input type='button' value='新按钮'>";oDivNode.innerHTML+="<a href='http://my.csdn.net/?ref=toolbar' target='_blank'>我的博客</a>";//}</script><br/><input type="button" value="删除div2中的节点" onclick="delNode();"><script type="text/javascript">function delNode(){var oDiv2=document.getElementById("div2");/*//自杀oDiv2.removeNode();//默认为false,只删当前节点,不删孩子节点,并且长兄作为父亲oDiv2.removeNode(true);//连子树一起删除*///父杀   建议使用这种方法oDiv2.parentNode.removeChild(oDiv2);}</script><br/><input type="button" value="修改div2中的节点" onclick="updateNode();"><script type="text/javascript">function updateNode(){var oDiv1=document.getElementById("div1");var oDiv2=document.getElementById("div2");//把div1节点替换为div2节点,这里是移动替换，div2节点会没有oDiv1.parentNode.replaceChild(oDiv2, oDiv1);}</script><br/><input type="button" value="复制修改div2中的节点" onclick="updateNode2();"><script type="text/javascript">function updateNode2(){var oDiv1=document.getElementById("div1");var oDiv2=document.getElementById("div2");//先把div2克隆var oDiv=oDiv2.cloneNode(true);//在用父亲换oDiv1.parentNode.replaceChild(oDiv, oDiv1);}</script></body></html>

阅读全文

0 0