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