导语：BOM(Browser Object Model) 是指浏览器对象模型。
在JS中获取HTML元素
1.通过标签中的id属性
document.getElementById(); //通过标签中的id属性获得html中的元素,()中放html标签的id
//例如:
<body>
<div id="d1"></div>; <!--创建一个div标签-->
<script type="text/javascript">
var di = document.getElementById("d1"); //通过标签id获得元素给di赋值
console.log(di); //在控制台答应di
</script>
</body>2.通过标签名
document.getElementsByTagName(); //通过标签名获得html元素,()中放html标签名
//例如:
<body>
<!--创建两个div标签-->
<div id="d1"> </div>
<div id="d2"> </div>
<script type="text/javascript">
var ds = document.getElementsByTagName("div"); //定义一个变量来存放得到的元素
console.log(ds); //控制台打印定义的变量ds
</script>
</body>运行结果为:
3.通过标签中class属性
document.getElementsByClassName(); //通过标签class属性获得html元素,()中放class名
//例如:
<body>
<div id="d1" class="ds"> </div>
<div id="d2" class="ds"> </div>
<script type="text/javascript">
var ds2 = document.getElementsByClassName("ds");
console.log(ds2);
</script>
</body>在控制台查看结果如下
HTML元素上的常用事件
1.点击事件 onclick
<body>
<button type="button" onclick="f()"></button>
<script type="text/javascript">
function f(){
console.log("我被点击了");
};
</script>
</body>2. 双击事件 ondblclick
<body>
<button type="button" ondblclick="f()"></button>
<script type="text/javascript">
function f(){
console.log("我被双击了");
};
</script>
</body>3. 获得焦点事件 onfocus
<body>
<input type="text" id="i1" onfocus="f2()" value="获得焦点前"/> //如果获得了焦点就会调用f2()方法
<script type="text/javascript">
function f2(){ //将输入框里的内容变成"获得焦点后"
var i=document.getElementById("i1");
i.value="获得焦点后";
};
</script>
</body>4.失去焦点事件 onblur
<body>
<input type="text" id="i1" onfocus="f2()" value="失去焦点前"/> //如果失去了焦点就会调用f2()方法
<script type="text/javascript">
function f2(){ //将输入框里的内容变成"失去焦点后"
var i=document.getElementById("i1");
i.value="失去焦点后";
};
</script>
</body>5.鼠标移入事件 onm ouseover
<body>
<input type="text" id="i1" onfocus="f2()" value="鼠标没有移入"/> //如果鼠标移入就会调用f2()方法
<script type="text/javascript">
function f2(){ //将输入框里的内容变成""
var i=document.getElementById("i1");
i.value="";
};
</script>
</body>6.鼠标移出事件 onm ouseout
<body>
<input type="text" id="i1" onfocus="f2()" value="鼠标没有移出"/> //如果鼠标移出就会调用f2()方法
<script type="text/javascript">
function f2(){ //将输入框里的内容变成""
var i=document.getElementById("i1");
i.value="";
};
</script>
</body>HTML元素上的常用属性
- textContent ：标签的文本内容(定义的html语句不生效
- innerHTML ：标签中的html内容(html语句会生效)
- value ：元素的值(适用于具备value属性的元素,例如input)
- checked ：是否被选中(适用于单选框,多选框)
- style ：标签中的style属性(用于设置样式)
JS中的for循环
控制元素的显示
display
1.none 不显示(页面不会有空间)
2.block 以块状元素显示
3.inline 以行内元素显示
4.inline 以行内块状显示
visibility
1.visible 可见
2.hidden 不可见(会占据页面空间)
opacity
0~1之间的值(用于控制元素的透明度)
案例详解
实现图片点击隐藏和显示功能
效果如下：
当点击第一个按钮时,图片隐藏并不保留空间
当第二个按钮点击时,图片隐藏切保留空间
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例</title>
<style>
div{ <!--设置div样式,宽高设置为100px,背景颜色设置为红色-->
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="d1" onclick=""> <!--创建div标签,id设置为d1-->
</div>
<button id="b1" type="button" onclick="fn1()">点我隐藏</button> <!--创建隐藏按钮b1-->
<button id="b2" type="button" onclick="fn2()">点我隐藏</button> <!--创建隐藏按钮b2-->
<script type="text/javascript">
function fn1() { //定义函数fn1,隐藏不保留空间
// document.getElementById()
//如果显示 那么隐藏
//如果隐藏 那么显示
if(d1.style.display==="none"){
d1.style.display="block"
b1.textContent="点我隐藏"
}else{
d1.style.display="none"
b1.textContent="点我显示"
}
}
function fn2() { //定义函数fn2隐藏但保留空间
// document.getElementById()
//如果显示 那么隐藏
//如果隐藏 那么显示
if(d1.style.opacity==0){
d1.style.opacity=1 //透明度为1表示完全不透明
b2.textContent="点我隐藏"
}else{
d1.style.opacity=0 //透明度为0表示完全透明(不显示)
b2.textContent="点我显示"
}
}
</script>
</body>
</html>
你要尽全力保护你的梦想。那些嘲笑你梦想的人，他们注定失败，他们想把你变成和他们一样。我坚信，只要心中有梦想，我就会与众不同。你也是。