javascript_DOM 编程艺术学习笔记（六）

最新推荐文章于 2024-05-03 11:47:20 发布

ssqfzc

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量554

点赞数

分类专栏： js基础文章标签： javascript 节点的添加文本节点

本文链接：https://blog.csdn.net/ssqfzc/article/details/49914527

版权

js基础专栏收录该内容

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

ssqfzc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript_DOM 编程艺术学习笔记（六）

javascript_DOM 编程艺术学习笔记（六）一、元素节点的创建var pElement = document.createElement("p"); 创建了一个&lt;p&gt;标签的元素节点，里面没有任何东西，也没在DOM树上。也就无法显示。二、元素节点的添加var bodyElement = document.getElementsByTagName("body")[0];bodyEl...
复制链接

扫一扫