您的位置：首页 > Web前端 > JavaScript

javascript（十三） DOM的增删查改

2016-06-04 00:00 393 查看

javascript（十三） DOM的增删查改

DOM1老版本下的增删查改：

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

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

查找操作：

[code=language-javascript]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);
}
}

修改操作：

[code=plain]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//节点下的所有节点

[code=language-javascript]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

对指定文档树进行修改：

[code=language-javascript]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页面

[code=language-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>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航