前端——BOM, DOM

前端——BOM, DOM

  • BOM

  • DOM

前言

​ JavaScript 分为 ECMAScript、BOM、DOM

ECMAScript规定了JavaScript 的编程语法和基础核心知识

而BOM和DOM则是为了让JavaScript能和浏览器交互而产生的

BOM（Browser Object Model）是指浏览器对象模型， 通过写js代码可以跟浏览器交互

DOM （Document Object Model）是指文档对象模型，通过写js代码可以跟html交互

BOM

window对象

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

  • 如何理解window对象

    Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。

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

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

  • 常用的Window方法

    方法 含义
    window.open() 打开新窗口
    window.close() 关闭当前窗口
    window.innerHeight 浏览器窗口的内部高度
    window.innerWidth 浏览器窗口的内部宽度

  • window子对象

    1. navigator

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

      浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

    2. screen

      方法 作用
      screen.availWidth 可用的屏幕宽度
      screen.availHeight 可用的屏幕高度

      屏幕对象，不常用。

    3. history

      方法 作用
      history.forward() 前进一页
      history.back() 后退一页

      浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。

    4. location

      方法 作用
      location.href 获取URL
      location.href="URL" 跳转到指定页面
      location.reload() 重新加载页面

      ​ 获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

JavaScript创建的消息框

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

  • 警告框

    警告框经常用于确保用户可以得到某些信息。

    当警告框出现后，用户需要点击确定按钮才能继续进行操作。

    ​ 警告框的语法：

    alert("你看到了吗？");

  • 确认框

    确认框是用于用户得到信息后的验证与确认

    确认框出现后唯有点击确认获取取消才能继续进行操作，确认（true）取消（false）

    确认框的语法：

    confirm("请确认")

  • 提示框

    提示框用于提示用户进入页面前输入的信息

    提示框出现，用户需要输入值，然后点击确认或取消才能进行下一步操作

    确认（输入的值）取消（返回null）

    提示框的语法：

    prompt("提示信息")

定时器相关

可以通过JavaScript执行的代码，实现在浏览器上通过一定的时间间隔后才显示出来

  • 定时器相关的相关方法

    相关方法 语法 含义
    setTimeout() var t=setTimeout("JS语句",毫秒) 多少秒之后自动执行js语句
    clearTimeout() clearTimeout(setTimeout_variable) 取消括号中代码的定时任务
    setlnterval() setInterval("JS语句",时间间隔) 每隔一段时间执行一次js语句
    clearInterval() clearInterval(setinterval返回的ID值) 取消setInterval设置

  • 相关方法的具体理解和实际操作

    1. setTimeout()

      此方法会返回某个值，值被存储到变量t中，若要取消可通过此变量名取消此方法

    2. clearTimeout()

      使用此方法可以通过setTimeout的值来取消这个方法的定时任务

      举例：

      // 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

    3. setlnterval()

      此方法是按照指定的周期来调用括号中js的语句的函数，它会不停的调用，知道clearInterval（）被调用或窗口关闭才会返回一个值存储到变量名中

    4. clearInterval()

      使用此方法可以通过setlnterval的值来取消这个方法的定时任务

      举例：

      // 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

DOM

DOM是令JavaScript 代码对HTML文件进行交互，网页加载的时候，浏览器会创建页面的DOM与HTML文件进行交互

HTML DOM

  • DOM标准规定HTML文档中的每个成分都是一个节点(node)

    对象 节点 含义
    document 文档节点 代表的是整个文档
    element 元素节点 代表了一个元素
    text 文本节点 代表了一个元素中的文本
    attribute 属性节点 代表一个属性（元素/标签才有属性）
    comment 注释节点 注释

  • JavaScript 可以通过DOM创建动态的HTML

    1. JavaScript 能够改变页面中的所有 HTML 元素
    2. JavaScript 能够改变页面中的所有 HTML 属性
    3. JavaScript 能够改变页面中的所有 CSS 样式
    4. JavaScript 能够对页面中的所有事件做出反应

