JSAP101
1、DOM
1）文档对象模型
文档：把一个Html文件看成一个文档，所以把这个文档看成一个对象。XML文件也可以看成一个文件。XML侧重于存储数据，html主要以展示为主。一个页面就是一个文档。
页面中的每个标签，都是一个元素，每个元素都可以看成是1个对象。
页面中所有的内容都是节点：标签，属性，文本 。html是文档的根元素。由文档及文档中所有的元素（标签）组成的一个树形结构图脚树状图（DOM树）
DOM是用来操作页面元素的。
2）DOM初体验
<input type="button" value="弹窗" onclick="alert('hello!')"/><!--注意用单引号-->3、为元素注册事件
1）事件：以on开头
js代码应该和html代码分离
function f1(){
...
}
//可以通过事件调用函数
<input type="button" value="显示效果" onclick="f()"/>
//分离js与html,利用id
<input type="button" value="点击" id="btn"/>
<script>
function f(){
alert("分离");
}
//document.getElementById("ids属性名");返回的是一个元素对象
var btnObj=document.getElementById("btn");
//相当于为按钮注册了（点击）事件
btnObj.onclick=f;//不必加括号
</script>最终的代码，不再在script外定义函数（以下代码均在body标签内）：
使用匿名函数
若把input和script标签互换位置，则会报错，因为此时还没有btn这个id的值
//案例：点击按钮显示图片和设置宽高
<body>
<input type="button" value="显示图片" id="btn"/>
<img src="" id="im"/>
<script>
//点击按钮时设置img标签的src属性
//获取按钮
var btnObj=document.getElementById("btn");
btnObj.onclick=function () {
var imObj=document.getElementById("im");
imObj.src="timg.jpg";
//设置图片大小
imObj.width=300;
imObj.height=400;
};
</script>
</body>//案例：点击按钮设置p标签的文本内容
<body>
<input type="button" value="设置p的内容" id="btn"/>
<p id="p1">这是p标签</p>
<script>
document.getElementById("btn").onclick=function () {
document.getElementById("p1").innerText="我是一个p标签";
}//案例：点击按钮修改超链接的地址及文本内容
<body>
<input type="button" value="设置p的内容" id="btn"/>
<p id="p1">这是p标签</p>
<script>
document.getElementById("btn").onclick=function () {
document.getElementById("p1").innerText="我是一个p标签";
}
</body>//案例点击按钮设置所有P标签的内容
<body>
<input type="button" value="显示效果" id="btn"/>
<p>she is young.</p>
<p>she is young.</p>
<p>she is young.</p>
<p>she is young.</p>
<p>she is young.</p>
<script>
document.getElementById("btn").onclick=function(){
//根据标签名字获取标签
var pOBJ=document.getElementsByTagName("p");
console.log(pOBJ);//是一个伪数组
//循环遍历这个伪数组
for(var i=0;i<pOBJ.length;i++){
pOBJ[i].innerText="no way!"; }
}
</script>
</body>//案例：点击按钮修改图片的alt与title属性
<body>
<input type="button" value="显示效果" id="btn"/>
<img src="timg.jpg" alt="cc" title="dd"/>
<script>
document.getElementById("btn").onclick=function(){
//返回的是一个伪数组
var imgObjs=document.getElementsByTagName("img");
imgObjs[0].alt="修改";
imgObjs[0].title="完成";
}
</script>//案例：点击按钮修改多个文本的值
<body>
<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>
</body>//案例：点击每个图片弹出对话框
<body>
<img src="u=2124789894,3346559232&fm=11&gp=0.jpg" alt="" id="im1"/>
<img src="u=2124789894,3346559232&fm=11&gp=0.jpg" alt=""id="im2"/>
<img src="u=2124789894,3346559232&fm=11&gp=0.jpg" alt="" id="im3"/>
<script>
var imgObjs=document.getElementsByTagName("img");
//循环遍历
for(var i=0;i<imgObjs.length;i++){
imgObjs[i].onclick=function () {
alert("延禧攻略");
}
}
</script>
</body>//点击按钮修改其value属性
<body>
<input type="button" value="按钮" id="btn"/>
<script>
var btnObj=document.getElementById("btn");
btnObj.onclick=function () {
btnObj.value="你好";
}
</script>
</body>案例：点击图片修改其宽高
<body>
<img src="timg.jpg" alt="" id="im"/>
<script>
var imgObj=document.getElementById("im");
imgObj.onclick=function () {
this.width="200";
this.height="700";
}
</script>
</body>案例：按钮的排他功能
<body>
<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 () {
for(var j=0;j<btnObjs.length;j++){
btnObjs[j].value="吃了吗";
}
this.value="还没有";
}
}
</script>
</body>//for循环在加载页面时就已经完成，而点击事件只在点击时才触发执行。因此上面的this.value不能写成btnObjs[i]，因为此时已经循环注册完事件，i=btnObjs.length
//点击图片修改路径
<body>
<a id="ak" href="u=2124789894,3346559232&fm=11&gp=0.jpg"><img id="im" src="timg.jpg"/></a>
<script>
document.getElementById("im").onclick=function () {
this.src=document.getElementById("ak").href;
}
</script>
</body>//点击按钮切换图片
<body>
<input type="button" value="显示大图" id="btn"/>
<img src="u=2124789894,3346559232&fm=11&gp=0.jpg" id="im">
<script>
//通过函数获取对象
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick=function () {
my$("im").src="timg.jpg";
};
</script>
</body>//点击按钮选择性别和兴趣
//修改兴趣
<body>
<input type="button" value="修改性别" id="btn1"/>
<input type="radio" name="sex" value="1" id="rad1"/>male
<input type="radio" name="sex" value="2"/>female
<input type="radio" name="sex" value="3"/>secret
<script>
function my$(id) {
return document.getElementById(id);
}
//规律：在表单标签中，如果属性和值只有一个，并且是这个属性本身，那么
//在写js代码时，进行DOM操作的时候，这个属性值，是布尔类型就可以了
my$("btn1").onclick=function(){
my$("rad1").checked=true;//不用checked，只用false,true
};
</script>
<br />
<input type="button" value="修改兴趣" id="btn2">
<input type="checkbox" value="1" name="hobby" id="ck1"/>游戏
<input type="checkbox" value="2" name="hobby"/>睡眠
<script>
my$("btn2").onclick=function () {
my$("ck1").checked=true;
}
</script>
</body>案例选择下拉框和文本域的相关属性
<body>
<input type="button" value="点菜" id="btn"/>
<select>
<option value="1">炸鸡蛋</option>
<option value="2">龙虾饭</option>
<option value="3" id="op1">凉拌鸡肉</option>
<option value="4">西式炖菜</option>
</select>
<!--<script src="xx.js"></script>可引用js文件-->
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick=function () {
//点击按钮选择菜
my$("op1").selected=true;
};
</script>
<textarea name="" id="tt" cols="30" rows="10" readonly="readonly">
今天半价吃寿司。有鸭胸芝士，鳗鱼蒸饭。
</textarea>
<input type="button" value="注册" id="btn2">
<script>
//disabled--这个属性是禁用的意思
//html中属性和值是自身的，且只有一个的，可以只写这个属性，不用赋值
my$("btn2").onclick=function () {
my$("tt").value="太美味了，下次尝尝炸鸡饭";
}
</script>
</body>案例：点击按钮设置div样式
<body>
<input type="button" value="设置样式" id="btn"/>
<div id="dv"></div>
<script>
//凡是css属性中多个单词的写法，在js代码中
//DOM操作时，有分号的属性不用写分号，改为首字母大写
function my$(id) {
return document.getElementById("id")
}
my$("btn").onclick=function () {
my$("dv").style.width="300px";
my$("dv").style.width="200px";
my$("dv").style.backgroundColor="red";
};
</script>
</body>//案例：点击按钮显示和隐藏
<input type="button" value="hide" id="btn"/>
<input type="button" value="display" id="btn2"/>
<div id="dv">
</div>
<script>
function my$(id) {
return document.getElementById(id)
}
my$("btn").onclick = function () {
my$("dv").style.display = "none";
}
my$("btn2").onclick = function () {
my$("dv").style.display = "block";
}
</script>div的显示和隐藏通过类样式实现
<body>
<input type="button" value="设置样式" id="btn"/>
<div id="dv">
</div>
<script>
function my$(id) {
return document.getElementById(id)
}
my$("btn").onclick=function () {
//在js代码中DOM操作时，设置元素的类样式，不用class
//关键字，应该使用className
my$("dv").className="cls";
}
</script>
</body>//案例：网页开关灯
<head>
<meta charset="UTF-8">
<title>abc</title>
<style>
.cls {
background-color: black;
}
</style>
</head>
<body>
<input id="btn" type="button" value="light">
<script>
function my$(id) {
return document.getElementById(id)
}
my$("btn").onclick = function () {//获取body标签
document.body.className = document.body.className != "cls" ? "cls" : "";
};
</script>
</body>
</html>