前端之BOM与DOM

BOM操作

Browser Object Model是指浏览器对象模型。通过BOM，JavaScript能与浏览器进行交互

window对象

一些常用的Window方法：
window.innerHeight 浏览器窗口的内部高度
window.innerWidth 浏览器窗口的内部宽度
window.open() 打开新窗口
window.close() 关闭当前窗口

点击查看代码

window.innerHeight
window.innerWidth
window.open('https://taobao.com')  //打开新标签
window.open('https://taobao.com','','width=300,height=300')  //打开子标签
window.close()  //只能关闭自己新建的窗口

navigator对象

navigator.appName　　Web浏览器全称
navigator.appVersion　　 Web浏览器厂商和版本的详细字符串
navigator.userAgent　客户端绝大部分信息
navigator.platform　　　浏览器运行所在的操作系统

点击查看代码

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36'
navigator.platform
'Win32'

history对象

window.history.forward() 前进一页
window.history.back() 后退一页

点击查看代码

window.history.back()

location对象

window.location.href 获取页面的url地址
window.location.reload() 刷新页面
window.location.href = url 跳转到指定页面

点击查看代码

window.location.href
window.location.reload()
window.location.href = 'https://www.baidu.com/'

弹框系列

警告框

alert("请关闭ad_block插件")

确认框

confirm('请确认您的用户邮箱是否正确')
获取用户是点击取消还是确认，返回false和true

提示框

prompt('注册成功')
获取用户输入的内容，也可通过第二个参数添加默认内容

计时器

单次定时

var t = setTimeout(showMsg,9000) 9秒钟之后自动执行showMsg
clearTimeout(t) 取消定时器

循环定时

var s = setInterval(showMsg,3000) 每隔3秒执行一次
clearInterval(s) 取消定时器

点击查看代码

function showMsg() {
  alert('欢迎来到淘多多购物网')
  }
var t = setInterval(showMsg,3000)
function clearMsg() {
  clearInterval(t)
}
setTimeout(clearMsg, 12000)

DOM操作

Document Object Model是指文档对象模型，通过它可以操作HTML文档的所有元素
但是HTML页面上有很多相同的标签所以我们在操作HTML标签之前还要先学会如何查找标签(js查找标签)

直接查找

通过标签名查找标签

document.getElementsByTagName('div') 数组套标签对象

通过class值查找标签

document.getElementsByClassName('c1') 数组套标签对象

通过id值查找标签

document.getElementById('d1') 标签对象本身

点击查看html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="c1">div1
        <span id="d1">div1>span1</span>
    </div>
    <div class="c1">div2
        <p id="d3">
            div2>p1
        </p>
    </div>
    <div class="c2">div3
        <span>
            div3>span2
        </span>
    </div>
    <p id="d5">p2</p>
    <span id="d6">span3</span>
</body>
</html>

点击查看js代码

document.getElementsByTagName('span')
document.getElementsByTagName('div')]
document.getElementsByClassName('c1')
document.getElementsByClassName('c2')
document.getElementById('d5')
document.getElementById('d1')

间接查找

parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
提示：方法得出的标签对象还可以继续点击上述方法

点击查看js代码

var d3Element = document.getElementById('d3')
d3Element.parentElement
d3Element.parentElement.nextElementSibling.children
d3Element.parentElement.nextElementSibling.nextElementSibling.nextElementSibling

DOM操作标签

标签命名建议

在给标签起变量名的时，因为该变量指向的是一个标签，建议使用xxxEle格式
eg:

标签类型	命名格式
a标签	aEle
p标签	pEle
div标签	divEle
span标签	spanEle
inpu标签	inputEle

动态创建一个a标签并添加到页面指定位置

点击查看代码

var aEle = document.createElement('a')  // 创建a标签
aEle.href = 'https://www.jd.com/'  // 设置href属性
aEle.innerText = '点击跳转京东'   // 设置文本内容
var brEle = document.createElement('br')  //创建br标签
var divEle = document.getElementById('qaq')  // 查找标签
divEle.append(brEle)  //di内部追加br标签
divEle.append(aEle)  // div标签内部追加标签

标签设置默认属性

比如id，class等设置的时候可以直接通过点的方式
divEle.id = 'd1'

标签设置自定义属性

比如username，password等设置的时候需要使用setAttribute
divEle.setAttribute('username','trump')
注意：
setAttribute()既可设置自定义属性也可设置默认属性

标签获取和移除指定属性

divEle.getAttribute("age") 获取指定属性
divEle.removeAttribute("age") 移除指定属性

innerText与innerHTML

获取值的时候
innerText只会获取文本内容
innerHTML获取文本和标签
设置值的时候
innerText不识别标签语法
innerHTML识别标签语法

DOM获取值操作

1.获取普通值数据
例如：input、option、textarea等
标签对象.value
2.获取文件数据
标签对象.value 只能获取到文件路径
标签对象.files 获取到一个数组，可以通过索引获取具体文件对象

属性操作

类属性操作

