数往知来JavaScript_DOM<十>

时间:2021-09-22 20:33:07

一、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 href=node.getAttribute('href');

alert(href);

}

--->setAttribute

修改某个元素的属性值

function attri(){

];

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(');

];

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){

);

x+=num;

}

//如果原本的top坐标比目标坐标小,就给top加一个像素的坐标

if(y<final_y){

);

y+=num;

}

//如果原本的坐标比目标坐标大,那么就证明当前坐标在目标坐标的右边,给当前坐标减一个像素

if(x>final_x){

);

x-=num;

}

if(y>final_y){

);

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[].onmouseover=function(){

moveElement(,,);

}

geta[].onmouseover=function(){

moveElement(,,);

}

geta[].onmouseover=function(){

moveElement(*,,);

}

geta[].onmouseover=function(){

moveElement(*,,);

}

}

--》用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>