1、DOM编程

是文件对象模型，是可扩展的编程语言的接口，是专门为修改标签服务的；

思路：先找要修改的标签，对其进行增加/修改，可以修改某一个属性/样式，从而让标签动起来；

DOM是和js结合来使页面动起来的；


2、DOM选择器

(1)、找标签的：(document是一个对象)

document.getElementById('id'); //id是唯一的

document.getElementsByName('name'); //名字可以相同

document.getElementsByTagName('tagname'); //通过标签查找(a、p、div、)

(2)、创建标签

document.createElement('a');

(3)、获取/修改样式

obj.className

(4)、获取/设置属性

setattribute(key, val); getattribute(key);

(5)、获取/修改样式中的属性

obj.style.属性

注意：js中的属性名称可能和CSS中的名称不一致：

以上方法的示例如下：

<!DOCTYPEhtml><html><head><metahttp-equiv="content-type"content="text/html;charset=utf-8"><title>js1</title><style>.show{}.hide{display:none}</style></head><body><divid='t1'>abc</div><divid='t2'>d<span>e</span>f</div><hr/><!--<scripttype='text/javascript'>varid1=document.getElementById('t1');//文档对象console.log(id1.innerText);//获得标签内容id1.innerText='123';//对标签内容进行修改console.log(id1.innerText);varid2=document.getElementById('t2');//文档对象console.log(id2.innerHTML);//innerText和innerHTML等价</script>--><!--<divid='123'>abcdefghijkl</div><hr/><divname='t1'>jkl</div><hr/><divname='t1'>uio</div><hr/><scripttype='text/javascript'>vars=document.getElementById('123');s.innerText='hao';varnames=document.getElementsByName('t1');//names[0].innerText='de';//names[1].innerText='hen';for(varitemsinnames){names[items].innerText='zaima?';}varall=document.getElementsByTagName('div');for(varitemsinall){all[items].innerText='xing';}--><!--<divid='t1'class='show'name='alex'>内容</div><divid='t2'style='width:500px;height:200px;border:2pxsolid#333;'></div>--><!--<formid=‘F1’action='https://www.sogou.com/web?'method='GET'><inputtype='text'name='query'/><inputtype='submit'value='提交'/><inputtype='button'value='伪提交'onclick='Foo();'/>//点击执行Foo()函数，是一个事件</form><scripttype='text/javascript'>/*创建标签方法1、vartag=document.createElement('a');tag.href='http://www.baidu.com.cn'tag.innerText='点我啊';varid1=document.getElementById('t1');//寻找父容器id1.appendChild(tag);*//*创建标签方法2、vartag="<ahref='http://www.baidu.com.cn'>走你</a>";varid1=document.getElementById('t1');id1.innerHTML=tag;*//*varid1=document.getElementById('t1');id1.className='hide';//修改className*//*varid1=document.getElementById('t1');console.log(id1.getAttribute('name'));//获取属性id1.setAttribute('name','oldboy');console.log(id1.getAttribute('name'));varid1=document.getElementById('t2');console.log(id1.style.width);*/提交表单functionFoo(){varid1=document.getElementById('F1');id1.submit();}</script>--></body></html>

3、常用事件

当设置事件时，相应的执行操作会执行其所对应的函数。

onclick：点击事件

onfocus：元素获得焦点

onblur：元素失去焦点

一个应用(搜索框)：

<!DOCTYPEhtml><html><head><metahttp-equiv="content-type"content="text/html;charset=utf-8"><title>页面一</title><style>.gray{color:gray;}.black{color:black;}</style></head><body><inputtype='text'class='gray'id='tip'value='请输入关键字'onfocus='Enter();'onblur='Leave();'/><scripttype='text/javascript'>functionEnter(){varid=document.getElementById('tip');id.className='black';if(id.value=='请输入关键字'||id.value.trim()==''){id.value='';}}functionLeave(){varid=document.getElementById('tip');varval=id.value;if(val.length==0||id.value.trim()==''){id.className='gray';id.value='请输入关键字';}else{id.className='black';}}</script></body></html>

运行结果



撤走之后，没有内容又会恢复原样！！！