DOM编程艺术第7章-动态创建标记-读书笔记

于 2017-02-11 18:04:35 发布
阅读量199 收藏 1
点赞数 1
文章标签： dom 读书笔记 编程 学习 DOM编程艺术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37505620/article/details/54985847
版权

动态创建标记

代码真的是一个考验细致的东西，因为一个字母或者半个括号搞错了就会造成整个的代码的错误，而导致根本不显示已经加载了这个脚本。

这一章的代码由于中间出了一些问题，所以在找问题出在哪里时修改了不少已经写出来的部分，结果导致最后可以运行的代码跟书上不完全一样。

7.2

这部分所要实现的功能是利用脚本在HTML页面空白的一个div块里创建出一段文字。

HTML部分

<!DOCTYPE html>
<html lang = zh-cmn-Hans>
<head>
<meta charset = utf-8>
<title>
	实验
</title>
<script type = 'text/javascript' src = 'demo.js'>
</script>
</head>
<body>

<div id = 'testdiv'>
</div>

</body>
</html>

7.2.3

单输出“Hello world”

JS部分

window.onload = function(){
	var para = document.createElement('p');
	var testdiv = document.getElementById('testdiv');
	testdiv.appendChild(para);
	var txt = document.createTextNode('Hello World');
	para.appendChild(txt);
}

7.2.4

输出一段稍复杂的文字

JS部分

window.onload = function(){
	var testdiv = document.getElementById('testdiv');
	var para = document.createElement('p');
	var txt1 = document.createTextNode('This is ');
	var emphasis = document.createElement('em');
	var txt2 = document.createTextNode('my');
	var txt3 = document.createTextNode(' content.');
	emphasis.appendChild(txt2);
	para.appendChild(txt1);
	para.appendChild(emphasis);
	para.appendChild(txt3);
	testdiv.appendChild(para);
}								//动态创建一个<p>段落并输入文字

7.3

重回图片库，改进placeholder部分和description部分

HTML部分

<!DOCTYPE html>
<html lang = zh-cmn-Hans >
<head>
<meta charset = utf-8 />
<title>
	JS图片库改进版
</title>
<link rel = 'stylesheet' href = 'styles/layout.css' media = 'screen' />
</head>
<body>
<h1>快照</h1>
<ul id = 'imagegallery'>
	<li>
		<a href = 'images/1.png' title = '第一张图片'>
			<img src = 'images/1.png' alt = '第一张图片' />
		</a>
	</li>
	<li>
		<a href = 'images/2.jpg' title = '第二张图片'>
			<img src = 'images/2.jpg' alt = '第二张图片' />
		</a>
	</li>
	<li>
		<a href = 'images/3.jpg' title = '第三张图片'>
			<img src = 'images/3.jpg' alt = '第三张图片' />
		</a>
	</li>
	<li>
		<a href = 'images/4.png' title = '第四张图片'>
			<img src = 'images/4.png' alt = '第四张图片' />
		</a>
	</li>
</ul>

<script type = 'text/javascript' src = '7-showPic.js'>
</script>

</body>
</html>

JS部分

unction showPic(whichpic) {
	if (!document.getElementById('placeholder')) return false;		//验证结束
	var source = whichpic.getAttribute('href');				//得到此对象的href的值
	var placeholder = document.getElementById('placeholder');		//找到placeholder
	placeholder.setAttribute('src', source );				//修改placeholder的src值为之前找到的对象的href值
	if (document.getElementById('description')){				//检查是否存在ID为description的元素
		var text = whichpic.getAttribute('title');			//得到所点击对象的title的值
		var description = document.getElementById('description');	//找到ID为description的那部分元素
		description.firstChild.nodeValue = text;			//description那部分的第一个元素的值修改为text的值	
	}
	return true;								//返回true，为prepareGallery函数做准备
}

