javascript WEB api——————DOM document object model
案例
为元素注册点击事件，弹出对话框
<input type="button" id="btn" value="开发分离">
<input type="button" id="btn2" value="最终版">
<script>
//定义函数
function f1(){
alert("开发分离的html和js代码");
}
//根据id获取这个标签(元素)
var btnObj = document.getElementById("btn");
//为按钮注册点击事件
//注意f1不加括号 不然f1()，页面加载时就执行了
//该注册方式不是最好的
btnObj.onclick =f1;
//根据id属性的值，从整个文档中获取这个标签(元素)
var btnObj2 = document.getElementById("btn2");
//为当前的这个按钮元素(对象)，注册点击事件，添加事件处理函数（匿命函数）
btnObj2.onclick = function(){
alert("我要变帅");
}
</script>
点击按钮显示、隐藏图片
<script>
//页面加载后执行
window.onload = function(){
//根据id获取按钮
var btnObj = document.getElementById("btn");
//为按钮注册点击事件，添加事件处理函数
btnObj.onclick = function(){
imgObj.src = "迪丽热巴.jpg";
//设置图片的大小 不用加px width=“”
imgObj.width = "300";
}
//根据id获取图片标签，设置图片的src属性值
var imgObj = document.getElementById("img");
//隐藏图片
var hiddenObj = document.getElementById("hidden");
hiddenObj.onclick = function(){
//清空图片src属性
imgObj.src = "";
}
}
</script>
</head>
<body>
<input type="button" value="显示图片" id="btn">
<input type="button" value="隐藏图片" id="hidden">
<img src="" alt="" id="img">
</body>
点击按钮改变p标签显示内容
<script>
window.onload = function(){
//根据id获取元素，为元素测试点击事件
var btnObj = document.getElementById("btn");
btnObj.onclick = function(){
var p = document.getElementById("p1");
//p 标签文本内容设置时，使用innerText这个属性的方式
//凡成对出现的标签，中间的文本内容，设置的使用都使用innerText这个属性
p.innerText = "p改变后的内容:我还是一个p标记";
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="设置p标签内容">
<p id="p1">我是p标签</p>
</body>
案例点击按钮改变a标签的热点文字和标签地址
<script>
//页面加载后执行
window.onload = function(){
//根据id获取文档中btn按钮元素
var btnObj = document.getElementById("btn");
//为btn元素注册点击事件
btnObj.onclick = function(){
//根据id获取文档中a标签元素
var aObj = document.getElementById("google");
//设置a标签改变后的地址和热点文字
aObj.href = "www.baidu.com";
aObj.innerText = "百度";
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="点击改变a标签的地址和热点文字">
<a href="www.google.com" id="google">谷歌</a>
</body>
点击按钮修改多个p标签的文字的内容
<script>
//页面加载后执行
window.onload = function(){
//根据id获取元素
var btnObj = document.getElementById("btn");
//为btnObj对象注册点击事件
btnObj.onclick = function(){
//根据标签名字获取标签
var pList = document.getElementsByTagName("p");
//遍历获取的到的标签伪数组
for(var i = 0; i < pList.length; i++){
pList[i].innerText = "好烦，帅不能当饭吃!"
}
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="点击改变">
<p>哈哈，你最帅！！！</p>
<p>哈哈，你最帅！！！</p>
<p>哈哈，你最帅！！！</p>
<p>哈哈，你最帅！！！</p>
<p>哈哈，你最帅！！！</p>
</body>