您的位置: 首页  >  IT文章  >  JavaScript- BOM, DOM BOM DOM 对象 事件

JavaScript- BOM, DOM BOM DOM 对象 事件

分类: IT文章 • 2023-10-30 15:00:31

Browser Object Model 浏览器对象模型, 提供与浏览器窗口进行交互的方法

它使 JavaScript 有能力与浏览器进行“对话”。　BOM 最主要的对象就是 window 对象

全局变量和全局方法都是 window 的属性和方法, 实际使用的时候书写可以忽略 " window. "

var a = 100;
console.log(a,window.a)

function foo(){
    console.log(a)  
}
foo()
window.foo()

window 对象

核心的窗口对象, 随着网页打开自动创建

常用的方法 

window.innerHeight　　　  //浏览器窗口的内部高度
window.innerWidth　　    // 浏览器窗口的内部宽度

window.open()　　　　　　 // 打开新窗口 详情见下面
window.close() 　　      // 关闭当前窗口 无参数
window.opener　　　　　　 // 返回对创建该窗口的 Window 对象的引用 （可读可写）

window.alter()　　　　 // 警告框, 无返回值 只用于提示信息 只有确认按钮
window.prompt()　　　　// 输入框, 带返回值的弹窗, 可输入, 提供两个按钮 确认取消
window.confirm() 　　　// 确认框, 返回布尔值, 提供两个按钮 确认取消

open 详解

window.open(URL,name,features,replace) 　

参数

  • URL: 可选，新开页面的 URL 　　
  • name: 可选，声明窗口名称 　　
  • features: 可选，制定窗口特性 　　　　　　　　　　

常用 replac 参数 

  • height=100 窗口高度； 　　　　　　　　　　　　
  • width=400 窗口宽度； 　　　　　　　　　　　　
  • top=0  窗口距离屏幕上方的象素值； 　　　　　　　　　　　　
  • left=0  窗口距离屏幕左侧的象素值； 　　
  • replace 　可选，布尔值，规定浏览历史搜否替换覆盖 window.opener　　　　　　 　　

ps

对一个通过 window.open 打开的窗口，通过 window.opener 调用父窗口的方法.

