<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom编程</title>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/dom.css" />
</head>
<body>
<h1 class="imgtitle">Snapshots</h1>
<ul id="imagegallery" class="gallery">
<li>
<a href="images/sample/fireworks.jpg" title="A fireworks display">
<img src="images/sample/thumbnail_fireworks.jpg" alt="Fireworks" />
</a>
</li>
<li>
<a href="images/sample/coffee.jpg" title="A cup of black coffee">
<img src="images/sample/thumbnail_coffee.jpg" alt="Coffee" />
</a>
</li>
<li>
<a href="images/sample/rose.jpg" title="A red,red rose">
<img src="images/sample/thumbnail_rose.jpg" alt="Rose" />
</a>
</li>
<li>
<a href="images/sample/bigben.jpg" title="The famous clock">
<img src="images/sample/thumbnail_bigben.jpg" alt="Big Ben" />
</a>
</li>
</ul>
<h1>What is the Document Object Model?</h1>
<p>
The <abbr title="World Wide Web Consortium">W3C</abbr> defines
the <abbr title="Document Object Model">DOM</abbr> as:
</p>
<blockquote cite="http://www.w3.org/DOM/">
<p>
A platform- and language-neutral interface that will allow programs
and scripts to dynamically access and update the
content, structure and style of documents.
</p>
</blockquote>
<blockquote cite="http://www.baidu.com">
<p>
A platform- and language-neutral interface that will allow programs
and scripts to dynamically access and update the
content, structure and style of documents.
</p>
</blockquote>
<p>
It is an <abbr title="Application Programming Interface">API</abbr>
that can be used to navigate <abbr title="HyperText Markup Language">
HTML</abbr> and <abbr title="eXtensible Markup Language">XML
</abbr> documents.
</p>
<table>
<caption>Itinerary</caption>
<thead>
<tr>
<th>When</th>
<th>Where</th>
</tr>
</thead>
<tr>
<td>June 9th</td>
<td>Portland,<abbr title="Oregon">OR</abbr></td>
</tr>
<tr>
<td>June 10th</td>
<td>Seattle,<abbr title="Washington">WA</abbr></td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento,<abbr title="California">CA</abbr></td>
</tr>
</table>
<h1>Web Design</h1>
<p>There are the things you should know.</p>
<ol id="linklist">
<li>
<a href="">Structure</a>
</li>
<li>
<a href="">Presentation</a>
</li>
<li>
<a href="">Behavior</a>
</li>
</ol>
<div id="slideshow" class="slideshow">
<img src="images/sample/topics.gif" alt="building blocks of web design" id="preview" />
</div>
<script type="text/javascript" src="js/dom.js"></script>
<script>
/*
* 1、五个常用的DOM方法：getElementById(),getElementsByTagName(),getElementsByClassName()
* getAttribute(),setAttribute()
* 补充：
* 1.1、通过css选择器选取元素（document方法）
* querySelectorAll(cssStr)返回一个表示文档中匹配选择器的所有元素的NodeList对象
* querySelector(cssStr)返回匹配选择器的第一个匹配的元素
*
*2、getElementsByClassName()和getELementsByTagName()可以与getElementById()组合使用
* var shop=document.getElementById("purchases");
* var sales=shop.getElementsByClassName("sale");//查找id为purchases下的所有class为sale的元素集合(是个数组)
* 3、childNodes属性
* childNodes属性可以用来获取任何一个元素的所有子元素，它是包含这个元素全部子元素的数组
* var bodyelement=document.getElementsByTagName("body")[0];
* var elements=bodyelement.childNodes;//得到body下所有子元素(是数组)
* 4、 nodeType属性
* 4.1、元素节点的nodeType属性值是1
* 4.2、属性节点的nodeType属性值是2
* 4.3、文本节点的nodeType属性值是3
* 5、nodeValue属性
* 设置或得到一个节点的值
* 6、firstChild和lastChild属性,parentNode父节点，nextSibling下一个兄弟节点,previousSibling 上一个兄弟节点
* node.firstChild等价于node.childNodes[0],某个元素下的第一个子节点
* node.lastChild等价于node.childNodes[node.childNodes.length-1];
* 7、createElement()方法
* document.createElement(nodeName);
* var para=document.createElement("p"); //创建一个文档碎片
* 8、appendChild()方法
* 把新创建的节点插入某个文档的节点树里
* var testdiv=document.getElementById("testdiv);
* var para=document.createElement("p");
* testdiv.appendChild(para);
* 9、createTextNode()方法
* 创建文本节点
* var txt=document.createTextNode("Hello world);
* var para=document.createElement("p");
* para.appendChild(txt);
* 10、insertBefore()
* 把一个新元素插入到一个现有元素的前面
* parentElement.insertBefore(newElement,targetElement);(parentElement实际上可以用targetElement.parentNode来表示)
* 11、自定义一个函数：insertAfter()
* 需求：把一个新元素插入到一个现有元素的后面
/**
newElement: 需要插入的新元素
targetElement: 目标元素（也就是在这个元素后面插入新元素）
*/
function insertAfter(newElement, targetElement) {
let parent = targetElement.parentNode
// 如果目标元素是当前父元素的最后一个元素，则直接在父元素里面追加新元素
// 否则，在目标元素的下一个兄弟元素前插入新元素
if (parent.lastChild == targetElement) {
parent.appendChild(newElement)
} else {
parent.insertBefore(newElement, targetElement.nextSibling)
}
}
* 12、复制(拷贝)节点
* cloneNode(boolean);
//复制整个节点和里面的内容；
* node.cloneNode(true);
//只复制节点不要里面的内容，复制后的新节点，也不会被自动插入到文档
* node.cloneNode(false);
*
12、hasChildNodes() 检查一个节点是否存在子节点
console.log(document.documentElement.hasChildNodes());
13、hasAttributes() 检查该元素中是否存在属性
console.log(body.childNodes[1].hasAttributes());
//attributes.length 获取属性的个数
console.log(body.childNodes[1].attributes.length);
14、textContent(innerText) 获取文本内容
var text = body.childNodes[1].textContent||body.childNodes[1].innerText;
console.log("text:",text);
console.log("innerHTML:",body.childNodes[1].innerHTML);
15、DOM节点的修改
var my = document.getElementsByClassName('opener')[0];
my.innerHTML = 'final!!!';
my.innerHTML ='百度';
console.log(my.firstChild.firstChild.nodeValue);
my.style.border = '1px solid red';
my.style.fontWeight = 'bold';
my.align = 'right';
my.name = '百度';
my.id = 'baidu';
16、replaceChild('要插入的节点', '要替换的节点') 返回替换的节点并从文档中移除。
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
17、removeChild('需要移除的节点')。
var formerLastChild = someNode.removeChild(someNode.lastChild);
//二、只适用于HTML的DOM对象
//14、document.body === document.getElementByTagName('body')[0];
//15、document.images: 当前页面中所有图片的集合
/*
等价于： document.getElementsByTagName('img');
*/
//17、document.links 包含页面中所有A标签
//18、document.anchors 包含所有带有name属性的A连接
//19、document.forms 包含页面中所有form标签的一个集合
console.log(document.forms[0]);
//通过elements属性访问form里面的input元素
console.log(document.forms[0].elements[0]);
//设置input的属性
document.forms[0].elements[0].maxLength = 10;
//通过name属性来访问
console.log(document.forms[0].elements['password']);
document.forms[0].elements['password'].maxLength = 10;
//20、Cookies、Title、Referrer、Domain
//获取cookie
console.log(document.cookie)
//修改页面在浏览器窗口中所显示的标题
document.title = 'dom测试页面';
//获取我们之前访问过的页面URL
console.log(document.referrer);
//获取当前所载入页面的域名
console.log(document.domain);
//21、document.title 获取网页的title信息
*
*
*
*
* */
util.addLoadEvent(dom.createImgArea);
util.addLoadEvent(dom.showimg);
util.addLoadEvent(dom.showAbbr);
util.addLoadEvent(dom.showLink);
util.addLoadEvent(dom.zebraTable);
util.addLoadEvent(function(){
var preview=document.getElementById("preview");
preview.style.position="absolute";
preview.style.left="0px";
preview.style.top="0px";
var links=document.getElementById("linklist");
var as=links.getElementsByTagName("a");
var i= 0,
length=as.length;
for(;i<length;i++){
(function(j){
as[j].onmouseover=function(){
dom.imgAnimate("preview",-(j+1)*100,0,10);
}
})(i);
}
});
</script>
</body>
</html>百度';
console.log(my.firstChild.firstChild.nodeValue);
my.style.border = '1px solid red';
my.style.fontWeight = 'bold';
my.align = 'right';
my.name = '百度';
my.id = 'baidu';
16、replaceChild('要插入的节点', '要替换的节点') 返回替换的节点并从文档中移除。
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
17、removeChild('需要移除的节点')。
var formerLastChild = someNode.removeChild(someNode.lastChild);
//二、只适用于HTML的DOM对象
//14、document.body === document.getElementByTagName('body')[0];
//15、document.images: 当前页面中所有图片的集合
/*
等价于： document.getElementsByTagName('img');
*/
//17、document.links 包含页面中所有A标签
//18、document.anchors 包含所有带有name属性的A连接
//19、document.forms 包含页面中所有form标签的一个集合
console.log(document.forms[0]);
//通过elements属性访问form里面的input元素
console.log(document.forms[0].elements[0]);
//设置input的属性
document.forms[0].elements[0].maxLength = 10;
//通过name属性来访问
console.log(document.forms[0].elements['password']);
document.forms[0].elements['password'].maxLength = 10;
//20、Cookies、Title、Referrer、Domain
//获取cookie
console.log(document.cookie)
//修改页面在浏览器窗口中所显示的标题
document.title = 'dom测试页面';
//获取我们之前访问过的页面URL
console.log(document.referrer);
//获取当前所载入页面的域名
console.log(document.domain);
//21、document.title 获取网页的title信息
*
*
*
*
* */
util.addLoadEvent(dom.createImgArea);
util.addLoadEvent(dom.showimg);
util.addLoadEvent(dom.showAbbr);
util.addLoadEvent(dom.showLink);
util.addLoadEvent(dom.zebraTable);
util.addLoadEvent(function(){
var preview=document.getElementById("preview");
preview.style.position="absolute";
preview.style.left="0px";
preview.style.top="0px";
var links=document.getElementById("linklist");
var as=links.getElementsByTagName("a");
var i= 0,
length=as.length;
for(;i<length;i++){
(function(j){
as[j].οnmοuseοver=function(){
dom.imgAnimate("preview",-(j+1)*100,0,10);
}
})(i);
}
});
</script>
</body>
</html>
dom.js
/**
* Created by Administrator on 2016/8/14.
*/
var dom={
//点击小图展示相应的大图
showimg: function(){
var targetwrap=document.getElementById("imagegallery");
var alist=targetwrap.getElementsByTagName("a");
//alert(alist.length);
var i= 0,length=alist.length;
for(;i<length;i++){
alist[i].addEventListener("click",function(e){
//alert(t);
util.preventDefault(e);
var self=this;
var href=self.getAttribute("href"),
title=self.getAttribute("title");
var imgid=document.getElementById("placeholder");
imgid.setAttribute("src",href);
imgid.setAttribute("alt",title);
var description=document.getElementById("description");
description.firstChild.nodeValue=title;//给文本节点赋值
});
}
},
//动态创建图片img元素和description描述元素
createImgArea: function(){
var img=document.createElement("img");
util.attr(img,{id: "placeholder",src: "images/sample/placeholder.gif",alt: "my image gallery"});
var targetElem=document.getElementById("imagegallery");
util.insertAfter(img,targetElem);
var pElem=document.createElement("p"),
txtElem=document.createTextNode("Choose an image.");
util.attr(pElem,{id: "description",class: "description"});
var imgElem=document.getElementById("placeholder");
pElem.appendChild(txtElem);
util.insertAfter(pElem,imgElem);
},
//显示"缩略语列表"
/*
* 将所有的abbr缩略语找出来
* 取得文本值和tittle里面的解释文字
* 放入dl dd dt列表里
* */
showAbbr: function(){
var abbrs=document.getElementsByTagName("abbr");
var i= 0,
length=abbrs.length,
abbrAry=[];
for(;i<length;i++){
var curabbr=abbrs[i];
var title=curabbr.getAttribute("title"),
txt=curabbr.firstChild.nodeValue;
abbrAry[txt]=title;
}
var dlElem=document.createElement("dl");
for(var abbr in abbrAry){
var dtElem= document.createElement("dt"),
ddElem=document.createElement("dd"),
dtTxt=document.createTextNode(abbr),
ddTxt=document.createTextNode(abbrAry[abbr]);
dtElem.appendChild(dtTxt);
ddElem.appendChild(ddTxt);
dlElem.appendChild(dtElem);
dlElem.appendChild(ddElem);
}
var hElem=document.createElement("h2"),
hTxt=document.createTextNode("Abbreviations"),
bodyElem=document.getElementsByTagName("body")[0];
bodyElem.appendChild(hElem);
bodyElem.appendChild(dlElem);
},
//显示文献来源链接表
showLink: function() {
var blockquotes=document.getElementsByTagName("blockquote"),
length=blockquotes.length;
if(length<=0){
return;
}
var i= 0;
for(;i<length;i++){
var curBlock=blockquotes[i];
if(!curBlock.getAttribute("cite")){
continue;
}
//获取当前blockquote下的所有元素节点
var allElementNodes=curBlock.getElementsByTagName("*"),
//获取当前blockquote包含的所有元素节点中的最后一个元素节点
//使用lastChild获取最后一个节点，可能不是元素节点，需要判断nodeType
lastElementNode=allElementNodes[allElementNodes.length-1];
var aElement=document.createElement("a"),
aTxt=document.createTextNode("source");
aElement.appendChild(aTxt);
var citeUrl=curBlock.getAttribute("cite");
aElement.setAttribute("href",citeUrl);
var sup=document.createElement("sup");
sup.appendChild(aElement);
lastElementNode.appendChild(sup);
}
},
//表格斑马线效果
/*
* 获取所有的tr
* 设置偶数的tr背景色为#ffc;
* */
zebraTable: function() {
var tables=document.getElementsByTagName("table");
var i= 0,
j= 0,
odd=false,
tbLength=tables.length;
if(tbLength < 1){
return;
}
for(;i<tbLength;i++){
var curTable=tables[i];
var trArys=curTable.getElementsByTagName("tr");
for(length=trArys.length;j<length;j++){
var curTr=trArys[j];
if(odd){
curTr.style.backgroundColor="#ffc";
odd=false;
}
else {
odd=true;
}
}
}
},
//鼠标移动到链接，图片产生动态显示效果
/*
* element: 目标元素
* endX: 元素最终达到的left的值
* endY: 元素最终达到的top的值
* time: 间隔时间
* 需求：图片慢慢滑动显示到指定位置
* 注意的问题：当用户快速来回移动到链接时，会导致动画左右摇摆
* */
imgAnimate: function(elementID,endX,endY,time){
//console.log(elemX+"\n"+elemY);
var element=document.getElementById(elementID);
console.log(element.style.left);
if(element.movement){//避免用户快速来回移动时，动画产生左右摇摆的情况
console.log("element.movement:"+element.movement);
clearTimeout(element.movement);
}
var elemX=parseInt(element.style.left),
elemY=parseInt(element.style.top);
if(elemX==endX&&elemY==endY){
return true;
}
if(elemX<endX){
elemX++
}
if(elemX>endX){
elemX--;
}
if(elemY<endY){
elemY++
}
if(elemY>endY){
elemY--;
}
element.style.left=elemX+"px";
element.style.top=elemY+"px";
var fn="dom.imgAnimate('"+elementID+"',"+endX+","+endY+","+time+")";
element.movement=setTimeout(fn,time);
}
}
var util= {
//阻止冒泡
stopPropagation: function (e) {
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
},
//阻止浏览器默认行为
preventDefault: function (e) {
if (e && e.preventDefault) {
e.preventDefault();
} else {
//IE中阻止函数默认动作的方式
window.event.returnValue = false;
}
},
//共享load事件
/*
func: 要添加的函数名
*/
addLoadEvent: function(func){
var oldonload=window.onload;//原来的onload函数
if(typeof oldonload!="function"){//如果不是函数
window.onload=func;
}else {
window.onload=function(){
oldonload();
func();
}
}
},
//把一个新元素插入到一个现有元素的后面（自定义的insertAfter()函数）
/*
* newElement: 将被插入的新元素
* targetElement: 目标元素
* */
insertAfter: function(newElement,targetElement){
var parentelement=targetElement.parentNode;
//当前的目标元素是否是其父元素的最后一个子元素
if(parentelement.lastChild==targetElement){
parentelement.appendChild(newElement);//直接在其父元素里面追加进去
}else {
parentelement.insertBefore(newElement,targetElement.nextSibling);//在目标元素的下一个兄弟元素之前插入元素
}
},
//设置多个元素属性的方法
/*
* obj：对象
* {
* id: "my",
* src: "images/sample/placeholder.gif",
* alt: "my image gallery",
* }
* */
attr: function(target,obj,str){
if(arguments.length==3){
target.setAttribute(obj,str);
}else {
if(typeof obj=="string"&&typeof str=="undefined"){
return target.getAttribute(obj);
}else {
if(util.type(obj)!="object"){
return;
}
for(var sign in obj){
target.setAttribute(sign,obj[sign]);
}
}
}
},
//判断对象的类型
type: function(obj){
var jude=Object.prototype.toString.call(obj);
jude=jude.toLocaleLowerCase();
switch(jude){
case "[object function]":
return "function"
break;
case "[object array]":
return "array"
break;
case "[object object]":
return "object"
break;
default: return "null";
}
},
//获取下一个元素节点
/*
* node: 传入当前节点的下一个节点元素，node.nextSibling
* */
getNextElement: function(node) {
if(node.nodeType==1){//如果是元素节点
return node;
}
else {
return util.getNextElement(node.nextSibling);
}
},
//设置class值
/*
* element: dom元素
* value: 设置的class值
* */
addClass: function(element,value){
//如果当前元素还没有设置过class，则直接赋值
if(!element.className){
element.className=value;
}
else {
var newClassName=element.className;
newClassName+=" ";
newClassName+=value;
element.className=newClassName;
}
}
}
4983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
