你的位置:首页 > Java教程

[Java教程]数往知来JavaScript_DOM十


一、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 "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>