首页 > 其他分享 >JS之BOM与DOM

JS之BOM与DOM

时间:2022-12-06 20:22:31浏览次数:41  
标签:DOM 对象 标签 JS window let BOM 操作 document

目录

BOM操作

所有浏览器都支持 window 对象。它表示浏览器窗口。

*如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。

*没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。全局函数是 window 对象的方法。

接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。

一些常用的Window方法:

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口
history.forward()-前进一页
history.back()-后退一页
window.location.reload()-刷新当前页面


confirm()
	 确认框,有返回值true或者false
prompt()   括号内可以写两个,第一个是提示,第二个是默认值
	提示框,返回的是用户填写的内容
altert()
	警告框,括号内填写警告的内容

image

计时器相关操作(重要)

操作1:定时延迟执行
<body>
    <script>
        function showMsg(){
            alert('快来获取美女图片吧')
        }
        let t=setTimeout(showMsg,3000)
        /*第一个填写调用的函数,第二个填写的延迟的毫秒时间*/
        clearTimeout(t)  //取消任务
    </script>
</body>


操作2:循环定时执行
<body>
    <script>
        function showMsg(){
            alert('快来获取美女图片吧')
        }
       let t=setInterval(showMsg,3000)  //每隔3000毫秒执行一下
       clearInterval(t)  //取消任务
    </script>
</body>

DOM操作

DOM (Document Object Model)是指文档对象模型,通过它可以访问HTML文档的所有元素

既然DOM操作是通过js代码来操作标签 所以我们需要先学习如何查找标签之后才能给标签绑定一些JS代码(DOM操作)

查找标签

"""
1.js中变量名的命名风格推荐是驼峰体
2.js代码查找到的标签如果需要反复使用可以用变量接收 变量名规律xxxEle
"""
document.getElemengtById('d1')
	结果就是标签对象本身
document.getElementsByClassName('c1')
	结果是数组里面包含有多个标签对象
document.getElementsByTagName('span')
	结果是数组里面含有多个标签对象
    
parentElement		父节点标签元素
children			所有子标签
firstElementChild	 第一个字标签元素
lastElementChild	 最后一个子标签元素
nextElementSibling   下一个兄弟标签元素
previousElementSibling	上一个兄弟标签元素

image

操作节点

js代码创建一个标签

let aEle = document.createElement('a')

js代码操作标签属性

aEle.href = '网址'		只能添加默认参数

js代码操作标签文本

aEle.innerText = '文本内容'

js代码查找div标签并将a追加到div内部

let divEle = document.getElementById('d1')//查找div标签
divEle.appendChild(aEle)//div标签尾部添加子标签

js代码操作关键词

.innerText			获取标签内部所有的文本内容
.innerText='文本'		替换/设置标签内部的文本(不识别标签语法)
.innerHTML			获取标签内部所有的标签包含文本
.innerHTML='文本'		替换/设置标签内部的文本(识别标签语法)

image

获取值操作

1.针对用户输入的和用户选择的标签
	标签对象.value
2.针对用户上传的文件数据
	标签对象.files
  	标签对象.files[0]
let fileEle = document.getElementsByClassName('c1')  

fileEle[0].files  //获取上传数据内容

class与css操作

1.js操作标签css样式
	标签对象.style.属性名(下划线没有 编程驼峰体)

2.js操作标签class属性
	标签对象.classList.add()
	标签对象.classList.contains()
	标签对象.classList.remove()
	标签对象.classList.toggle()

事件

事件可以键的的理解为通过js代码给html标签绑定一下自定义的功能

常见事件
	onclick		当用户点击某个对象时调用的事件
	onfocus		元素获得焦点
	onblur		元素失去焦点
	onchange	域的内容被改变

绑定事件的多种方式:
<!--绑定事件的方式1-->
  <button onclick='showMsg()'>快按我</button>
     	function showMsg(){
     let msg = prompt('你确定要这样吗?');
     console.log(msg)
"方式1就写死了,解耦性不高"
            
<!--绑定事件的方式2-->
 <input type='button' value='快快快' id='d1'>
     
     <script>
     let inputEle = document.getElementById('d1')
     inputEle.onclick = function(){
         alter('谁在那里点我1!!!')
     }
 }
     </script>
"方式2相对于解耦性会高一点"

事件函数中的this关键字
	this指代的就是当前被操作的标签对象本身
 	如果事件函数内有多层嵌套那么最好在一开始用变量存储一下防止后续变化
 
onload方法
	XXX.onload 等待XXX加载完毕之后再执行后面的代码

事件实战案例

<form action="">
    <input type="text" value="游戏机" id="d1"> <!--输入值默认是游戏机-->
    <script>
        let inputEle = document.getElementById('d1')
        inputEle.onfocus = function (){  /*获得焦点将默认值去掉*/
            this.value = ''
        }
        inputEle.onblur = function (){
            this.value = '下次再来' /*市区焦点将默认值该为下次再来*/
        }
    </script>
