JavaWEB笔记09 Javascript中的内置对象（下）_window.open("java script 的内置对象.html","java script"-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46702804/article/details/119298907

本文深入讲解JavaScript中的核心对象，包括正则表达式、BOM、DOM等，详细介绍了如何使用这些对象进行页面操作和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaWEB笔记09 Javascript中的内置对象（下）

文章目录

JavaWEB笔记09 Javascript中的内置对象（下）

一.正则表达式对象：

RegExp对象表示正则表达式，是一个对字符串执行模式匹配的强大工具，对于RegExp对象有直接量语法：

传入参数/pattern/和/attributes/创建RegExp对象的语法：new RegExp(pattern , attributes);
直接量语法即用两个斜杠将正则表达语法规则放在其中，例：var regx=/[a-z]/;
除了上面的新建方法外还可以采用new：new RegExp("[a-z]");
RegExp对象去调用test：var b=regx.test("a"); //使用"a"与上面的进行匹配，test用来判断是否符合匹配规则
直接量语法中i不区分大小写的匹配: var regx = /[a-z]/i ;
举例：

var str="hello123";  
var reg = /[A-Z0-9]+/i;  
b = reg.test(str); 

//i不区分大小写而成功匹配，因此得到b的结果为true

避免部分匹配的问题有：var reg=/^[A-Z0-9]+$/; 其中的 ^开头和 $结尾都是为了避免部分匹配，其作用是按顺序进行匹配
相对于上面的i的位置，g表示全文检索，查找多个匹配而非找到一个就停止
replace方法可以对于出现的符号进行替换
举例：

str.replace(/=/g,"") //将str全文的=替换成空

二.BOM对象：

1.BOM对象介绍及组成部分：

BOM概念：Browser Object Model 浏览器对象模型，将浏览器的各个组成部分封装为对象，会将浏览器的各个组成部分看成对象，其中BOM对象的组成部分有：

1）window( ***** )窗口对象
2）location( ** )地址栏对象
3）history(*)历史记录（当前窗口）对象
4）navigator浏览器对象
5）screen浏览器屏幕

其中上面的 4）5）基本不使用，在此仅作为了解

组成部分详细介绍：

window 对象表示浏览器中打开的窗口
location 用于窗口或框架的 Location 对象
history 对 History 对象的只读引用
Navigator 对 Navigator 对象的只读引用
Screen 对 Screen 对象的只读引用

获取 html文档对象： 通过window对象中的属性，可以获取其他四个BOM对象

2.BOM中的window对象：

window 对象表示浏览器中打开的窗口，对于window对象几个常用的属性，其中之一就是document，document 对 Document 对象的只读引用，在后面的DOM对象中将详细介绍，此处不过多解释

window对象常用方法介绍：

window对象在方法调用时可以省略window，例如：window.alert弹出警告框，我们常写作alert("需要弹框的内容")
window.confirm弹出确认取消框：点击确定返回true，点击取消返回false，定义var value = confirm("text")可以接收到对应的true或false
window.prompt显示可提示用户输入的对话框，定义var value = prompt("text")可以接收到输入对话框的值
使用window对象打开关闭窗口的方法：
除了之前使用a标签链接的方法之外，还可以在JS中使用confirm进行结合，即弹框取消或者确认，并结合open进行设计：

1）打开窗口的方法：

<head>
    <meta charset="UTF-8">
    <title>JS-test</title>
	<script type="text/javascript">
    function intoBaidu(){
        if(confirm("你要离开当前网站，要去到http://www.baidu.com这个网站你确定要吗？")){
            //打开一个新的窗口，返回的是你新打开的窗口对象。
            var newWindowObj=window.open("http://www.baidu.com");
        }
    }
</script>
</head>
<body>
	<a href="index.html">进入网易</a>
	<button type="button" onclick="intoBaidu()">进入百度</button> //标签内部调函数
</body>

在这里插入图片描述
2）关闭刚才打开的新窗口的方法：

<head>
    <meta charset="UTF-8">
    <title>JS-test</title>
    <script type="text/javascript">
        function closeWindow() {
            //alert("调用了");
            if (window.confirm("要关闭新窗口吗")) {
                newObj.close();
            }
        }
        function openWindow() {
            //返回值，就是你打开的新窗口对象
            newObj = window.open("index.html");
        }
    </script>
</head>
<body>
	<a href="javascript:void(closeWindow())">关闭我打开的新窗口</a>
	<a href="javascript:void(openWindow())">打开一个窗口</a>
</body>

在这里插入图片描述

3.BOM中的location对象：

location是用于窗口或框架的 Location 对象，其中在location对象中常用来获取地址栏对象，其中对象中的成员有：

host 设置或返回主机名和当前 URL 的端口号
hostname 设置或返回当前 URL 的主机名
href 设置或返回完整的 URL
pathname 设置或返回当前 URL 的路径部分
port 设置或返回当前 URL 的端口号
protocol 设置或返回当前 URL 的协议
search 设置或返回从问号 (?) 开始的（URL统一资源定位符）（查询部分）
代码演示：

<head>
    <meta charset="UTF-8">
    <title>JS-test</title>
    <script type="text/javascript">
        document.write(location.host);
        document.write("<br>")
        document.write(location.hostname);
        document.write("<br>")
        document.write(location.href);
        document.write("<br>")
        document.write(location.pathname);
        document.write("<br>")
        document.write(location.protocol);
        document.write("<br>")
        document.write(location.search);
    </script>
</head>

在这里插入图片描述

关于网页地址URL的解析：
URL：统一资源定位符，其格式及解析如下：

底层协议//服务器域名或IP地址//服务器端口（默认为80）//访问资源路径//发送给http数据//锚

访问资源路径使用的是键值对进行表示的
对于路径名可以使用相应的string操作来截取对应的部分
锚点链接可以跳转到页面中的对应部分
具体解析参考这张图：

4.BOM中的history对象和其他对象：

BOM中的对象除了上面介绍的window和location之外还有其他三个：history 对 History 对象的只读引用，Navigator 对 Navigator 对象的只读引用，Screen 对 Screen 对象的只读引用，对其进行简要介绍：

history.forward()前进几步
history.go()指的是步，括号中填正值是前进，填负值是后退
screen对象可以针对前端人员的开发进行查看，查看像素，屏幕适配等等

三.定时器：

在前端设计中常加入一些含有时间的动态效果，这种效果就需要结合定时器进行设计了，其中定时器分为：循环定时器和一次定时器

var timeID = window.setTimeout(函数,3000); 其中是函数中的代码等待3s之后进行执行对应函数
window.clearTimeout(timeID)取消定时器
设置循环定时器：window.setInterval(函数,1000); 反复执行，每隔1s执行一次，其中清除循环定时器的方法和上面清除一次定时器的方法相同
制造屏幕上的时钟动态效果：

var date = new Date();
var timeStr=date.toLocaleString(); //调整时钟格式

四.DOM文档对象：

1.DOM对象介绍：

DOM：文档对象模型Document Object Model，DOM是将文档中的各个组成部分看成对象，下面是DOM中的组成部分：

Element元素/标签对象
Attribute属性对象
Text 文本对象
Comment 注释对象
Node 节点对象
Document 整个HTML文档对象

整个dom可以进行树形图解析形成dom树形结构，最上层的document文档对象

2.DOM获取标签对象：

使用DOM对页面中的标签进行设置，绑定等之前的第一步也是最终要的一步，那就是使用DOM获取标签对象，共有下面几种方法：

1）从id来拿：document.getElementById("id") 其中返回是是只有一个元素的数组，即可以看作是一个对象，可以直接访问
2）从标签名获取：document.getElementsByTagName("h1")得到的获取出来的是一个数组，属于伪数组，不能调用数组的方法，只能访问下标，因此可以用下标来控制按顺序出现的h1标签对应的内容
3）从类名来拿：document.getElementsByClassName("class")同样返回得到的是一个伪数组，即使是一个元素也要用数组下标来进行访问
4）document.querySelector("id选择器") 根据CSS选择器进行选择，所获得的#id选择器是单数，其余的是复数，也是可以通过下标进行访问的
5）document.querySelectorAll("其余选择器") 获得全部的内容（不常用）

3.DOM设置或获取标签之间的内容：

设置或获取标签之间的内容第一步是通过使用上面的方法拿到对应的标签，之后再进行设置或访问：

标签对象名.innerText 可以对于得到的标签对象进行文本访问，但是若对应的标签中有对应的子标签嵌套，只会拿其中的子标签文本，不会拿标签
设置对应的内容，直接对于其赋值：标签对象名.innerText="text"
设置内容需要转义HTML标签的方法：标签对象名.innerHTML，上面innerText方法无法转义对应的HTML标签

4.DOM动态的操作标签：

DOM中动态操作标签意义在于能够更加灵活地控制页面的渲染以及页面，注意动态操作标签的思想：站在父标签的角度添加子元素：

使用document.createElement("div");就可以动态创建对应的div标签
创建标签对象在上面的语句之后使用：bd=document.body去承接整个页面的body部分
承接之后使用bd.appendChild(div);将对应的标签放入页面的body部分
对于创建的div标签中添加文本对象：
document.createTextNode("text") 创建文本对象
div.appendChild(text) 将对应的文本添加进对应的div标签中
使用document.createComment("注释") 可以创建注释对象
创建属性对象：var attr = document.createAttribute("style");
创建后使用： attr.value="color:red;font-size:30px"进行CSS样式修饰
给标签对象设置属性：div.setAttributeNode(attr); 先创建属性对象之后进行设置，简记方法：div.setAttribute("id","d1") 给标签会直接设置属性（设置id为d1）
删除标签：同样的思想是站在父亲的角度去操作子类标签: bd.removeChild(document.getElementById("d1")) 站在父亲角度删d1
站在自身的角度：div.remove() 自己删除自己
div中的id属性进行删除：div.removeAttribute("id");
div中的属性对象进行删除：div.removeAttributeNode(attr); //注意传入的是属性对象
替换标签：
新创建一个元素：var u = document.creatElement("u");
设置元素文本样式：u.innerText="text";
站在父类角度去替换子标签：h2.replaceChild(u,document.getElementById("d1"));或者使用标签的插入：h1.insertBefore(h3,h2); 同样站在父类h1的角度，在h2前面加h3

五.DOM中事件的绑定：

1.事件的介绍：

事件：指一件事情
事件源：指事件发生的组件
事件类型：例如：“点击” 是 “双击事件”
常用的事件类型：
1）双击事件：ondbclick
2）鼠标移上：onmouseover
3）鼠标移出：onmouseout
4）获取：onfocus

2.事件的绑定和解绑：

事件的绑定：

1）直接在标签上写事件名：<div onclick="show()">111</div>
即单机标签上的时候就会触发show()方法，但是在多个标签绑定同一事件时会十分不方便
2）使用代码进行绑定：
先全部拿到：var arr = document.querySelectorAll(".btn") ，再遍历得到的数组arr，循环绑定全部的按钮标签arr[i].onclick=function(){ this.style.color="red"; }
（注：这里this 谁调用了这个函数，函数中的this就代表谁，用this写较明确）

事件的解绑：

解绑事件：arr[0].onclick=null解除单击事件触发
在代码中绑定和解绑相结合：在上面已获得对应数组arr后绑定事件 arr[0].addEventListener("click",test)，对于上面的事件进行解绑：arr[0].removeEventListener("click",test)，对于使用这种类型进行绑定和解绑：好处有：易于实现复杂代码，效果不会冲撞

3.表单验证：

表单验证实质是输入框中的内容进行更改和获取：

document.getElementsByName("name")[0].style.border="..." 改变input框中样式
document.getElementsByName("name")[0].value = "" 通过代码来获取输入框中的内容

4.结合事件设置对象属性：

1）设置自带属性：直接进行设置，使用对应的body收到本地之后
对于标签自带属性的修改，先用id收到对应的标签对象，再进行对应的勾选：
document.getElementById('ck').checked = false;
2）设置CSS属性：先通过id拿到对应的标签对象
设置对应属性：标签对象名.style.height等进行属性设置，但是注意在CSS中的属性在JS设置时去掉- 并且拼写变驼峰式
或者写成：标签对象名.style.cssText="height:100px;width:20px"
3）清除之前的样式：
标签对象名.clearStyle(); 可以清除其之前的样式