查找标签

  • 查找标签的方法

    直接查找方法 含义
    document.getElementById() 根据id值查找标签 结果直接是标签对象本身
    document.getElementsByClassName() 根据class值查找标签 结果是数组类型
    document.getElementsByTagName() 根据标签名查找标签 结果是数组类型
    间接查找方法
    parentElement 父节点标签元素
    children 所有子标签
    firstElementChild 第一个子标签元素
    lastElementChild 最后一个子标签元素
    nextElementSibling 下一个兄弟标签元素
    previousElementSibling 上一个兄弟标签元素

节点操作

节点就是标签对象的意思

  • 创建节点

    创建节点的语法：

    var  变量 = document.createElement(''标签名'')

  • 添加节点

    添加节点有两种方法，分别是尾部追加，指定位置增加

    1.尾部追加

    需要先找到需要追加的标签divEle,创建节点后的变量名
divEle.append/appendChild(创建节点后的变量名)；

    2.指定位置增加

    somenode.insertBefore(创建节点后的变量名,某个节点);

    由于这是在浏览器上操作，并没有改源代码，故而是动态创建，仅仅是临时有效

  • 删除节点

    获得要删除的元素，通过父元素调用该方法删除

    找到需删除的标签.removeChild(要删除的节点)

  • 替换节点

    语法

    找到需替换的标签.replaceChild(newnode, 某个节点);

  • 属性节点

    语法

    节点的标签名.属性			这里的属性只能是默认属性（通过句点符得到的属性）
节点的标签名.setAttribute()  这里的属性可以是默认属性也可以是自定义属性

    文本操作

    innerText与innerHTML的区别

    innerHTML获取标签内部所有的内容，包括文本和标签

    innerText 是只获取标签内的文本，其他的都不要

    在设置值时，inner HTML能将文本加标签，所展示的文本与inner Text相同但形式不用

JS获取用户信息

  • 获取值的语法

    1.普通数据(输入、选择)
	标签对象.value

2.文件数据（上传）
	标签对象.files   // 获取整个数组
	标签对象.files[0] // 获取某一个文件对象

类属性操作

  • 类属性的操作方法

    方法 作用
    标签对象.calssName 获取所有样式类名(字符串)
    标签对象.classList.add() 添加类
    标签对象.classList.remove() 删除指定类
    标签对象.classList.contains() 存在返回true，否则返回false
    标签对象.classList.toggle() 存在就删除，否则添加

  • JS样式操作

    语法：

    标签对象.style.标签样式属性名 = ""
(backgroundColor	背景颜色
 backgroundImage	背景图片)

如：obj.style.backgroundColor="red"

  • js操作css 属性的规律

    1. 对于没有中横线的CSS属性一般直接使用style.属性名即可

      obj.style.margin
obj.style.width
obj.style.left
obj.style.position

    2. 对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可（驼峰体）

      obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

事件

  • 什么是事件

    ​ 事件就是用户对窗口上各种组件的操作

    例如用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

  • 常用的事件

    事件 操作
    onclick 当用户点击某个对象时调用的事件句柄。
    ondblclick 当用户双击某个对象时调用的事件句柄。
    onfocus 元素获得焦点
    输入框
    onbiur 元素失去焦点。
    用于表单验证,用户离开某个输入框时,代表已经输入完了,可以对它进行验证.
    onchange 域的内容被改变
    通常用于表单元素,当元素内容被改变时触发.
    onkeydown 某个键盘按键被按下
    当用户在最后一个输入框按下回车按键时,表单提交.
    onkeypress 某个键盘按键被按下并松开。
    onkeyup 某个键盘按键被松开
    onload 一张页面或一幅图像完成加载。
    onmousedown 鼠标按钮被按下
    onmousemove 鼠标被移动
    onmouseout 鼠标从某元素移开
    onmouseover 鼠标移到某元素之上
    onselect 在文本框中的文本被选中时发生。
    onsubmit 确认按钮被点击，使用的对象是form

  • 事件的绑定方式

    1. 方式1 提前写好函数，标签内部指定

      <input type="button" value="点我" ondblclick="func1()">
    <button id="d1">按我</button>
