关闭

javascript_DOM 编程艺术学习笔记(六)

标签: javascript节点的添加文本节点
328人阅读 评论(0) 收藏 举报
分类:

javascript_DOM 编程艺术学习笔记(六)


一、元素节点的创建

var pElement = document.createElement("p"); 

创建了一个<p>标签的元素节点,里面没有任何东西,也没在DOM树上。也就无法显示。

二、元素节点的添加

var bodyElement = document.getElementsByTagName("body")[0];
bodyElement .appendChild(pElement );

将<p>节点添加到body元素节点中

三、文本节点的添加

var pText = document.createTextNode("my node");
pElement .appendChild(emText);
将文本节点添加到p节点中

四、例子:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>welcome to my first web!</p>
	<script type="text/javascript">
		var aNode = document.createElement("p");
		var ptext = document.createTextNode("This is")
		aNode.appendChild(ptext);
		var emNode = document.createElement("em");
		var emText = document.createTextNode("my");
		emNode.appendChild(emText);
		aNode.appendChild(emNode);
		var pRightText = document.createTextNode(" content.");
		aNode.appendChild(pRightText);
		var pNode = document.getElementsByTagName("p")[0];
		pNode.appendChild(aNode);
	</script>
</html>

五、插入一个新元素

1、在元素前插入一个新元素

DOM提供了insertBefore()方法,要使用他需要做三件事:

1)新元素:需要插入的元素(newElement)

2)目标元素:在那个元素前插入(targetElement)

3)父元素:目标元素的父元素(parentElement)

parentElement.insertBefore(newElement,targetElement);

上代码:

var newElement = document.createElement("p");
var newElementText = document.createTextNode("呵呵");
newElement.appendChild(newElementText);
var targetElement = document.getElementsByTagName("h1")[0];
var parentElement = targetElement.parentNode;
parentElement.insertBefore(newElement,targetElement);

2、在元素后面插入一个新元素(DOM没有提供方法:)

上代码:

/**
 * 在已有元素后面插入一个新元素
 * @param  {[element]} newElement    [新元素]
 * @param  {[element]} targetElement [目标元素]
 */
function insertAfter(newElement,targetElement) {
	var parentElement = targetElement.parentElement;
	if (parentElement.lastChild == targetElement) {
		parentElement.appendChild(newElement);
	}else{
		parentElement.insertBefore(newElement,targetElement.nextSibling);
	}
}

3、示例:

addLoadEvent(appendElementToFooter);
addLoadEvent(showPicLibiary);

/**
 * 追加元素到文档结尾,实现js和html分离
 * @return {[type]} [description]
 */
function appendElementToFooter () {
	// 创建img标签
	var imgElement = document.createElement("img");
	imgElement.setAttribute("src","images/5.gif");
	imgElement.setAttribute("alt","屌丝男");
	imgElement.setAttribute("id","placeholder");

	// 创建p标签
	var pElement = document.createElement("p");
	pElement.setAttribute("id","description");
	pElement.setAttribute("name","description");
	var pElementText = document.createTextNode("choose an image!");
	pElement.appendChild(pElementText);

	// 将节点加入到DOM树
	var scriptElement = document.getElementsByTagName("script")[0];
	var bodyElement = scriptElement.parentNode;
	bodyElement.insertBefore(imgElement, scriptElement);
	insertAfter(pElement, imgElement);
}

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

/**
 * 图片库显示代码
 */
function showPicLibiary () {
	if (!document.getElementById) return false;
	// 判断哪个属性是否存在,来确定浏览器是否支持这个js
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById("imageGelley")) false;
	var gelleryNode = document.getElementById("imageGelley");
	var links = gelleryNode.getElementsByTagName("a");
	for (var i = 0; i < links.length; i++) {
		links[i].onclick = function() {	
			return !showPic(this);
		}
	}
}

/**
 * 在已有元素后面插入一个新元素
 * @param  {[element]} newElement    [新元素]
 * @param  {[element]} targetElement [目标元素]
 */
function insertAfter(newElement,targetElement) {
	var parentElement = targetElement.parentElement;
	if (parentElement.lastChild == targetElement) {
		parentElement.appendChild(newElement);
	}else{
		parentElement.insertBefore(newElement,targetElement.nextSibling);
	}
}

function showPic(element) {
	if(!document.getElementById("placeholder")) return false;
	if(!document.getElementById("description")) return false;
	var imgElement = document.getElementById("placeholder");
	if(imgElement.nodeName != "IMG") return false;
	imgElement.src = element.href;
	var descriptionNode = document.getElementById("description");
	if(description.firstChild.nodeType == 3){ // 确定是文本节点
		description.firstChild.nodeValue = element.title;
	}
	return true;
}

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js example</title>	
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<h1>SnapShots</h1>
	<ul id="imageGelley">
		<li class="11"><a href="images/1.jpg" title="1"><img src="images/1.jpg"></a></li>
		<li class="22"><a href="images/2.jpg" title="2"><img src="images/2.jpg"></a></li>
		<li class="33"><a href="images/3.jpg" title="3"><img src="images/3.jpg"></a></li>
		<li class="44"><a href="images/4.jpg" title="4"><img src="images/4.jpg"></a></li>
	</ul>
	<script type="text/javascript" src="js/index.js"></script>
</body>
</html> 

六、ajax

上代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax</title>
</head>
<body>
	<script type="text/javascript" src="index.js"></script>
</body>
</html>
js代码

addLoadEvent(getNewContent);
var request;
function getNewContent () {
	request = getHTTPObject();
	if(request){
		request.open("GET","http://localhost/jstext/example.txt",true);
		request.onreadystatechange = function(){
			if(request.readyState == 4){
				var para = document.createElement("p");
				var txt = document.createTextNode(request.responseText);
				para.appendChild(txt);
				document.getElementsByTagName("body")[0].appendChild(para);
			}
		};
		request.send(null);
	}else{
		alert("Sorry, your browser doesn\'t supoort XMLHttpRequest");
	}
}

function getHTTPObject () {
	if(typeof XMLHttpRequest == "undefined"){ // 判断是否为IE浏览器
		// IE浏览器
		XMLHttpRequest = function(){
			try{
				return new ActiveXObject("Msxml2.XMLHTTP.6.0");
			}catch(e){}
			try{
				return new ActiveXObject("Msxml2.XMLHTTP.3.0");
			}catch(e){}
			try{
				return new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e){}
		return false;
		}
	}
	return new XMLHttpRequest();
}

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}
example.txt

this was loaded asynchronously!
一定要将这三个文件放入web服务器进行访问,不然会获取不到数据。
服务器在向XMLHttpRequest对象发回响应时,该对象有许多属性可用,浏览器会在不同的阶段更新readyState属性的值,它有5个可能的值:

1)0表示未初始化

2)1表示正在加载

3)2表示加载完毕

4)3表示正在交互

5)4表示完成

只要readyState属性的值变成了4,就可以访问服务器发送回来的数据了。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:12290次
    • 积分:508
    • 等级:
    • 排名:千里之外
    • 原创:40篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条