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中的名称不一致:
以上方法的示例如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>js1</title> <style> .show{ } .hide{ display:none } </style> </head> <body> <div id = 't1'>abc</div> <div id = 't2'>d<span>e</span>f</div> <hr/> <!-- <script type='text/javascript'> var id1 = document.getElementById('t1'); //文档对象 console.log(id1.innerText); //获得标签内容 id1.innerText = '123'; //对标签内容进行修改 console.log(id1.innerText); var id2 = document.getElementById('t2'); //文档对象 console.log(id2.innerHTML); //innerText和innerHTML等价 </script>--> <!-- <div id = '123'>abcdefghijkl</div> <hr/> <div name = 't1'>jkl</div> <hr/> <div name = 't1'>uio</div> <hr/> <script type = 'text/javascript'> var s = document.getElementById('123'); s.innerText = 'hao'; var names = document.getElementsByName('t1'); //names[0].innerText = 'de'; //names[1].innerText = 'hen'; for(var items in names){ names[items].innerText = 'zaima?'; } var all = document.getElementsByTagName('div'); for(var items in all){ all[items].innerText = 'xing'; } --> <!-- <div id = 't1' class = 'show' name = 'alex'>内容</div> <div id = 't2' style = 'width:500px;height:200px;border:2px solid #333;'></div> --> <!-- <form id = ‘F1’ action = 'https://www.sogou.com/web?' method = 'GET'> <input type = 'text' name = 'query'/> <input type = 'submit' value = '提交' /> <input type = 'button' value = '伪提交' onclick = 'Foo();' /> //点击执行Foo()函数,是一个事件 </form> <script type = 'text/javascript'> /*创建标签方法1、 var tag = document.createElement('a'); tag.href = 'http://www.baidu.com.cn' tag.innerText = '点我啊'; var id1 = document.getElementById('t1'); //寻找父容器 id1.appendChild(tag); */ /* 创建标签方法2、 var tag = "<a href = 'http://www.baidu.com.cn'>走你</a>"; var id1 = document.getElementById('t1'); id1.innerHTML = tag; */ /* var id1 = document.getElementById('t1'); id1.className = 'hide'; //修改className */ /* var id1 = document.getElementById('t1'); console.log(id1.getAttribute('name')); //获取属性 id1.setAttribute('name', 'oldboy'); console.log(id1.getAttribute('name')); var id1 = document.getElementById('t2'); console.log(id1.style.width); */ 提交表单 function Foo(){ var id1 = document.getElementById('F1'); id1.submit(); } </script> --> </body> </html>
3、常用事件
当设置事件时,相应的执行操作会执行其所对应的函数。
onclick:点击事件
onfocus:元素获得焦点
onblur:元素失去焦点
一个应用(搜索框):
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>页面一</title> <style> .gray{ color:gray; } .black{ color:black; } </style> </head> <body> <input type = 'text' class = 'gray' id = 'tip' value = '请输入关键字' onfocus = 'Enter();' onblur = 'Leave();'/> <script type = 'text/javascript'> function Enter(){ var id = document.getElementById('tip'); id.className = 'black'; if(id.value == '请输入关键字' || id.value.trim() == ''){ id.value = ''; } } function Leave(){ var id = document.getElementById('tip'); var val = id.value; if(val.length == 0 || id.value.trim() == ''){ id.className = 'gray'; id.value = '请输入关键字'; }else{ id.className = 'black'; } } </script> </body> </html>
运行结果
撤走之后,没有内容又会恢复原样!!!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。