操作方法	效果
标签对象.classList	查看所有的类属性
标签对象.classList.add()	添加类属性
标签对象.classList.remove()	移除类属性
标签对象.classList.contains()	判断是否含有某个类属性
标签对象.classList.toggle()	有则移除，无则添加

样式操作

标签对象.style.属性名
divEle.style.height = '1000px'

事件

达到某个条件就自动触发的功能
eg:
用户点击某个标签弹出警告框双击某个标签提示信息

给标签绑定事件的两种方法

方式1

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p style="margin: 200px auto;text-indent: 600px">
        <span onclick="showMsg()">^^点我有惊喜^^</span>
    </p>

  <script>
        function showMsg() {
            alert('奖励你三十天封控套餐，请自觉领奖')
        }
  </script>

</body>
</html>

方式2

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p style="margin: 200px auto;text-indent: 600px">
        <span id="d1">^^点我有惊喜^^</span>
    </p>

  <script>
      let spanEle = document.getElementById('d1')
        spanEle.onclick = function () {
            alert('奖励你三十天封控套餐，请自觉领奖')
        }
  </script>

</body>
</html>

事件案例

数据校验

获取用户名和密码，校验是否符合，并展示相应提示
办法：给普通按钮绑定一个点击事件，触发校验动作

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据检验</title>
</head>
<body>
<form action="">
    <br><br><br><br><br><br>
    <p style="margin: 50px 600px">
        username:<input type="text" id="username">
        <span style="color: red" id="usernameError"></span>
    </p>
    <p style="margin: 50px 600px">
        password:<input type="password" id="password">
        <span style="color: red" id="passwordError"></span>
    </p>
    <p style="margin: 50px 680px">
        <input type="button" value="注册" id="button"><br><br>
    <input type="reset" id="resetButton">
    </p>
</form>
<script>
     let buttonEle = document.getElementById('button');
     buttonEle.onclick = function (){
         let usernameValue = document.getElementById('username').value;
         let passwordValue = document.getElementById('password').value;
         if (usernameValue.length === 0){
             let spanEle = document.getElementById('usernameError');
             spanEle.innerText = '用户名不能为空'
         }
          if (passwordValue.length < 6){
             let spanEle = document.getElementById('passwordError');
             spanEle.innerText = '密码不能少于六位'}
     }
     let resetEle = document.getElementById('resetButton')
     resetEle.onclick = function (){
         let span1Ele = document.getElementById('usernameError');
             span1Ele.innerText = '';
         let span2Ele = document.getElementById('passwordError');
             span2Ele.innerText = '';
     }

</script>

</body>
</html>

搜索框案例

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="margin: 200px 600px">
        搜索<input type="text" id="d1" value="默认的搜索内容">
    </div>
    <script>
        let inputEle = document.getElementById('d1');
            inputEle.onfocus = function () {
                this.value = '';
            }
            inputEle.onblur = function (){
             this.value = '午餐肉198g'
            }


    </script>
</body>
</html>

省市联动案例

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="margin: 200px 600px 50px 600px">省市：
    <select name="" id="prov">

    </select>
</div>
<div style="margin: 50px 600px">市区：
    <select name="" id="city">

    </select>
</div>

<script>
    let provEle = document.getElementById('prov');
    let cityEle = document.getElementById('city');
    let provinceCityData = {
        "北京":["东城区","西城区"],
        "天津":["南开区","津南区"],
        "四川":["成都市","德阳市"],
        '山东':["青岛市","济南市"]
    };
    for (let provValue in provinceCityData){
        let optionEle = document.createElement('option');
        optionEle.value = provValue;
        optionEle.innerText = provValue;
        provEle.append(optionEle)
    }
    provEle.onclick = function (){
        cityEle.innerText = ''
        let currentProvValue = this.value;
        let currentCityList = provinceCityData[currentProvValue];
        for (let i=0;i < currentCityList.length;i++){
            let optionEle = document.createElement('option');
            optionEle.innerText = currentCityList[i];
            cityEle.append(optionEle)

        }
    }

</script>
</body>
</html>

posted @ 2022-04-28 20:06 一梦便是数千载阅读(32) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端之JQuery

· 前端基础之HTML

· 前端基础之BOM和DOM

· Web前端开发：BOM与DOM

· 前端基础之BOM和DOM

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

公告

昵称：一梦便是数千载
园龄： 3年
粉丝： 8
关注： 21

+加关注

2025年3月

日

一

二

三

四

五

六

一梦便是数千载

前端之BOM与DOM

BOM操作

window对象

navigator对象

history对象

location对象

弹框系列

警告框

确认框

提示框

计时器

单次定时

循环定时

DOM操作

直接查找

通过标签名查找标签

通过class值查找标签

通过id值查找标签

间接查找

DOM操作标签

标签命名建议

动态创建一个a标签并添加到页面指定位置

标签设置默认属性

标签设置自定义属性

标签获取和移除指定属性

innerText与innerHTML

DOM获取值操作

属性操作

类属性操作

样式操作

事件

给标签绑定事件的两种方法

事件案例

数据校验

搜索框案例

省市联动案例

公告

搜索

随笔分类

随笔档案

阅读排行榜

推荐排行榜

最新评论