可直接通过 window.opener.foo({{ yangtuo }} 在子页面通过参数的将数据传递给父页面调用父页面的参数 　　.

从而可以实现子页面和父页面之间的数据传递.

常用属性

history

功能　　保存当前窗口访问过的 URL .

属性

　　length　　当前窗口访问过的数量 ( 只要 URL 不同都会被记录  不是访问次数, 要注意区分  ).

方法

　　back()　　返回前一个 URL ( 后退按钮 ).

　　forward()　　前进到下一个 URL ( 前进按钮 ).

　　go(n)　　参数可取正负值, 值代表几个 URL , 正 - 前进, 负 - 后退 .

location

功能　　保存或操作地址栏的URL

方法　　

　　reload( false / true )　　重载页面, 设置为 false 从缓存中加载页面, 为 true 表示强制从服务器重载

定时器方法

间隔调用 ( 周期性定时器 )

每隔一段时间就执行一次代码

var timeID = setInterval(function,interval)

参数　　

　　function　　需要执行的操作

　　interval 　　指定时间间隔 单位 ms 

返回值　　返回定时器 ID 彼此区分

关闭间歇调用定时器

clearInterval(timeID)

超时调用 ( 一次性定时器 )

等待一段时间后执行一次代码

var timeID = setTimeout(function,timeout)

用法参数返回值同上 

关闭超时调用计时器

clearTimeout(timeID)

定时器关闭处理

超时调用的内存占用较少.这里的关闭方法只是提供了一个关闭途径

但是间歇调用的不间断调用是会对内存造成影响因此需要考虑何时关闭

定时器实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function start() {
            // 开启定时器
            timer = setInterval(function () {
                var date = new Date();
                console.log(date);
            }, 1000);
            return timer
        }

        function stop() {
            clearInterval(timer)
        }
    </script>
</head>
<body>
<button onclick="start()">开始</button>
<button onclick="stop()">关闭</button>


</body>
</html>
每隔一秒打印当前时间 
        var i = 5;
        var timerID = setInterval(function () {
            if (i == 1) {
                clearInterval(timerID)
            }
            console.log(i);
            i--
        },1000)
倒计时5s 
var res = confirm("是否关闭当前窗口");
if (res) {
    setTimeout(function () {
        window.close()
    }, 3000);
}
超时调用, 延时3s关闭窗口

DOM 对象

Document Object Model,提供操作文档（html元素）的方法，核心为document对象

节点概念

将文档中所有的内容（标签，文本，标签属性，注释）封装成节点对象

分类

  • 元素节点
  • 属性节点
  • 文本节点
  • 注释节点
  • 文档节点 -> document

节点查找

查找到多个节点的时候会以列表的形式返回

可以用索引的方式取出内部元素, 当然也可以切片

直接查找

document.getElementById("") 　　　　　　　 　  // 根据ID获取一个标签
document.getElementsByClassName("") 　　　  // 根据class属性获取
document.getElementsByTagName("")　　　　  // 根据标签名获取标签合集
document.getElementsByName("") 　　　　　 // 根据 表单控件的 name 属性值获取

间接查找(无括号)

通过一个已知节点, 基于位置或者亲属关系来间接查找

A.parentElement 　　　　　　　　　     //找父节点标签元素
A.children　　　　 　　　　　　　　    // 找所有子标签
A.firstElementChild 　　　　　　    // 第一个子标签元素
A.lastElementChild 　　　　　　    // 最后一个子标签元素
A.nextElementSibling 　　　　    // 下一个兄弟标签元素
A.previousElementSibling 　　  // 上一个兄弟标签元素

节点创建 / 删除 / 替换

创建节点

创建后是不存在的, 必须要找位置安置

document.createElement("B"); 　　// 创建一个 B 标签

添加节点

添加节点必须基于父节点来操作

A.appendChild(B)    　　    // 在 A 的里面作为 A 的最后一个子节点添加 B
A.insertBefore(B,C)    　　// 在 A 里面的 子标签C 前面添加 B

删除节点

节点的删除只能有父节点来操作

A.document.removeChild(B)	// 从 A 标签里面移除 B 标签

替换节点

节点的替换同样只能由父节点来操作

A.replaceChild(B, C)　　　　　　 // 从 A 标签中将 C 标签替换成 B 标签

节点属性创建 / 删除

创建属性

自带的属性可以直接设置和取值

A.B = "C"	   　　　　　　  // 为 A 创建 B 属性,值为 C　

自定义属性

A.setAttribute("B", "C");      // A 节点添加 B 属性, B 属性值为 C
A.getAttribute("B");           // 获取 A 标签的 B 属性值

删除属性

自定义,默认都可

A.removeAttribute("B")    　　　 // 移除 A 节点的 B 属性

节点内容

innerText

A.innerText = "B"    // 给 A 节点设置显示内容为 B

ps:

如果 A 有子标签.设置 A 内容后.会清除子标签只剩下一个文本 B

取值的时候只能取到子标签的内容

innerHtml

A.innerHtml = "<p>p</p>"    // 给 A 节点设置显示内容为 B

ps:

主要用于快速添加简单的标签

取值的时候可以取到子标签本身不仅仅是内容

value

只适用于 input, select, textarea

A.value	　　　　　　　　　　　　// 获取A的值

节点样式操作

A.className 　　　　　　　　　　　　  // 获取所有样式类名(字符串)
A.classList.remove("c1") 　　　　 // 删除指定类
A.classList.add("c1")　　　　 　　// 添加类
A.classList.contains("c1")     // 存在返回true，否则返回false
A.classList.toggle("c1") 　  　// 存在就删除，否则添加　　
A.style.backgroundColor="red"	// 将 A 的背景颜色设置成红色

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

3. 属性值中的单位不可省略. 比如 px 

节点空间关系

parentsNode

获取父节点, 父元素

childNodes

获取子节点, 包含文本节点和元素节点

children 

获取子节点数组, 只包含元素节点, 不包含文本节点

nextSibling

获取下一个兄弟节点

previousSibling

获取上一个兄弟节点

事件

事件类型 

鼠标事件

onclick 　　　　　 //　单击

ondblclick 　　  　// 　双击

onmousemove 　   //　鼠标移动

onmouseout 　　 //  鼠标移出

onmouseover 　　// 鼠标移入

键盘事件

onkeydown 　　     //  某个键盘按键被按下 ( 只要是按键都触发 )

onkeypress 　　    // 某个键盘按键被按下 ( 今举行字符按键 )

onkeyup 　　　　  // 某个键盘按键被松开

元素或者文档加载完毕

onload 　　　　   //  一张页面或一幅图像完成加载。

表单控件的按钮监听

oninput           // 监听输入框的输入状态 ( 实时监听 )

onchange 　　　　  // 监听表单控件的值发生变化

onfocus 　　　　　 // 监听文本框焦点状态

onblur 　　　　　　// 监听文本框失去焦点状态

onsubmit 　　　   //　监听提交状态
onselect 　　　　  //  在文本框中的文本被选中时发生
// onsubmit 事件由form 监听 , 点击提交按钮自动触发,
// 检测表单数据是否可以发生, 允许给出返回值为 布尔值
// true 表示可以提交, false 表示不可发送
form.onsubmit = function () {
    if(uname.value.length == 0) {
        // 阻止提交
        return false;
    } else {
        return true;
    }
}

所有事件的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="index.js"></script>
    <script>
        window.onload = function () {
            // 鼠标
            // console.log($("h1"));
            // $("h1").ondblclick = function () {
            //     alert("双击")
            // };
            // $("div").onmouseover = function () {
            //     console.log("鼠标移入")
            // };
            // $("div").onmousemove = function () {
            //     console.log("鼠标移动呀动")
            // };
            // $("div").onmouseout = function () {
            //     console.log("鼠标移出")
            // };

            // 键盘
            // onkeydown = function () {
            //     console.log("键盘被按")
            // };
            // onkeypress = function () {
            //     console.log("字符被按")
            // };
            // onkeyup = function () {
            //     console.log("松开了")
            // };

            // 表单
            var form = $("form");
            var uname = $("input");
            var hobby = $("input", 1);

            uname.onfocus = function () {
                console.log("表单的获取焦点")
            };
            uname.onblur = function () {
                // this 表示当前的触发对象
                console.log("获取值: ", this.value)
            };
            uname.oninput = function () {
                console.log("实时监听获取值: ", this.value)
            };
            uname.onchange = function () {
                console.log("前后不一致了: ", this.value)
            };
            hobby.onchange = function () {
                console.log("按钮变了: ", this.checked)
            };
            // onsubmit 事件由form 监听 , 点击提交按钮自动触发,
            // 检测表单数据是否可以发生, 允许给出返回值为 布尔值
            // true 表示可以提交, false 表示不可发送
            form.onsubmit = function () {
                if(uname.value.length == 0) {
                    // 阻止提交
                    return false;
                } else {
                    return true;
                }
            }

        };
    </script>
    <style>
        div {
             200px;
            height: 200px;
            background-color: palegreen;
        }
    </style>
</head>
<body>
<h1>标题</h1>
<div>文本啦文本</div>
<form action="/" method="post" enctype="multipart/form-data">
    用户名: <input type="text" name=""><br>
    兴趣: <input type="checkbox" name="" value="1"><br>
    <input type="submit">

</form>


<script>
    console.log("我看看谁比我快")
</script>

</body>
</html>
整合后的实例

事件绑定方式

内敛方式

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
　　function changeColor(ths) {
　　　　ths.style.backgroundColor="green";
　　}
</script>

注意

this是实参，表示触发事件的当前元素。

函数定义过程中的ths为形参。

外部引入

<div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵";
}
</script>

