侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130555 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

javascript(十三) DOM的增删查改

2024-05-10 星期五 / 0 评论 / 0 点赞 / 5 阅读 / 3999 字

javascript(十三) DOM的增删查改 DOM1老版本下的增删查改: 最老版本DOM修改基本是借助DOM集合进行操作,这个版本称为DOM1: DOM的集合有表单集合,图片集合,链接

                                                 javascript(十三) DOM的增删查改

    DOM1老版本下的增删查改:

    最老版本DOM修改基本是借助DOM集合进行操作,这个版本称为DOM1:

    DOM的集合有表单集合,图片集合,链接,描点集合。就用连接集合进行示例操作:

    查找操作:

window.onload=function(){var theLinks=document.links;var hrefs=document.getElementById("hrefs");	for(var i=0;i<theLinks.length;i++){		var href=theLinks.item(i).href;	     alert(href);	}}

    修改操作:

window.onload=function(){var theLinks=document.links;var hrefs=document.getElementById("hrefs");	for(var i=0;i<theLinks.length;i++){		var href=theLinks.item(i).href;		var p=document.createElement("p");		var txt=document.createTextNode(href);		p.appendChild(txt);		hrefs.appendChild(p);	}	document.getElementById("btn").onclick=btn;}function btn(){	var theLinks=document.links;	for(var i=0;i<theLinks.length;i++){		document.links.item(i).href="event.html";	}	}

    DOM2core 新版本下的增删查改:根据树形结构进行整体遍历。

    节点.nodeName//节点名

    节点.nodeValue //节点值

    节点.nodeType//节点类型

    节点.childNodes//节点下的所有节点

window.onload=test;function test(){	var bodyName=document.body;	var divName=bodyName.childNodes;	alert(divName.length);	for(var i=0;i<divName.length;i++){		alert(divName[i].nodeName);	}	}

对元素属性的修改是来自:

<element>.getAttribute(name) 
<element>.setAttribute(name, value)这些方法分别获得和设置元素中name属性的值 
<element>.removeAttribute(name) 这个方法从元素中删除属性name 

 对指定文档树进行修改:

window.onload=function(){	document.getElementById("add").onclick=add;		document.getElementById("remove").onclick=remove;		document.getElementById("update").onclick=update;		}function add(){	var header=document.getElementById("header");	var p=document.createElement("h1");	var txt=document.createTextNode("add a header");	p.appendChild(txt);	header.appendChild(p);	}function remove(){	var header=document.getElementById("header");	if(header.firstChild){		header.removeChild(header.firstChild);	}	}function update(){	var content=document.getElementById("content");	var p=document.createElement("p");	var txt=document.createTextNode("update a content");	p.appendChild(txt);		var pNode=document.getElementById("p");	content.replaceChild(p,pNode);		}

//增加删除修改都有了,html页面

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<script type="text/javascript" src="js/dc.js" ></script>	</head>	<body>		<div id="header">			<h1>header so funny!</h1>       </div>        <div id="content">        	<p id="p">content is so fun!!</p>        </div>                <input id="add" type="button"  value="add"/>                <input id="remove" type="button"  value="remove"/>                <input id="update" type="button"  value="update"/>	</body></html>

记不清楚函数的可以查看系列文章十,很详细函数说明。

广告 广告

评论区