目录
一、DOM操作
DOM含义
文档对象模型：document object model，使用document可以操作所有html文档中任何元素（标签）
DOM操作
获取元素对象
why？：因为只有先获取了元素对象才能拥有对元素对象操作的能力，如果不先获取就没办法对元素对象进行相关操作
how？：id、类名、标签
how to do？：有了元素对象后，即可操作元素中的信息，例如：属性，内容，样式等
<!--方式2：放在head中-->
<script>
//获取值的方式：1.将scrip放到标签后面 2.加入onload
onload=function(){
//方式1：
/*var aa=document.getElementById(aa);*/
//方式2：
var aa=document.getElementsByClassName("bb")[0];
//方式3：
/*var aa=document.getElementsByTagName("h1")[0];
alert(aa);*/
}
//为什么通过类名与标签获取的元素对象要在后面加[0]？
//原因：1.ID名查找元素，ID名在页面和在元素哪里只能是一个，所有查找Id不需要[0]
//2.标签和类名不同，DOM规定他们可以是多个，蓑衣标签名和类名获取要加[0]来获取他们
//例如
/*var inputs=document.getElementsByTagName("input")[0]*/
//代表获取input的第一个元素
</script><h1 id="aa" class="bb">学会获取元素对象</h1>
<!--<script>//方式1：放在body中
var aa=document.getElementById(aa);
</script>-->修改元素内容
<h1 id="aa">我的一级标题</h1><script type="text/javascript">
var aa = document.getElementById("aa");
//alert(aa.innerHTML); //取内容
aa.innerHTML = "刘德华"; //内容赋值
</script>修改元素属性
<img src="" /><script type="text/javascript">
var img=document.getElementsByTagName("img")[0];
img.src="../img/001.jpg";
img.width=200;//记住修改元素属性德方法
img.height=500;
</script>修改元素样式
<h1 style="color: green;">学会修改元素样式</h1><script >
var h1=document.getElementsByTagName("h1")[0];
h1.style.color="blue";
</script>二、事件与DOM
如果需要动态德变更数据，则需要将DOM与事件相结合
点击事件与this
<h1 onclick="myclick()">一级标题1</h1>
<h1 onclick="myclick2(this)">一级标题2</h1>
<h1 onclick="this.innerHTML='张曼玉'">一级标题3</h1><script>
function myclick(){
var h1=document.getElementsByTagName("h1")[0];
h1.innerHTML="梁朝伟";
}
function myclick2(o){
o.innerHTML="古天乐"
}
</script>图片切换
<img src="../img/009.png" />
<input type="button" value="改变图片" onclick="myclick()" /><!--点击按钮，将图片变为另一张；来换切换-->
var flag=true;
function myclick(){
var img=document.getElementsByTagName("img")[0];
if(flag){
img.src="../img/007.png";
}else{
img.src="../img/008.png";
}
flag=!flag;
}获取与失去焦点
<!--获取与失去焦点：onfocus/onblur
案例：失去焦点时在文本框显示，'请输入密码',获取焦点时，清除该内容-->
<input type="text" value="请输入密码" onfocus="myfocus(this)" onblur="myblur(this)" /><script>
function myfocus(o){
if(o.value=="请输入密码"){
o.value="";
}
}
function myblur(o){
if(o.value.trim()==""){
o.value="请输入密码";
}
}
</script>级联列表
<!--级联列表：选择省份，显示不同德城市-->
<select onchange="mychange(this)">
<option value="sc">四川</option>
<option value="gz">贵州</option>
</select>
<select id="city">
</select><script>
function mychange(province){
//获取城市的元素
var city=document.getElementById("city");
//获取省份的值进行判断
if (province.value=="sc") {
city.innerHTML="<option>成都</option><option>简阳</option><option>绵阳</option><option>达州</option>";
}else if (province.value=="gz") {
city.innerHTML="<option>贵阳</option><option>毕节</option><option>六盘水</option><option>铜仁</option>"
}
}
</script>三、事件与监听器
监听事件
可以在一个元素中绑定多种事件
<input type="text" id="btn" /><script type="text/javascript">
var btn=document.getElementById("btn");
btn.addEventListener("click",myclick);
btn.addEventListener("keyup",myup);
function myclick(){
alert("点击事件");
}
function myup(){
alert("键盘弹起事件");
}
btn.onclick=function(){
alert("点击触发...");
}
</script>冒泡与捕获
点击一次，出发了多个控件中，有一个执行顺序
冒泡：从外往里触发（默认）true
捕获：从里往外false
<script type="text/javascript">/*type="text/javascript"什么时候加入*/
var parent=document.getElementById("parent");
var son=document.getElementById("son");
parent.addEventListener("click",divFun,true);
son.addEventListener("click",btnFun,true);
/* son.removeEventListener("click",btnFun,true);*/
function divFun(){
alert("触发到外围的div");
}
function btnFun(){
alert("触发到里面的btn");
}
</script><style type="text/css">
div{
width: 100px;
height: 100px;
border: solid 5px blue;
}
</style>
<div id="parent">
<input type="button" value="冒泡与捕获" id="son" />
</div>四、操作元素
添加段落
<script>
function add(){
var p=document.createElement("p");
p.innerHTML="新段落";
var body=document.getElementsByTagName("body")[0];/*因为通过类名获取返回的本身是一个数组，只有通过[0]才能单独获得其中的元素。*/
body.appendChild(p);
}
</script><input type="button" value="添加段落" onclick="add()" />
<p>原始段落</p>删除段落
<script >
function del(){
var body=document.getElementsByTagName("body")[0];
var son=document.getElementById("son");
debugger
if (son) {
body.removeChild(son);
}
}
</script><input type="button" value="删除段落" onclick="del()" />
<p>段落1</p>
<p id="son">段落2</p>
540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