function prepareGallery(){
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById) return false;
	if (!document.getElementById('imagegallery')) return false;		//验证结束，下面开始添加每一个<li>里的<onclick>属性。
	var gallery = document.getElementById('imagegallery');			//得到ID是imagegallery的所有元素
	var links = gallery.getElementsByTagName('a');				//将imagegallery里的所有<a>元素提取出来
	for (var i = 0; i < links.length; i++){
		links[i].onclick = function(){
			return !showPic(this);					//巧妙的利用shiwPic返回的值
		}		
	}
}

function preparePlaceholder (){
	if(!document.createElement) return false;
	if(!document.createTextNode) return false;
	if(!document.getElementById) return false;
	if(!document.getElementById('imagegallery')) return false;		//可行性检查完毕
	var placeholder = document.createElement('img');			//创建<img>标签，存储为placeholder
	placeholder.setAttribute('id' , 'placeholder');				//在<img>里添加id属性
	placeholder.setAttribute('src' , 'images/5.jpg');			//在<img>里添加src属性
	placeholder.setAttribute('alt' , '图片展示位置');			//在<img>里添加alt属性
	var description = document.createElement('p');				//创建<p>标签,存储为description
	description.setAttribute('id' , 'description');				//在<p>里添加id属性
	var desctext = document.createTextNode('选择一张图片');			//创建文本对象，预存储在desctext里
	description.appendChild(desctext);					//将desctext添加为description的一个子元素
	var gallery = document.getElementById('imagegallery');			//找到ID为imagegallery的那部分元素,存储为gallery
	insertAfter(placeholder , gallery);					//将placeholder放在gallery里元素的后面
	insertAfter(description , placeholder);					//再将description放在placeholder的后面
}



function insertAfter(newElemment , targetElement){				//编写insertAfter函数
	var parent = targetElement.parentNode;
	if (parent.lastChild == targetElement){
		parent.appendChild(newElemment);
	}else{
		parent.insertBefore(newElemment , targetElement.nextSibling);
	}
}

function addLoadEvent(func){							//编写addLoadEvent函数
	var oldonload = window.onload;
	if (typeof window.onload != 'function'){
		window.onload = func
	}else{
		window.onload = function(){
			oldonload();
			func();
		}
	}
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
麻烦的地方在于千万不能写成任何一个函数名或者符号或是单词，否则会导致整体的错误。

7.4

Ajax的函数没有成功运行，网上说Ajax的运行需要服务器环境（好像是这个意思），但是也不能排除是我的函数有出了问题。并且在最后书上也并没有写出最后版本的代码，尤其是几个小块的代码编写完成后有一些操作没有看懂。最后下载下来的官方代码压缩包里也没有找到这一小节的代码。

HTML部分

<!DOCTYPE html>
<html lang = zh-cmn-Hans >
<head>
<meta charset = utf-8 />
<title>
	Ajax练习
</title>
</head>
<body>
<div id = 'new'></div>

<script scr = 'scripts/addLoadEvent.js'></script>
<script scr = 'scripts/getHTTPObject.js'></script>
<script scr = 'scripts/getNewContent.js'></script>

</body>
</html>
需在HTML文件所在的同一个文件夹里创建example.txt文件 

This was loaded asynchronously!
addLoadEvent.js部分发JS代码为空

getHTTPObject.js部分JS代码为

function getHTTPObject(){
	if (typeof XMLHttpRequest == 'undefined'){
		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();
}
getNewContent部分JS代码为 

function getNewContent(){
	var request = getHTTPObject();
	if (request){
		request.open('GET', 'example.txt'; true);
		request.onreadystatechange = function(){
			if (request.readyState == 4){
				alert('回复已被接受');
				var para = document.createElement('p');
				var txt = document.createTextNode(request.responseText);
				para.appendChild(txt);
				document.getElementById('new').appendChild(para);	
			}
		};
		request.send(null);
	}else{
		alert('sorry,your browser doesn\'t support MXLHttpResquest');
	}
	alert('函数加载完成');
}
addLoadEvent(getNewContent);

IVAN锂
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值