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

原创 2015年11月18日 23:05:40

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,就可以访问服务器发送回来的数据了。

JavaScript DOM编程艺术 学习笔记(六)图片库改进版

图片库这个例子 1。符合平稳退化 Fireworks 即使不支持javaScript 浏览器也会打开href属性给的链接 所以符合了平稳退化 而如果用 即选用...

javaScript DOM编程艺术2版学习笔记

  • 2015年10月23日 19:36
  • 2.46MB
  • 下载

JavaScript DOM编程艺术第二版-学习笔记

DOM的含义:Document(文档)、Object(对象)、Model(模型) 现在读完前7章,对逐步改进的图片库的代码进行简单总结。 最初版 HTML代码: Image Galle...

《javascript Dom编程艺术》学习笔记

总结: DOM方法 创建元素节点 : createElement() ,搭配 appendChild()方法。 例如:var p = document.createElement("p"); do...

JavaScript DOM编程艺术第七章Ajax学习笔记

关于Ajax原理 本地file浏览不要用webkit核心浏览器,要用firefox。否则就要搭建服务器后通过http访问。今天学习了Ajax从本地文件获取文本。遇到了些问题,在网络上都找到了解决...

JavaScript_DOM编程艺术第二版学习笔记-第7章

动态创建标记 传统技术:document.write和innerHTML 深入剖析DOM方法:createElement、createTextNode、appendChild和insert...
  • sofia92
  • sofia92
  • 2015年12月16日 09:20
  • 730

JavaScript_DOM编程艺术第二版学习笔记-第5章

第五章 平稳退化弹出窗口JS使用window对象的open()方法创建新的浏览器窗口,语法:window.open(url,name,features)三个参数是可选的。 参数1是想在新窗口中打开的网...
  • sofia92
  • sofia92
  • 2015年12月03日 15:48
  • 491

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

javascript_DOM 编程艺术学习笔记(五) 一、提高js代码的适用性和扩展性 改进前的代码: js example SnapShots 1 2 3 ...
  • ssqfzc
  • ssqfzc
  • 2015年11月18日 18:11
  • 278

JavaScript DOM 编程艺术学习笔记(一):静态标记

JavaScriptDOM编程艺术学习笔记(一):静态标记对象

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

包含了一维数组、多维数组的定义方法,对象的定义方法,变量的作用域,函数,...
  • ssqfzc
  • ssqfzc
  • 2015年11月17日 11:18
  • 340
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript_DOM 编程艺术学习笔记(六)
举报原因:
原因补充:

(最多只允许输入30个字)