<script>
        // 绑定事件的方式1:提前写好函数 标签内部指定
        function func1(){
        alert(123)
    }
</script>

    2. 方式2 先查找标签，然后可进行批量绑定（for循环）

      <script>
let btnEle = document.getElementById('d1')
btnEle.onclick = function (){
    alert(321)
}
</script>

  • 事件中的this

    ​ this指代的是当前被操作的标签对象

    let btnEle = document.getElementById('d1')
    btnEle.onclick = function (){
        alert(321)
        console.log(this)
    }
 	this指代的是当前被操作的标签对象

  • 等待文档加载完毕之后再执行一些代码

    window.onload = function () {
        页面js代码    
    }

  • js事件的案例

    1.校验用户的输入

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    <input type="text" id="username">
    <span class="errors" style="color: red"></span>
</p>

<p>
    <input type="text" id="password">
    <span class="errors" style="color: red"></span>
</p>
    <button id="btn">提交</button>

<script>
    // 1.查找按钮标签
    let btnEle = document.getElementById('btn');
    // 2.绑定单击事件
    btnEle.onclick = function () {
        // 3.获取用户输入的用户名和密码
        let userNameVal = document.getElementById('username').value;
        let passWordVal = document.getElementById('password').value;
        // 4.判断用户名和密码是否合法
        if(userNameVal === 'jason'){
            // 4.1.查找获取用户名的input框下面的span标签
            let span1Ele = document.getElementsByClassName('errors')[0];
            // 4.2.给span标签添加内部文本
            span1Ele.innerText = '用户名不能是Jason'
        }
        // 5.判断密码是否为空
        if(passWordVal.length === 0){
            // 5.1.查找获取用户名的input框下面的span标签
            let span1Ele = document.getElementsByClassName('errors')[1];
            // 5.2.给span标签添加内部文本
            span1Ele.innerText = '你是傻叉吗 密码不能为空!!!'
        }

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

    2.省市联动

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!--    <script src="jQuery3.6.js"></script>-->
</head>
<body>
省份:<select name="" id="province">

</select>

市区:<select name="" id="city">

</select>

<script>
    let data = {
        "河北": ["廊坊", "邯郸"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        "安徽": ["芜湖", "合肥"],
        "上海": ["浦东新区", "青浦区"],
        "深圳": ["宝安", "龙华"]
    };
    // 提前找好select标签
    let proEle = document.getElementById('province');
    let cityEle = document.getElementById('city');

    // 1.循环获取所有的省信息
    for(let pro in data){
        // 2.创建option标签
        let opEle = document.createElement('option');  // <option></option>
        // 3.添加内部文本
        opEle.innerText = pro  // <option>省份信息</option>
        // 4.添加value属性
        opEle.setAttribute('value',pro)  // <option value='省份信息'>省份信息</option>
        // 5.将上述的option标签添加到第一个select标签内
        proEle.append(opEle)
    }

    // 给省份的下拉框绑定文本域变化事件
    proEle.onchange = function () {
        // 每次给市区下拉框添加市区信息之前 应该先清空上一次加载的数据
        cityEle.innerHTML = '';
        // 1.获取用户选择的省份信息
        let currentPro = this.value;
        // 2.根据省份获取对应的市区列表数据
        let targetCityList = data[currentPro];
        // 3.循环获取所有的市信息
        for(let i=0;i<targetCityList.length;i++){
            // 4.创建option标签
            let opEle = document.createElement('option');  // <option></option>
            // 5.添加内部文本
            opEle.innerText = targetCityList[i]
            // 6.添加value属性
            opEle.setAttribute('value',targetCityList[i])
            // 7.添加到第二个select标签内
            cityEle.append(opEle)
        }
    }
</script>


</body>
</html>
posted @ 2022-08-25 22:54  Nirvana*  阅读(32)  评论(0)    收藏  举报