javascript（十三） DOM的增刪查改

時間 2019-11-24

標籤 javascript 十三 dom 增刪欄目 JavaScript 简体版

原文原文鏈接

javascript（十三） DOM的增刪查改javascript

DOM1老版本下的增刪查改：html

最老版本DOM修改基本是藉助DOM集合進行操做，這個版本稱爲DOM1：java

DOM的集合有表單集合，圖片集合，連接，描點集合。就用鏈接集合進行示例操做：node

查找操做：app

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 新版本下的增刪查改：根據樹形結構進行總體遍歷。code

節點.nodeName//節點名htm

節點.nodeValue //節點值圖片

節點.nodeType//節點類型ip

節點.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>

記不清楚函數的能夠查看系列文章十，很詳細函數說明。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。