DOM

< style type= "text/css" >

div.content{

width: 200px;

height: 100px;

border: 2px solid red;

border-radius: 50%;

text-align: center;

line-height: 100px;

background-color: aqua;

margin-left: 100px;

}

button{

width: 100px;

height: 100px;

margin-left: 20px;

background-color: red;

}

.active{

display: inline-block;

background-color: yellow;

}

< / style >

</ head >

< body >

< button class= "active" >shen </ button >

< button >cheng </ button >

< button >wei </ button >

< div class= "content" >沈 </ div >

< div class= "content" >程 </ div >

< div class= "content" >炜 </ div >

< script >

var btn= document. getElementsByTagName( "button");//获取所有的button标签

var div= document. getElementsByClassName( "content");//获取所有类名是content的标签

for( var i= 0; i< btn. length; i++)

{

( function( i){

btn[ i]. onclick= function(){

for( var j= 0; j< btn. length; j++){

btn[ j]. className= "";

div[ j]. style. display= "none";

}

this. className= "active";

div[ i]. style. display= "block";

}

}( i))

}

dom基本框架：

这个方法表示选中结点是否有子结点，返回布尔值

下面是nodeType( )后分别返回的结果

下面是一种不利用children访问元素节点的方法：

var div= document. getElementsByTagName( "div")[ 0];

function returnElementChild( node){、

//类数组

var temp={

length: 0,

push: Array. prototype. push,

splice: Array. prototype. splice

},

child= div. childNodes,

length= child. length;

for( var i= 0; i< length; i++){

if( child[ i]. nodeType== 1){

temp. push( child[ i]);

}

}

return temp;

}

console. log( returnElementChild( div));

他们通过原型链的方式进行链接和继承

第一种：

第二种：

都是选中了第一个div标签下的span

一般在开发中我们会经常使用第二种

另外我们可以直接选中下面的三个标签：

这个是选中html标签

创建元素节点：

var div= document. createElement( "div")

创建文本结点

var text= document. createTextNode( "你好");

插入：

1.

< body >

< div ></ div >

< span ></ span >

< script type= "text/javascript" >

var div= document. getElementsByTagName( "div")[ 0];//取出第一个div标签

var text= document. createTextNode( "宝宝");//创建文本结点

div. appendChild( text);//插入

< / script >

</ body >

2.

div.insertBefor(a,b)

理解为把a插入到b的前面

删除：

1.

< body >

< div >

< span ></ span >

< strong ></ strong >

</ div >

< span ></ span >

< script type= "text/javascript" >

var div1= document. getElementsByTagName( "div")[ 0];

var span= document. getElementsByTagName( "span")[ 0];

div1. removeChild( span);

< / script >

</ body >

删除子节点

div里面的span标签就没了，而且可以用参数接收这个函数的返回值，相当于剪切

2.

< body >

< div >

< span ></ span >

< strong ></ strong >

</ div >

< span ></ span >

< script type= "text/javascript" >

var div1= document. getElementsByTagName( "div")[ 0];

var span= document. getElementsByTagName( "span")[ 0];

span. remove();

div1. remove();

< / script >

</ body >

直接去掉，但是只能是先把标签取出来然后才能进行操作

而且没有返回值，直接销毁

< body >

< div >

< span ></ span >

< strong ></ strong >

</ div >

< span ></ span >

< script type= "text/javascript" >

var div1= document. getElementsByTagName( "div")[ 0];

var span= document. getElementsByTagName( "span")[ 0];

span. innerHTML= 132;

// var span=document.getElementsByTagName("span")[0];

// span.remove();

// div1.remove();

< / script >

</ body >

span.innerHTML是取到标签里面的内容

设置行间属性，steAttribute("属性名"，“属性值”)

获取属性值

另外修改id和class可以直接：

div.class=...

div.id=....

例题：实现类似insertBefor( )方法的insert After（）方法

< div >

< i ></ i >

< b ></ b >

< span ></ span >

</ div >

Element. prototype. insertAfter= function( targetnode, afternode){

var befor= afternode. nextElementSibling;

if( befor== null){//如果它的下一个元素节点没有的话，就说明到底

this. appendChild( targetnode);

}

else{//如果有下一个结点，那么就放在下一个结点的前面

this. insertBefor( targetnode, befor);

}

}

var div= document. getElementsByTagName( "div")[ 0];

var b= document. getElementsByTagName( "b")[ 0];

var span= document. getElementsByTagName( "span")[ 0];

div. insertAfter( b, span);

实现一个功能：两个input，里面的秒和分不断变化，直到30分0秒停止：

minutes: < input type= "text" value= "0" >

seconds: < input type= "text" value= "0" >

< script >

var num= 0;

var num2= 0;

var value1= document. getElementsByTagName( "input")[ 0];

var value2= document. getElementsByTagName( "input")[ 1];

setInterval( function(){

num++;

if( num== 60){

num= 0;

num2++;

}

if( num2== 30){

clearInterval( 1);

}

value1. value= num2;

value2. value= num;

}, 10)