BOM编程基础介绍

王真教掌门

已于 2022-03-01 16:18:17 修改

阅读量479

点赞数 8

文章标签： javascript html5 jquery

于 2022-03-01 15:37:43 首次发布

本文链接：https://blog.csdn.net/WZJ278/article/details/123205671

版权

BOM介绍

Js中获取HTML元素，根据获取的元素修改显示属性

BOM介绍

javascript组成：
ECMAScript
BOM（browser object model）：浏览器对象模型
DOM：文档对象模型

BOM是（ browser(浏览器) object(对象) model(模型) ）浏览器对象模型，今天我就带大家来学习一下BOM的编程小知识。

Js中获取HTML元素，根据获取的元素修改显示属性

获取元素修改的方法

图片归类总纲

备注: document.getElements带 s代表了是一个数组类型的

需要遍历拿出自己需要的元素

document.getElementById() : 通过标签中的id属性

document.getElementsByTagName() : 通过标签名

document.getElementsByClassName() : 通过标签中的class属性

document.getElementsByName() ：通过标签中的name属性

通过ID拿到单一元素

列题操演

<div id="d1"></div> //写一个div标签定义了一个id为d1

<img id="m1" src="images/a0.jpg" alt="" width="200px">//写了一个img标签定义了一个id为m1

<button onclick="fn1()">点我更改图片</button>//写了一个按钮添加了一个点击事件

<script>

    var b=1;

    //箭头函数就是正常函数的简写

    setInterval(()=>{//定时循环

        //操作元素（html）的css

              //通过id（.）点出style 样式 （.）点出 backgroundImage 设置图片地址

  //Element 元素(标签)

//标准写法（支持所有版本浏览器）

     var d=document.getElementById("d1")

     d.style.backgroundImage='url("images/a'+(b%3)+'.jpg")'

//简便写法（新版本浏览器都支持，版本落后浏览器不支持该写法）

d1.style.backgroundImage='url("images/a'+(b%3)+'.jpg")'//因为本人只有三张图片用%来重置归零

        b++;//设置图片的位置

    },1000)//定时一秒一次

</script>

拿到集合元素

列题操演

<style><!-- 定义div的属性 -->
        div{
            width: 100px;
            height: 50px;
            background:red;
            display: inline-block;
        }
</style>
<body>
<div></div>
<button onclick="fn2()">标签）更改颜色</button>
<script>
    function fn2() {
        //Element 元素(标签)
        //标签选择器 会拿出多个元素
                var ds=document.getElementsByTagName("div")
        //数组中放的是不是标签?
        //遍历数组
        /**
        for(var i=0;i<ds.length;i++){
            ds[i].style.background="pink"
        }
         **/
        //只要碰到foreach循环 不能用var
        //使用let(定义局部变量)
        for(let i of ds){//使用var在某些情况下会使数据报错
            //i就是每一个元素
            i.style.background="Purple"
        }
    }
</script>

HTML元素上的常用属性和事件

   textContent : 标签的文本内容(定义的标签不生效)
   InnerHTML : 标签中的html内容(标签会生效)
   value : 元素的值(适用具备value属性的元素)
   checked ：是否被选中(单选框,多选框)
   style : 标签中的style属性(用于设置样式)

onclick : 点击事件
   ondblclick : 双击事件
   onfocus : 获得焦点事件
   onblur : 失去焦点事件
   onmouseover : 鼠标移入
   onmouseout : 鼠标移出

列题操演

<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"><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"><!-- 定义许多iuput标签 -->
<button onclick="fn1('你好')">按钮</button><!-- 写按钮添加点击事件 -->
<button onclick="fn1('不好')">按钮</button>
<script>

    function fn1(a) {
        //1.拿到所有的输入框
        var is=document.getElementsByTagName("input")
        //2.更改值
        for(let i of is){
            i.value=a
        }
    }

    //找到页面中所有的输入框
    //给所有的输入框赋值（失去焦点事件，获得焦点事件）
    (()=>{
        var is=document.getElementsByTagName("input")
        for(let i of is){
            //给元素的获得焦点事件赋值
            i.onfocus=()=>{
                i.value=""
            }
            //给元素的失去焦点事件赋值
            i.onblur=()=>{
                i.value=""
            }
        }
    })();
</script>

今天内容到此就结束了，有问题的伙伴可以在下面留言，博主会给留言的伙伴解答问题谢谢！！大家的观看