Javascript 之 DOM案例（1）
1.点击按钮弹出对话框
<input type="button" value="弹出来" onclick="alert('我是弹框')">2.点击按钮修改超链接的地址和热点文字
// 根据id获取按钮，注册点击事件，增加事件处理函数
document.getElementById("bth").onclick()=function () {
// 根据id获取超链接，设置href的属性
document.getElementById("bj").href="https://123.sogou.com/";
//根据id获取超链接，设置文字内容
document.getElementById("bj").innerText="嘎嘎";
}
//优化代码
document.getElementById("bth").onclick()=function () {
//根据id获取按钮，赋值给变量aobj
var aObj= document.getElementById("bj");
aObj.href="https://123.sogou.com/";
aObj.innerText="嘎嘎";
}3.点击(每个)图片弹出对话框
<img src="images/1.jpg" alt="" id="im1" />
<img src="images/2.jpg" alt="" id="im2" />
<img src="images/3.jpg" alt="" id="im3" />
<script>
// document.getElementById("im1").onclick=function () {
// alert("被点了");
// };
// document.getElementById("im2").onclick=function () {
// alert("被点了");
// };
// document.getElementById("im3").onclick=function () {
// alert("被点了");
// };
//根据标签的名字获取图片标签,分别注册点击事件
var imgObjs=document.getElementsByTagName("img");
//循环遍历数组,获取每个图片标签,注册点击事件,添加事件处理函数
for(var i=0;i<imgObjs.length;i++){
imgObjs[i].onclick=function () {
alert("被点击了");
};
}
</script>4.点击图片设置自身宽和高
<img src="images/liuyan.jpg" alt="" id="im"/>
<script>
//点击图片,修改自身的宽和高
var imgObj = document.getElementById("im");
imgObj.onclick = function () {
this.width = "200";
this.height = "300";
};
</script>5.点击按钮修改每个图片的title属性
<input type="button" value="显示效果" id="btn"/>
<img src="images/cangjingkong.jpg" alt="哈哈" title="嘎嘎"/>
<script>
document.getElementById("btn").onclick = function () {
//返回的是一个伪数组
var imgObjs = document.getElementsByTagName("img");
imgObjs[0].alt = "改了";
imgObjs[0].title = "现实吧";
};
</script>6.点击按钮显示哈哈(排他功能)
<input type="button" value="嘎嘎"/>
<input type="button" value="嘎嘎"/>
<input type="button" value="嘎嘎"/>
<input type="button" value="嘎嘎"/>
<input type="button" value="嘎嘎"/>
<input type="button" value="嘎嘎"/>
<script>
//获取所有的按钮,分别注册点击事件
var btnObjs = document.getElementsByTagName("input");
//循环遍历所有的按钮
for (var i = 0; i < btnObjs.length; i++) {
//为每个按钮都要注册点击事件
btnObjs[i].onclick = function () {
//把所有的按钮的value值设置为默认的值:嘎嘎
for (var j = 0; j < btnObjs.length; j++) {
btnObjs[j].value = "嘎嘎";
}
//当前被点击的按钮设置为:哈哈
this.value = "哈哈";
};
}
</script>7.点击按钮显示和隐藏div
<style>
div{
width: 300px;
height: 200px;
background-color: darkmagenta;
}
</style>
<body>
<input type="button" value="隐藏" id="btn"/>
<div id="dv">
</div>
<script>
function my$(id){
return document.getElementById(id);
}
//根据id获取按钮,注册点击事件,添加事件处理函数
my$("btn").onclick=function () {
//判断当前点击的按钮的value属性值
if(this.value=="隐藏"){
my$("dv").style.display="none";//隐藏
this.value="显示";
}else if(this.value=="显示"){
my$("dv").style.display="block";//显示
this.value="隐藏";
}
};
</script>
</body>8.点击超链接切换图片
<a href="images/liuyan.jpg" id="im1"><img src="images/1-small.jpg" alt="" id="im2"></a>
<script>
document.getElementById("im1").onclick=function () {
document.getElementById("im2").src=this.href;
return false;
}
</script>9.点击按钮修改所有p标签内容
<input type="button" value="按钮" id="bth">
<div id="div1">
<p>我</p>
<p>去</p>
<p>你</p>
<p>的</p>
</div>
<script>
//根据id获取按钮,注册点击事件,添加事件处理函数
var bthObj=document.getElementById("bth");
//根据id获取div里的p标签，注册点击事件,添加事件处理函数
var pObj=document.getElementById("div1").getElementsByTagName("p")
bthObj.onclick=function () {
//循环遍历这个数组
for (var i = 0; i < pObj.length; i++) {
//设置p标签的内容
pObj[i].innerText="变";
}
}
</script>10.点击按钮修改所有文本框内容
<input type="button" value="修改文本框的值" id="btn"/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<script>
//根据id获取按钮,为按钮注册点击事件,添加事件处理函数
document.getElementById("btn").onclick = function () {
//获取所有的文本框
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
//判断这个元素是不是按钮
if (inputs[i].type != "button") {
inputs[i].value = "其实,我喜欢你";
}
}
};
</script>11.点击按钮切换图片
<input type="button" value="显示大图" id="btn"/>
<img src="images/1-small.jpg" alt="" id="im">
<script>
function my$(id) {
return document.getElementById(id);
}
document.getElementById("btn").onclick=function () {
document.getElementById("im").src="images/1.jpg";
};
</script>12.点击超链接停止跳转页面
<a href="images/liuyan.jpg" id="im1"><img src="images/1-small.jpg" alt="" id="im2"></a>
<script>
document.getElementById("im1").onclick=function () {
document.getElementById("im2").src=this.href;
return false;
}
</script>13.点击案例禁用文本框
<input type="button" value="禁用文本框" id="btn"/>
<input type="text" value="文本框" id="txt"/>
<script>
//先根据id获取按钮,为按钮注册点击事件,添加事件处理函数
document.getElementById("btn").onclick=function () {
//根据id获取文本框,设置disabled属性
document.getElementById("txt").disabled=true;
};
</script>14.点击案例隔行变色
<input type="button" value="隔行变色" id="btn"/>
<ul id="uu">
<li>红旗</li>
<li>五菱宏光</li>
<li>奔驰</li>
<li>兰博基尼</li>
<li>哈弗</li>
<li>奥拓</li>
<li>奥迪</li>
<li>悍马</li>
</ul>
<script>
document.getElementById("btn").onclick = function () {
//获取所有的li标签
var list = document.getElementById("uu").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
}
};
</script>15.高亮度显示
<ul>
<li>金士百</li>
<li>雪花</li>
<li>百威</li>
<li>燕京</li>
<li>青岛</li>
<li>崂山</li>
<li>珠江</li>
<li>华丹</li>
</ul>
<script>
//鼠标进入和鼠标离开两个事件
//获取所有的li标签
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
//为li注册鼠标进入事件
list[i].onmouseover = function () {
this.style.backgroundColor = "yellow";
};
//为li注册鼠标离开事件
list[i].onmouseout = function () {
//恢复到这个标签默认的颜色
this.style.backgroundColor = "";
};
}
</script>16.检验密码长度
<input type="text" value="" id="txt"/>
<script src="common.js"></script>
<script>
//获取文本框
document.getElementById("txt").onblur=function () {
//判断密码的长度
if(this.value.length>=6&&this.value.length<=10){
this.style.backgroundColor="red";
}else{
this.style.backgroundColor="green";
}
};
17.点击按钮创建列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 300px;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
my$("btn").onclick = function () {
var str = "<ul style='list-style-type: none;cursor: pointer'>";
//根据循环创建对应对数的li
for (var i = 0; i < names.length; i++) {
str += "<li>" + names[i] + "</li>";
}
str += "</ul>";
my$("dv").innerHTML = str;
//代码执行到这里,li已经有了
//获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件
var list = my$("dv").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
//鼠标进入
list[i].onmouseover = function () {
this.style.backgroundColor = "yellow";
};
//鼠标离开
list[i].onmouseout = function () {
this.style.backgroundColor = "";
};
}
};
</script>
</body>
</html>18.动态创建列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
cursor: pointer;
}
div {
width: 200px;
height: 400px;
border: 2px solid red;
}
</style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];
//点击按钮动态的创建列表,把列表加到div中
my$("btn").onclick = function () {
//创建ul,把ul立刻加入到父级元素div中
var ulObj = document.createElement("ul");
my$("dv").appendChild(ulObj);
//动态的创建li,加到ul中
for (var i = 0; i < kungfu.length; i++) {
var liObj = document.createElement("li");
//设置li中间的文字内容
liObj.innerHTML = kungfu[i];
ulObj.appendChild(liObj);
//为li添加鼠标进入事件
liObj.onmouseover = mouseoverHandle;
//为li添加鼠标离开事件
liObj.onmouseout = mouseoutHandle;
}
};
//此位置.按钮的点击事件的外面
function mouseoverHandle() {
this.style.backgroundColor = "red";
}
function mouseoutHandle() {
this.style.backgroundColor = "";
}
//如果是循环的方式添加事件,推荐用命名函数
//如果不是循环的方式添加事件,推荐使用匿名函数
</script>
</body>
</html>19、点击按钮创建一个表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="创建表格" id="btn"/>
<div id="dv"></div>
<script>
function my$(id) {
return document.getElementById(id);
}
var arr=[
{name:"百度",href:"http://www.baidu.com"},
{name:"谷歌",href:"http://www.google.com"},
{name:"优酷",href:"http://www.youku.com"},
{name:"土豆",href:"http://www.tudou.com"},
{name:"快播",href:"http://www.kuaibo.com"},
{name:"爱奇艺",href:"http://www.aiqiyi.com"}
];
//点击按钮创建表格
my$("btn").onclick=function () {
//创建table加入到div中
var tableObj=document.createElement("table");
tableObj.border="1";
tableObj.cellPadding="0";
tableObj.cellSpacing="0";
my$("dv").appendChild(tableObj);
//创建行,把行加入到table中
for(var i=0;i<arr.length;i++){
var dt=arr[i];//每个对象
var trObj=document.createElement("tr");
tableObj.appendChild(trObj);
//创建第一个列,然后加入到行中
var td1=document.createElement("td");
td1.innerText=dt.name;
trObj.appendChild(td1);
//创建第二个列
var td2=document.createElement("td");
td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
trObj.appendChild(td2);
}
};
</script>
</body>
</html>20.动态建立表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
cursor: pointer;
}
div {
width: 200px;
height: 400px;
border: 2px solid red;
}
</style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script>
function my$(id) {
return document.getElementById(id);
}
var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];
//点击按钮动态的创建列表,把列表加到div中
my$("btn").onclick = function () {
//创建ul,把ul立刻加入到父级元素div中
var ulObj = document.createElement("ul");
my$("dv").appendChild(ulObj);
//动态的创建li,加到ul中
for (var i = 0; i < kungfu.length; i++) {
var liObj = document.createElement("li");
//设置li中间的文字内容
liObj.innerHTML = kungfu[i];
ulObj.appendChild(liObj);
//为li添加鼠标进入事件
liObj.onmouseover = mouseoverHandle;
//为li添加鼠标离开事件
liObj.onmouseout = mouseoutHandle;
}
};
//此位置.按钮的点击事件的外面
function mouseoverHandle() {
this.style.backgroundColor = "red";
}
function mouseoutHandle() {
this.style.backgroundColor = "";
}
//如果是循环的方式添加事件,推荐用命名函数
//如果不是循环的方式添加事件,推荐使用匿名函数
</script>
</body>
</html>