目录
1.document.getElementById() : 通过标签中的id属性
2.document.getElementsByTagName() : 通过标签名
3.document.getElementsByClassName() : 通过标签中的class属性
一、DOM和BOM的区别
1.BOM
浏览器对象模型,用来获取或设置浏览器的属性、行为。例如:新建窗口、获取屏幕分辨率等
2.DOM
文档对象模型,用来获取或设置文档中标签的属性,例如:获取或者设置input表单的value值
二、如何在JS中获取HTML元素
1.document.getElementById() : 通过标签中的id属性
注:通过id获取元素返回的不是数组,而是单个值
2.document.getElementsByTagName() : 通过标签名
注:getElementsByTagName(“标签名”) ;函数返回的是一个数组类型的值
3.document.getElementsByClassName() : 通过标签中的class属性
注:函数返回的是一个数组类型的值
代码如下;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200PX;//宽度
height: 300PX;//长度
background: pink;//背景颜色
display:inline-block ;//行内块状
}
</style>
</head>
<body>
<div id="d1" class="a"></div>
<div id="d2" class="a"></div>
<div id="d3"></div>
<br>
<button onclick="fn1()">id更改颜色</button>
<button onclick="fn2()">标签更改颜色</button>
<button onclick="fn3()">类更改颜色</button>
<script type="text/javascript">
//document.getElementById() : 通过标签中的id属性
function fn1(){
//直接使用id
// d1.style.background="purple"
//Element 元素(标签)
var d=document.getElementsById("d1")
d.style.background="purple"
}
//Cannot set properties of undefined (setting 'background')
//不能设置属性来自未定义对象(设置background的时候报的错)
//document.getElementsByTagName() : 通过标签名
function fn2(){
//Element 元素(标签)
//标签选择器 会拿出多个元素
var ds=document.getElementsByTagName("div")
//数组中放的是不是标签?
//遍历数组
// for(var i=0;i<ds.length;i++){
// ds[i].style.background="purple"
// }
for(var i of ds){
//i就是每一个元素
i.style.background="purple"
}
}
//document.getElementsByClassName() : 通过标签中的class属性
function fn3(){
//Element 元素(标签)
//类选择器 会拿出多个元素
var ds=document.getElementsByClassName("a")//a为类名
for(var i of ds){
//i就是每一个元素
i.style.background="skyblue"
}
}
</script>
</body>
</html>
三、元素的显示和隐藏
控制元素的显示(style)
-
visibility属性的值
值 | 描述 |
visible | 表示元素是可见的 |
hidden | 表示元素是不可见的(会占据页面空间) |
-
display属性的值
值 | 描述 |
none | 表示此元素不会被显示(页面不会有空间) |
block/inline/inline-block | 表示该元素为块/行内/行块元素 |
-
opacity
0~1之间的值,用于控制元素的透明度
隐藏和显示图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div id="d1"></div>
<button onclick="fn1()">点我隐藏display</button>
<button onclick="fn2()">点我隐藏opacity</button>
<script>
function fn1(){
//如果显示 那么隐藏
//如果隐藏 那么显示
if(d1.style.display==="none"){
d1.style.display="block"
}else{
d1.style.display="none"
}
}
function fn2(){
if(d1.style.opacity==0){
d1.style.opacity=1
}else{
d1.style.opacity=0
}
}
</script>
</body>
</html>
显示如下
点我隐藏display的效果如下
点我隐藏opacity的效果如下
四、HTML元素上的常用事件
onclick : 点击事件 ondblclick : 双击事件 onfocus : 获得焦点事件
onblur : 失去焦点事件 onmouseover : 鼠标移入 onmouseout : 鼠标移出
五、HTML元素上的常用属性
textContent : 标签的文本内容(定义的标签不生效)
InnerHTML : 标签中的html内容(标签会生效)
value : 元素的值(适用具备value属性的元素)
checked :是否被选中(单选框,多选框)
style : 标签中的style属性(用于设置样式)
六、例题
关于输入框
1. 不同按钮点击的时候为当前界面中的input赋上不同的值
2. 当input获得焦点时清空他的值,失去焦点的时候显示巴拉巴拉
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
//定10个输入框
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
//复制按钮
<button onclick="fn1('哈哈')">哈哈</button>
<button onclick="fn2('嘻嘻')">嘻嘻</button>
<script>
function fn1(a){
//1.拿到所有的输入框
var is=document.getElementsByTagName("input")
//2.更改值
for(var i of is){
i.value=a
}
}
//找到页面中所有的输入框
//给所有的输入框赋值(失去焦点事件,获得焦点事件)
(()=>{
var is=document.getElementsByTagName("input")
//只要碰到循环不能用var
//使用let 定义局部变量
for(let i of is){
//给元素获得焦点事件赋值
i.onfocus=()=>{
i.value=""
}
//给元素失去焦点事件赋值
i.onblur=()=>{
i.value="巴拉巴拉"
}
}
})();
</script>
</body>
</html>
注:遇到循环不要用var 用let(定义局部变量)
实现左侧菜单功能
要求:点击家电或水果 各隐藏下面的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li><span onclick="fn3('u1')">家电</span>
<ul id="u1">
<li>冰箱</li>
<li>电视</li>
<li>洗衣机</li>
</ul>
</li>
<li> <span onclick="fn3('u2')">水果</span>
<ul id="u2">
<li>苹果</li>
<li>菠萝</li>
<li>西瓜</li>
</ul>
</li>
</ul>
<script>
function fn3(id){
//根据id拿出对应的元素
var li= document.getElementById(id)
if(li.style.display==="none"){
li.style.display="block"
}else{
li.style.display="none"
}
}
</script>
</body>
</html>
效果如下
点击后的效果如下:
实现表格中的全选按钮功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border>
<tr>
<td><input type="checkbox" onclick="fn4(this.checked)"></td></tr>
<tr><td><input type="checkbox"></td></tr>
<tr><td><input type="checkbox"></td></tr>
<tr><td><input type="checkbox"></td></tr>
<tr><td><input type="checkbox"></td></tr>
<tr><td><input type="checkbox"></td></tr>
<tr><td><input type="checkbox"></td>
</tr>
</table>
<script>
function fn4(status){
//拿到所有的多选框
//设置选中为第一个多选框的状态
var is=document.getElementsByTagName("input")
for(let i of is){
i.checked=status
}
}
</script>
</body>
</html>
效果如下:
总结:
以上就是关于JavaScript BOM编程的一些内容 之后还会更新更多关于JavaScript的其他内容
欢迎大家关注