JavaScript(Bom编程）

昨天给大家分享了JS的进阶，今天来继续给大家分享JS的BOM编程。

一，常用的编程元素

style:标签中的style属性(用于设置样式)

h1-h6:标题标签，从大到小排列

b:加粗标签

br:跨行标签

hr:分割线biaoq

font:字体标签

img:图片标签需要先将图片传入html

src:图片地址

width:宽度

height:高度

background:背景

color:颜色

table:表格标签(需要搭配 tr 和td 使用也就是行和列)

ul:无序标签

ol:有序标签 ul和ol都需要搭配li使用

二，获取元素的方法

1.通过id获取元素

document.getElementById() : 通过标签中的id属性来获取元素如果已经知道了id 也可以用id名直接进行下一步操作

优点：精准

缺点：需要一个一个拿，使用时较为麻烦

适用范围：适合需要操作的元素不多时使用

2.通过标签名获取元素

document.getElementsByTagName() : 通过标签名获取元素

优点：方便快捷，一次性拿出多个

缺点：由于拿出的是多个 (一个集合) 导致无法精准到每个元素

适用范围：适合元素较多时使用(可以批量获取元素)

3.通过class属性获取元素

document.getElementsByClassName() : 通过标签中的class属性获取元素

优点：可以在较多元素中，精准锁定某些元素

缺点：和通过id来获取元素的方法一样，需要对应元素，较为繁琐

适用范围：可以搭配通过标签名获得原色==元素的方法一起使用，可以做到在大范围的元素中锁定需要的元素

4.通过name属性获取元素

document.getElementsByName() ：通过标签中的name属性获取元素

优点：也和id一样可以较为精准的对应某些元素但是id是唯一的不能重复但是name可以有重复的值

缺点：有些标签里面是没有name属性的比如：div等

适用范围：在大范围元素中锁定一些有name属性的元素

三，元素中的常用事件

1.点击事件

onclick：点击事件

ondblclick : 双击事件

利用点击事件来切换元素属性（背景颜色）：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Score</title><style type="text/css">div{width: 200px;height: 150px;background-color: burlywood;display: inline-block;}</style></head><body><div id="d1" class="a" ></div><div class="a"></div><div ></div><br><button type="button" onclick="fn1()" name="bb">点我切换颜色</button><button type="button" onclick="fn2()">点我切换颜色（类）</button><button type="button" onclick="fn3()" name="bb">bbb</button><script type="text/javascript">function fn1(){//通过id来调取 也可用 document.getElementById() 来获取id//但是这种方法只适用于少量的元素，如果元素过多，则需要定义许多id// d1.style.backgroundColor="pink";//标签选择器 去拿出多个元素 这样比拿出id要方便快捷 但是会拿出多个 所以是一个数组var ds=document.getElementsByTagName("div")ds.style.backgroundColor="pink";//这里的ds是一个数组，它不能设置标签//Cannot set properties of undefined//不能设置来自未定义的属性（设置background的时候报的错）//遍历数组for(var i=0;i<ds.length;i++){ds[i].style.background="pink";}//foreach 直接遍历数组for(let i of ds){//i就是每一个元素i.style.background="pink";}}function fn2(){var aa=document.getElementsByClassName("a")//只要碰到循环(尤其是foreach循环) 就不能用var 用let(定义局部变量)for( let i of aa){i.style.background="purple"}}function fn3(){var aa=document.getElementsByName("bb")//只要碰到循环(尤其是foreach循环) 就不能用var 用let(定义局部变量)for( let i of aa){i.style.background="purple"}}</script></body>
</html>

2.焦点事件

onfocus : 获得焦点事件

onblur : 失去焦点事件

利用焦点事件来实现输入框的值的变换

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Score</title></head><body><!-- 30个输入框 --><input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><inputtype="text"><input type="text"><input type="text"><input type="text"><input type="text"><inputtype="text"><input type="text"><input type="text"><input type="text"><input type="text"><inputtype="text"><input type="text"><input type="text"><input type="text"><input type="text"><inputtype="text"><input type="text"><input type="text"><input type="text"><input type="text"><inputtype="text"><input type="text"><input type="text"><input type="text"><button type="button" onclick="fn1('哈哈')">哈哈</button><button type="button" onclick="fn1('嘻嘻')">嘻嘻</button><script type="text/javascript">//填充信息的函数function fn1(a) {//1.拿到所有的输入框var is=document.getElementsByTagName("input")//2.更改值for(var i of is){i.value=a}}//修改信息的函数(()=>{//1.拿到所有输入框 记住拿出来的是个集合var is=document.getElementsByTagName("input")//2.更改值 (获得焦点事件，失去焦点事件)//碰到循环 不能用var (尤其是foreach循环) 要用let(定义局部变量)for(let i of is){//获得焦点事件i.onfocus=()=>{i.value=""}//失去焦点事件i.onblur=()=>{i.value="巴拉巴拉"}}})();</script></body>
</html>

3.鼠标移动事件

onmouseover : 鼠标移入

onmouseout : 鼠标移出

也可以用鼠标移动事件来完成输入框文本的替换（需要把焦点事件的函数替换为鼠标移动事件的函数）

(()=>{//鼠标移动事件//1.拿到所有输入框 记住拿出来的是个集合var is=document.getElementsByTagName("input")//2.更改值 （利用鼠标移动事件）//碰到循环 不能用var (尤其是foreach循环) 要用let(定义局部变量)for(let i of is){//鼠标移入事件i.onmouseover=()=>{i.value=""}//鼠标移出事件i.onmouseout=()=>{i.value="巴拉巴拉"}}})();

四，HTML元素的常用属性

textContent : 标签的文本内容(定义的标签不生效即不能识别HTML语句)

InnerHTML : 标签中的html内容(标签会生效能够识别HTML语句)

checked ：表示是否被选中(用于单选框,多选框)

style : 标签中的style属性(用于设置样式)

value : 元素的值(适用具备value属性的元素)

五，元素的显示

1.display

dispaly 元素的显示方法
               1.none:不显示(界面中也不会留有元素原本的位置)
               2.block:以块状元素显示 (会跨行)
               3.inline:以行状元素显示(在一行内)
               4.inline-block 以行内块状元素显示(在行内，又可以跨行)

               if(d1.style.display==="none"){
                   d1.style.display="block";
               }else {
                   d1.style.display="none"
               }

2.visibility

visibility 元素的显示方法,分两种状态
               1.visible:可见
               2.hidden:不可见(但是会占据空间)

               if(d1.style.visibility==="visible"){
                   d1.style.visibility="hidden";
               }else{
                   d1.style.visibility="visible"
               }

3.opacity

opacity:元素的显示方式(主要用于控制元素的透明度,范围是0-1)
               注意:只是设置成了全透明，但是元素仍然存在；

               if(d1.style.opacity==0){
                   d1.style.opacity=1;
               }else{
                   d1.style.opacity=0
               }
           }

六，实验

利用元素显示来实现菜单隐藏功能，（点击菜单可以隐藏子菜单）用的都是今天教大家的知识哦，大家一起来试试吧！

示例代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Score</title><style type="text/css">div{width: 100px;height: 100px;background-color: bisque;}</style></head><body><div id="d1"></div><button type="button" onclick="fn1()">点我隐藏</button><!--hr 分割线标签 --><hr ><!--ul 无序标签 ol 有序标签  --><ul><li ><i onclick="fn2('u1')">家电</i><ul id="u1"><li>冰箱</li><li>电视</li><li>洗衣机</li></ul></li><li><span onclick="fn2('u2')">水果</span><ul id="u2"><li>苹果</li><li>香蕉</li><li>菠萝</li></ul></li></ul><hr><table border><tr><!-- this 的意思就是把自己这个标签传入函数中 checked 是一个属性 表示是否被选中  --><td><input type="checkbox" onclick="fn3(this.checked)"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td></tr></table><script type="text/javascript">//隐藏元素的函数function fn1(){//用id来控制元素//dispaly 元素的显示方法 //1.none:不显示(界面中也不会留有元素原本的位置)//2.block:以块状元素显示 (会跨行)//3.inline:以行状元素显示(在一行内)//4.inline-block 以行内块状元素显示(在行内，又可以跨行)// if(d1.style.display==="none"){//    d1.style.display="block";// }else {//    d1.style.display="none"// }//visibility 元素的显示方法,分两种状态//1.visible:可见//2.hidden:不可见(但是会占据空间)// if(d1.style.visibility==="visible"){//     d1.style.visibility="hidden";// }else{//     d1.style.visibility="visible"// }//opacity:元素的显示方式(主要用于控制元素的透明度,范围是0-1)//注意:只是设置成了全透明，但是元素仍然存在；if(d1.style.opacity==0){d1.style.opacity=1;}else{d1.style.opacity=0}}//隐藏菜单的函数function fn2(id){//根据id拿出对应的元素//将对应元素设置为不显示var uid=document.getElementById(id);if(uid.style.display==="none"){uid.style.display="block"}else{uid.style.display="none";}}//实现全选功能的函数//拿到是否被选中的状态function fn3(status){//拿到所有多选框//设置选中第一个的多选框的状态 statusvar is=document.getElementsByTagName("input")//遍历数组 记得要用letfor(let i of is){//这里的i就是每一个多选框i.checked=status;}}</script></body>
</html>

今天的JS分享就到这里啦，精彩下期继续！