</form>
---------------------------------------------------------------------
<body>
    <p>username:
        <input type="text" id="d1">
        <span style="color: #f584b7"></span><!--行内标签,没有添加文本,在做判断的时候用js给标签添加文本-->
    </p>
    <p>password:
        <input type="password" id="d2">
        <span style="color: red"></span>
    </p>
    <button id="suBtn">提交</button>

<script>
    let suBle = document.getElementById('suBtn')
    suBle.onclick = function () {       //绑定单机某个对象时候的事件
        let userNameEle = document.getElementById('d1') //获得用户名的标签
        let passWordEle = document.getElementById('d2') //获取密码的标签
        if (userNameEle.value === 'jason') {   //判断如果用户名是jason
            userNameEle.nextElementSibling.innerText = '用户名不能是jason'  //给span添加文本内容,input的下一个标签
        }else{userNameEle.nextElementSibling.innerText = '用户名符合'}//如果不是,给span添加文本

        if (passWordEle.value === '123') {
            passWordEle.nextElementSibling.innerText = '密码不能是123'
        }else{passWordEle.nextElementSibling.innerText = '密码符合'}
    }
    suBle.onblur = function (){   // 绑定某个对象失去焦点时候的事件
        let userNameEle = document.getElementById('d1')
        let passWordEle = document.getElementById('d2')
        userNameEle.nextElementSibling.innerText = ''
        passWordEle.nextElementSibling.innerText = ''
    }
</script>
</body>
=====================================================================
<body>
    <select name="" id="d1">

    </select>
    <select name="" id="d2">

    </select>

<script>
    let data= {
        "河北":["廊坊市","邯郸市"],
        "北京":["朝阳区","海淀区"],
        "山东":["威海市","烟台市"],
        "安徽":["芜湖市","合肥市"],
        "上海":["浦东新区","静安区"]
    }
    //提前查找好省和市的select标签
    let proSeEle = document.getElementById('d1')
    let citySeEle = document.getElementById('d2')
    //1.获取所有的省信息
    for(let pro in data){
        //2.创建option标签
        let proEle = document.createElement('option')
        //3.添加文本及属性
        proEle.innerText = pro
        proEle.setAttribute('value',pro)
        //4.将创建好的opti标签添加到省下拉框中
        proSeEle.appendChild(proEle)
    }
    //5.给省标签绑定文本域变化事件onchange
    proSeEle.onchange = function (){
        citySeEle.innerHTML=''//每次操作市之前清空市的数据
        //6.获取用户选择的省信息,根据省获取市
        let targetProDate = this.value
        let cityDataList = data[targetProDate]
        for(let i=0;i<cityDataList.length;i++){
            let cityOpEle = document.createElement('option')
            cityOpEle.innerText = cityDataList[i]
            cityOpEle.setAttribute('value',cityDataList[i])
            citySeEle.appendChild(cityOpEle)
        }
    }
</script>
</body>

标签:DOM,对象,标签,JS,window,let,BOM,操作,document
From: https://www.cnblogs.com/zhanghong1229/p/16960405.html

相关文章

  • BOM.DOM
    BOM,DOM,jQueryBOM操作全称:BrowserOBjectModel指浏览器对象模型window对象window.open('网址','','width=px,height=px,left=200px')#打开新窗口window.clo......
  • 前端开发 5 BOM操作与DOM操作
    今日内容详细目录今日内容详细BOM操作window的子对象navigator对象screeen对象history对象location对象弹出框警告框确认框提示框计时相关DOM操作查找标签操作节点获取值......
  • js 字符串与ArrayBuffer互转
    1.情景展示在js当中,如何将字符串转成ArrayBuffer?如何将ArrayBuffer转成字符串?2.字符串转ArrayBuffer/***将类型化数组转字符串Int8Array:8位有符号整数,长度1个字......
  • hdu3622 Bomb Game--2-sat & 二分
    原题链接:​​http://acm.hdu.edu.cn/showproblem.php?pid=3622​​题意:一个二维坐标系,n行数据,每行两个坐标算作一组,从n组跳出n点,画圆,半径一样,要求不能相交,可以相切,求最大半......
  • js base64与字符串互相转换
    1.情景展示在js当中,如何把base64字符串解码成字符串?如何把字符串进行base64编码?2.base64编码将字符串转base64格式window.btoa(str)  3.base64解码将base64格......
  • js2
    今日内容概要BOM操作DOM操作jQuery类库今日内容详细BOM操作BOM(BrowserObjectModel)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”window.o......
  • JS—节流与防抖
     一、js防抖和节流在进行窗口的resize、scroll、输出框内容校验等操纵的时候,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常之差。那么为了前端......
  • JS的BOM与DOM操作
    BOM与DOMBOM(BrowserObjectModel)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”。DOM(DocumentObjectModel)是指文档对象模型,通过它,可以访问HTML文档......
  • BOM操作 DOM操作 操作标签
    今日内容总结BOM操作(BrowserObjetModel)BOM是指浏览器对象模型它使JavaScript有能力与浏览器进行'对话'1.window.open() 打开一个网页 window.open('网址',......
  • js 正则表达式
    1、字符串中是否有空格varreg=/\s/;varcontent='xx'reg.test(content)返回true2、字符串开头是否有空格varreg=/^\s/;3、字符串结尾是否有空格varreg......