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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