标准事件监听

btn.addEventListener("click",function(){},false)

参数

　　省略 on 前缀的事件名称

　　事件发生后执行函数

　　设置事件传递机制 默认 false

事件传递

　　事件由多个元素同时监听

　　事件发生后的传递顺序

　　默认冒泡传递, 从里向外逐一触发

　　设置为 true 表示捕获, 从外向内触发执行

window.onload

　　绑定事件的时候，要等到文档加载完毕

　　对于不存在的元素无法绑定事件

　　window.onload事件在文件加载过程结束时触发

　　位于DOM中的所有对象都被读取完毕时才会触发

    <script>
        window.onload = function () {
            // 获取元素
            console.log($("h1"));
        };
    </script>

注意

.onload()函数存在覆盖现象

事件对象

事件对象伴随事件触发自动创建，存储所有与当前事件相关的信息。

作为参数自动传入事件处理函数中，只需要接收后进行相关操作

div.onclick = function (evt){

};

相关属性

1. 鼠标事件对象

  • offsetX
  • offsetY

2. 键盘事件对象

  • key : 获取按键名称，区分字母的大小写
  • which：获取按键编码。
  • onkeydown事件中，功能按键对应有键盘编码，字符按键一律返回大写字母的ASC码
  • onkeypress事件中，区分大小写字母的ASC码

3. target/srcElement

　　事件对象的属性，用来获取事件的触发对象

window.onload = function (){
    var div = $("div");
    div.onclick = function (event){
        //鼠标在元素坐标系中的位置
        console.log(event.offsetX,event.offsetY);
        //鼠标在页面坐标系中的位置
        console.log(event.clientX,event.clientY);
        //鼠标在屏幕坐标系中的位置
        console.log(event.screenX,event.screenY);
        console.log(event.target);
    };
    onkeydown = function (e){
        //console.log(e);
        console.log("onkeydown: ",e.key,e.which);
        console.log(event.target);
    };
    onkeypress = function (e){
        console.log("onkeypress: ",e.key,e.which);
    }
};

相关推荐