一、DOM
1、onclick事件
表示点击
一般用在--》跳转
a标签，希望点击的时候不去跳转，而是做别的事情，并在里面返回一个false
<a href="http://www..." onclick="return false"></a>
--》注册
用法：onclick="js代码";
onclick=方法名;
2、节点中的常用属性
--》nodeType
有12种取值，常用的： 元素 1 ，属性 2 ，文本 3 。
--》nodeName
获得节点的名字
--》nodeValue
获得节点的值
--》childNodes
获得某个节点下的所有子节点，返回一个集合
-->firstChild
获得某个节点下的第一个子节点
-->lastChild
获得某节点下的最后一个字节点
注意：在谷歌浏览器与火狐浏览器中对于节点的描述与IE8的描述不同（IE9以上可能与谷歌的类似）
<ul>
<li></li>
<li></li>
</ul>
IE8在解释该结构的时候认为ul节点的子节点为<li>和<li>,所以IE8描述这个ul下面只有两个li元素子节点
而谷歌、火狐浏览器在解释结构的时候会认为ul和li之间还有一个换行（\n）它也会认为是一个空文字子节点，所以在使用firstChild获取第一个字节点的时候
在谷歌、火狐浏览器上面会得到一个空对象会报错使用的时候需要注意
3、常用方法
---》getElementById
获取指定id所对应的节点
var elements= document.getElementById("123");
<p id="123">
第二段</p>
<p>
---》getElementsByTagName
获取某个元素的节点名字
var ul=document.getElementsByTagName(‘ul‘)[0]; 获取整个html页面里的第一ul元素
---》 getAttribute
获取某个元素的指定的属性,返回属性的值
window.onload=function(){
var node=document.getElementsByTagName(‘a‘)[0];
var href=node.getAttribute(‘href‘);
alert(href);
}
--->setAttribute
修改某个元素的属性值
function attri(){
var node=document.getElementsByTagName(‘a‘)[0];
node.setAttribute(‘href‘,‘http://www.baidu.com‘);
}
javascriptDom_2
一、常见方法
---》getElementById
根据id获得页面上的元素
--》getElementsByTagName
-->getAttribute
-->setAttribute
2、常见属性、
nodeName 返回节点名，返回的均是大写
nodeValue 只针对文本
childNodes
nodeType 1 -- 元素， 2 -- 属性， 3 -- 文本
firstChild
lastChile
-->父节点.firstChild 等价于 父节点.ChildNodes[0]
关于浏览器
IE8对节点与节点的空行和回车，直接忽略，不认为是文本节点
FireFox/Chrome/IE9
将空文本节点也纳入了子节点的范畴
3、验证方法的存在
如果没有这个方法会返回一个null
在js里面null、0、undefiend浏览器在描述的时候都会认为是假（false）
if(!document.getElementsByTagName) return false;当这个方法不存在时返回null，取非就变成true，那么就执行后面的一句话return false回去，就不会再执行后面的，这样遇到一些老的浏览器不认识这个方法也不会报错了，就做到了向后兼容了
//方法体
4、自动创建浏览器中HTML的结构
--》比较老的方法
document.write（） 括号内只能写字符串
可以在页面中创建内容
--》<element>.innerHTML
属性，可以用来获得与修改一个标签元素下的所有内容
对于大面积的HTML得生成有很大的优势，因为可以直接处理HTML代码
如何生成一个标签（节点）
--》首先创建一个节点出来
createElement(‘标签名‘);
createTextNode(‘文本内容‘);
--》设定该节点相关的值与数据
setAttribute(‘属性‘，值)
--》添加到父节点上
父节点.appendChild(节点名)
function createDIV(){
var div=document.createElenment(‘div‘);
div.setAttribute(‘id‘,‘123‘);
var body=document.getElementsByTagName(‘body‘)[0];
body.appandChild(div);
}
-->insertBefore
父标签.insertBefore(新标签，存在标签);
--》获得父标签
var ul=document.getElementsByTagName(‘ul‘)[0];
var parent=ul.parentNode;
用insertBefore方法自己写一个insertAfter方法
//传进来一个新节点和一个已存在的节点，把这个新节点添加到这个以村子节点的后面
function insertAfter (newTag,existTag){
//首先获得这个已存在节点的父节点
var parentTag=existTag.parentNode;
//再判断这个父节点的最后一个节点是否是这个已存在节点,如果是就直接把这个新节点追加到这个父节点的后面
if(parentTag.lastChild==existTag){
parentTag.appendChild(newTag);
}else{
//如果这个已存在节点不是这个父节点的最后一个节点，那么就获得这个已存在节点的下一个节点，把这个新节点插入到下一个节点之前
parent.insertBefore(newTag,existTag.nextSibling);
}
javascriptDom_实现动画效果
一、获得元素的style属性
每一个元素有一个style属性，这个属性不是字符串或数字类型，这个属性是dispHTMLStyle它是一个对象
遍历这个对象 用for-in
-->可以的到一个结论：
可以通过style属性访问到样式 语法为：
样式中的属性名 = 值
样式属性名满足camelCase命名规则
二、两个时间函数
--》setTimeOut
指定多长时间以后，执行一段代码，只执行一次
使用方法：
setTimeOut(js代码段的字符串，时间间隔)
--》setInterVal
指定一段时间，然后没隔这么长时间，执行一次代码
setInterVal(js的代码段的字符串，时间间隔);
--》让计时器停下来
setTimeOut在调用的时候，会返回以后各值
clearTimeOut(刚才返回的值)；
setInterVal也是一样
setInterVal(刚才返回的值)；
-->写一个移动元素坐标的方法，获得一个元素的ID、和要移动的最终目标位置和移动的时间频率，移动这个元素，达到动画的效果，这个元素要脱离文档流
//
function moveElement(elementId,final_x,final_y,interval){
if(!document.getElementById)return false;
if(!document.getElementById(elementId))return false;
//获得这个元素
var elem=document.getElementById(elementId);
//判断这个元素的left坐标是否初始化了，如果没有初始化值为空，那么就给left坐标赋一个初值
if(!elem.style.left)elem.style.left="0px";
if(!elem.style.top)elem.style.top="0px";
//判断一下上一次方法有没有执行完，如果没有执行完就证明用户的鼠标又指向了另一处了,那么就把上一次的方法触发的方法取消掉
if(elem.stop)clearTimeout(elem.stop);
//获得LEFT的坐标
var x=parseInt(elem.style.left);
//获得top的坐标
var y=parseInt(elem.style.top);
//判断一下如果x y坐标等于目标坐标了，那么就说明元素已经移动到了目标位置了
if(x==final_x&&y==final_y)return;
//判断一下，如果原本的left坐标比目标坐标小，就给left加一个像素的坐标
if(x<final_x){
var num = Math.ceil((final_x - x) / 10);
x+=num;
}
//如果原本的top坐标比目标坐标小，就给top加一个像素的坐标
if(y<final_y){
var num = Math.ceil((final_y - y) / 10);
y+=num;
}
//如果原本的坐标比目标坐标大，那么就证明当前坐标在目标坐标的右边，给当前坐标减一个像素
if(x>final_x){
var num = Math.ceil((x-final_x ) / 10);
x-=num;
}
if(y>final_y){
var num = Math.ceil((y-final_x ) / 10);
y-=num;
}
//把改变之后的left top坐标再重新赋值
elem.style.left=x+"px"; //这些坐标都以px（像素）为单位，赋值的时候要给其加上px单位
elem.style.top=y+"px";
//用setTimeout方法递归调用自己，给一个时间频率，达到缓慢移动的动画效果
elem.stop= setTimeout("moveElement(‘"+elementId+"‘,"+final_x+","+final_y+","+interval+")",interval);//setTimeout的第一个参数需要的是js代码段的字符串，这里的move方法的参数如果不带""就会以字符串的形式传过去，而不是作为一个变量了，而move方法的第一个参数也是需要一个字符串，如果只是加上一个“”，那么这个这里的elementId里面的值传到方法里就变成来了moveElement(aaa,...),没有双引号，那就是一个变量了，所以还得把它再加上一个‘‘
}
-->一个改变img的坐标的方法
function preparaPos(){
var elem=document.getElementById(‘mylist‘);
var geta=elem.getElementsByTagName(‘a‘);
geta[0].onmouseover=function(){
moveElement(‘m2‘,0,0,20);
}
geta[1].onmouseover=function(){
moveElement(‘m2‘,-314,0,20);
}
geta[2].onmouseover=function(){
moveElement(‘m2‘,-314*2,0,20);
}
geta[3].onmouseover=function(){
moveElement(‘m2‘,-314*3,0,20);
}
}
--》用insertBefore自己写一个insertAfter方法
function insertAfter(newTag,exsitTag){
var parent=exsitTag.parentNode;
if(parent.lastChild==exsitTag){
parent.appendChild(newTag);
}else{
parent.insertBefore(newTag, exsitTag.nextSibling);
}
}
--》让window.onload可以累加方法
function addOnloadEvent(func){
var oldonload=window.onload;
if(typeof oldonload!=‘function‘){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
--》用css添加样式
#myimage{
border:1px;
width:314px;
height:196px;
overflow:hidden;
}
#m2{
position:relative;
left:-314px;
}
li{
margin:2em;
list-style-type:none;
float:left;
}
img{
border:0px;
}
--》HTML页的主代码，把样式和js代码都引进来
<!DOCTYPE html PUBLIC"-//w3c//DTD XHTML 1.0 Transitional.dtd//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dta"> <html xmlns="www.3c.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="./scripts/addOnloadEvent.js"></script> <script type="text/javascript" src="./scripts/moveElement.js"></script> <script type="text/javascript" src="./scripts/preparaPos.js"></script> <script type="text/javascript"> <!-- //addOnloadEvent(createElement); addOnloadEvent(preparaPos); --> </script> <link type="text/css" rel="stylesheet" href="./styles/layout.css" /> </head> <body> <ul id="mylist"> <li> <a title="果果图片1" href="./img/1.jpg"> <img src="./smallphoto/1.jpg" alt="果果图片1" /> </a> </li> <li> <a title="果果图片2" href="./img/2.jpg"> <img src="./smallphoto/2.jpg" alt="果果图片2" /> </a> </li> <li> <a title="果果图片3" href="./img/3.jpg"> <img src="./smallphoto/3.jpg" alt="果果图片3" /> </a> </li> <li> <a title="果果图片4" href="./img/4.jpg"> <img src="./smallphoto/4.jpg" alt="果果图片4" /> </a> </li> </ul> <center><div id="myimage"><img id="m2" src="./img/美术馆.gif" /></div></center> </body> </html>