JavaScript 入门指南（三）BOM 对象和 DOM 对象

迷南。 2024-04-20 12:32 5阅读 0赞

## BOM 对象 ##

### BOM 简介 ###

*  BOM（browser Object Model）即浏览器对象模型
 *  BOM 由一系列对象组成，是访问、控制、修改浏览器的属性的方法
 *  BOM 没有统一的标准（每种客户端都可以自定标准）。
 *  BOM 的顶层是 window 对象

### window 对象 ###

window 对象表示浏览器中打开的窗口。

**使用 window 对象中的属性和方法，可以省略对象名，直接写方法名和对象名**

*  **属性**：
    
     *  **location** ：当前 URL 的信息
     *  **history** ：客户访问过的 URL 的信息
     *  **screen** ：客户端的屏幕信息
     *  **navigator** ：浏览器基本信息
     *  **document** ：文档对象
 *  **函数**：
    
    **弹框**
    
        // 提示框（显示带有一段消息和一个确认按钮的警告框）
        alert(提示信息);
        // 确认框（显示带有一段消息以及确认按钮和取消按钮的对话框）。点击确定，返回true；点击取消，返回false
        confirm(提示信息);
        // 输入框（显示可提示用户输入的对话框）。点击确定，返回输入的内容；点击取消，返回null
        prompt(提示信息);
    
    **浏览器窗口**
    
        // 打开一个新的浏览器窗口或查找一个已命名的窗口
        open(网址)
        // 关闭浏览器窗口
        close()
    
    **定时器**
    
        // 执行一次的定时器
        setTimeout(函数, 毫秒值); 
        // 反复执行的定时器
        setInterval(函数, 毫秒值); 
        // 参数：
        //    函数：定义一个有名函数，传递函数名字，或者使用匿名函数
        //    毫秒值：设置定时器的时间，在指定的时间结束之后，会执行传递的函数
        //    返回值：返回的是定时器的 id 值，可以用于取消定时器使用
        
        // 取消执行一次的定时器
        clearTimeout(定时器的id值);
        // 取消反复执行的定时器
        clearInterval(定时器的id值);
    
    示例：
    
        var timeId = setTimeout(function () {
              
            alert("c4爆炸了!");
        }, 5000);
        //alert(timeId);	// 2
        
        function butOnclick() {
              
            // 取消执行一次的定时器
            cl
        }

### location 对象 ###

Location 对象包含有关当前 URL（浏览器的地址）的信息。

*  **属性**:
    
     *  **href** ：获取当前浏览器的url地址
        
        **href = “新的url地址”** ： 跳转页面，相当于在浏览器地址栏中输入了地址，并且敲击回车（打开页面）
     *  **hostname** ：主机名
    
     *  **port** ：端口名
     *  **host** ：主机名+端口名
 *  **方法**：
    
     *  **reload()** ：重新加载当前文档。 刷新页面

### web 存储 ###

*  HTML5 为 JS 增加了两个可以存储数据的对象
    
     *  **localStorage** ：本地存储，永久存储数据，作用域：所有页面永久访问
     *  **sessionStorage** ：会话存储，临时存储数据，作用域：一次会话（连续跳转的几个页面）
 *  不管是 localStorage，还是 sessionStorage，可使用的 API 都相同
    
    **常用函数**（以 localStorage 为例）：
    
     *  **setItem(key, value)** ：存储一个数据
     *  **getItem(key)** ：获取一个数据
     *  **removeItem(key)** ：删除一个数据
     *  **clear()** ：清除所有数据

### history 对象 ###

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

**函数**：

*  **back()** ：后退到前一个页面（加载 history 列表中的前一个 URL）
 *  **forward()** ：前进到后一个页面（加载 history 列表中的下一个 URL）
 *  **go(n)** ：直接前进到第 n 个页面

*  **go(-n)** ：直接后退到第 n 个页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>history对象</title>
        <script>
            //创建鼠标点击事件的响应函数
            function goBack() {
          
                window.history.back();
            }
            function goForward() {
          
                window.history.forward();
            }
        </script>
    </head>
    <body>
        <input type="button" value="上一步" onclick="goBack()"/>
        <input type="button" value="下一步" onclick="goForward()"/>
        <a href="04_history对象.html">跳转到04_history对象.html</a>
    </body>
    </html>

### screen 对象 ###

Screen 对象包含有关客户端显示屏幕的信息。

screen 对象中的属性，可以通过 **screen.属性名** 直接使用

**属性**：

*  **height** ：返回显示屏幕的高度（像素）
 *  **width** ：返回显示器屏幕的宽度（像素）

### navigator 对象 ###

navigator 对象包含有关浏览器的信息。

navigator 对象中的属性，可以通过 **navigator.属性名** 直接使用

**属性**：

*  **appName** ：返回浏览器的名称
 *  **appVersion** ：返回浏览器的平台和版本信息
 *  **userAgent** ：浏览器类型

### 超链接与表单的跳转控制 ###

*  超链接和表单都可以进行跳转。跳转属于它们的默认功能。
 *  一般在它们触发的一个事件中，可以通过返回 false，来阻止他们的跳转！
    
        <br />function fun5(){
            alert('超链接被点击了！');
            return false;
        }
        
        function f() {
            alert("阻止表单提交");
            return false;
        }
        
        <a href="https：//www.baidu.com" onclick="return fun5()">超链接</a>
        //阻止提交
        <a href="javascript：void(0)">我是超链接</a>
        
        <form action="http://www.baidu.com" onsubmit="return f()">
            <input type="submit">
        </form>

## DOM 对象 ##

DOM 是 document object model，也就是文档对象模型。

可以将 HTML 页面看做一个文档，在 js 眼中就是一个 document 对象。

这个 document 对象中就包含了页面中的所有元素。

DOM 中的节点分类：

*  元素节点（element node）
 *  属性节点（attribute node）
 *  文本节点（text node）

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传][20230724024159.png_origin_url_JavaScript_20_E5_85_A5_E9_97_A8_E6_8C_87_E5_8D_97.assets_2F1595991003925.png_pos_id_img-YIdx1tFV-1711935132719]

### dom 获取元素 ###

*  **方式1：es6 提供了强大的根据 CSS 选择器获取元素的接口**（推荐）
    
        // 根据css选择器获取一个元素
        document.querySelector(CSS选择器)
        // 根据css选择器获取元素对象数组集合
        document.querySelectorAll(CSS选择器)
 *  **方式2：es5 提供的获取元素的接口**
    
        // 根据 id 获取一个元素：
        document.getElementById(ID)  	// 等价于es6的 querySelector(#ID)
        // 根据 class 获取多个元素：
        document.getElementsByClassName(class)	   // 等价于es6的 querySelectorAll(.class)
        // 根据标签名称获取多个元素：
        document.getElementsByTagName(标签名称)		// 等价于es6的 querySelectorAll(标签)
        // 根据 name 属性获取多个元素：
        document.getElementsByName('name值') 	  // 等价于es6的 querySelectorAll(元素名称[name=name值])
 *  小总结：
    
     *  es6 接口获取元素功能非常强大，而且接口非常易用
     *  es5 接口功能非常局限，而且接口使用复杂

**间接根据层次关系获取节点：**

*  父节点：**parentNode**：表示该元素的父节点
 *  孩子节点：
    
     *  **childNodes**：表示该元素的所有子节点的集合，数组对象
     *  **firstElementChild**：第一个儿子节点
     *  **lastElementChild**：最后一个儿子节点
 *  兄弟节点：
    
     *  **nextElementSibling**：该元素后一个兄弟元素节点
     *  **previousElementSibling**：该元素前一个兄弟元素节点

### dom 操作内容 ###

*  常用函数
    
        // 向body中追加html内容
        document.write(html内容) 
        // 获取或者修改元素的纯文本内容（从元素内部起始位置到终止位置的文本内容, 不包含内部的Html标签）
        element对象.innerText; 
        // 获取或者修改元素的html内容（从元素内部的起始位置到终止位置的全部内容, 包括其内部的Html标签）
        element对象.innerHTML; 
        // 获取或者修改包含自身的html内容
        element对象.outerHTML;
 *  示例
    
        <!DOCTYPE html>
        <html lang="zh">
        <head>
            <meta charset="UTF-8">
            <title>dom操作内容</title>
        </head>
        <body>
        <div id="d1">我是d1<br/></div>
        <div id="d2">我是d2</div>
        <div id="d3">我是d3</div>
        <script>
            // 向body中追加html内容
            document.write("<h1>我是h1标题标签</h1>");
        
            // 获取元素的纯文本,html内容对比
            var d1Ele = document.querySelector("#d1");	// 获取id是d1的元素 <div id="d1">我是d1<br/></div>
            console.log(d1Ele.innerText);	//我是d1  ==>标签中的文本
            console.log(d1Ele.innerHTML);	//我是d1<br>  ==>标签体
            console.log(d1Ele.outerHTML);	//<div id="d1">我是d1<br></div>  ==>整个标签
        
            // 修改元素的纯文本,html内容对比
            var d2Ele = document.querySelector("#d2");		 //获取id是d2的元素 <div id="d2">我是d2</div>
            //d2Ele.innerText = "<h2>我是h2标签体标签</h2>";	//显示纯文本
            d2Ele.innerHTML = "<h2>我是h2标签体标签</h2>";		//显示标签
        
            // 获取或修改包含元素自身的html内容(了解)
            var d3Ele = document.querySelector("#d3");		//获取id是d3的元素 <div id="d3">我是d3</div>
            console.log(d3Ele.outerHTML);					//<div id="d3">我是d3</div>
            d3Ele.outerHTML = "<h3>我是h3标签体标签</h3>";		//把d3的div整个替换为了h3标签
        </script>
        </body>
        </html>

### dom 操作属性 ###

*  方法1：
    
        // 获取元素的一个属性的值。注意：只能获取标签上属性的值，获取不用用户输入的内容
        element对象.getAttribute(属性名)
        // 给元素设置一个属性，可以设置原生和自定义
        element对象.setAttribute(属性名, 属性值)
        // 移除元素的一个属性
        element对象.removeAttribute(属性名)
 *  方法2：
    
        // 获取或修改一个属性的值
        element对象.属性名
 *  注：
    
     *  方法1 可以对自定义属性进行操作；但是 方法2 只能对标准属性进行操作。
     *  **文本输入框标签：通过对象名.value 属性，可以获取到页面中用户输入的内容。**
     *  复选框|单选框标签：
        
         *  通过 对象名.checked 属性可以获取到选中状态。选中：true；未选中：false
         *  通过 对象名.getAttribute() 函数获取属性值：有 checked 属性，值就是 checked；没有 checked 属性，值就是 null

### dom 操作元素 ###

*  常用方法
    
        // 获取或者设置标签的html内容
        element对象.innerHTML
        // 移除元素
        element对象.outerHTML=""
        
        // 创造一个节点，返回一个element对象
        document.createElement("标签名称)
        // 给父标签添加一个子标签
        parentElement对象.appendChild(newNode) 
        // 在指定节点前插入新节点
        parentElement对象.insertBefore(newNode,beforeNode)
        // 替换节点的方法 
        parentElement对象.replaceChild(newNode, oldNode)
        // 删除节点的方法
        parentElement对象.removeChild(childNode)
 *  示例：
    
        <!DOCTYPE html>
        <html lang="zh">
        <head>
            <meta charset="UTF-8">
            <title>dom操作元素</title>
        </head>
        <body>
        <div id="container">
            <input id="smoke" type="checkbox" name="hobby" value="抽烟">
            <label for="smoke">抽烟 </label>
        
        
        
        
        </div>
        <script >
            //获取div标签对象
            var divEle = document.querySelector("#container");
        
            // 添加喝酒 innerHTML
            console.log(divEle.innerHTML);
            divEle.innerHTML += "<input id='drink' type='checkbox' name='hobby' value='喝酒'>"
                + "<label for='drink'>喝酒 </label>";
            
            // 添加烫头
            // 创建input标签,使用document对象中方法createElement("标签名称")
            var inputEle = document.createElement("input");
            console.log(inputEle);			//<input>
            // <input id="perm" type="checkbox" name="hobby" value="烫头">
            inputEle.setAttribute("id","perm");
            console.log(inputEle);			//<input id="perm">
            inputEle.setAttribute("type","checkbox");
            inputEle.setAttribute("name","hobby");
            inputEle.setAttribute("value","烫头");
            console.log(inputEle);			//<input type="checkbox" id="perm" name="hobby" value="烫头">
        
            // <label for="perm">烫头 </label>
            // 创建标签
            var lableEle = document.createElement("lable");
            // 添加属性
            lableEle.setAttribute("for","perm");
            console.log(lableEle);			//<lable for="perm">
            // 添加标签体
            lableEle.innerHTML="烫头 ";
            console.log(lableEle);			//<label for="perm">烫头 </label>
        
            // 使用父标签div中的方法appendChild(子标签);添加子标签
            divEle.appendChild(inputEle);
            divEle.appendChild(lableEle);
        
            // 移除元素(了解) outerHTML
            //lableEle.outerHTML = "";			//删除label标签
        </script>
        </body>
        </html>

### dom 操作样式 ###

*  **通过 style 对象**
    
        // 获取或者修改一个样式
        element对象.style.css样式
        // 设置多个css样式
        element对象.style.cssText = "样式键值对;样式键值对..."
    
    **注意：**
    
     *  **style 对象，只能获取行内样式（写在一行中），不能获取内嵌的样式（写在 head 的 style 中）和外链的样式（写在css文件中）**
     *  style 是对象。typeof 的结果是 Object
     *  值是字符串，没有设置值是空字符串""
     *  命名规则：驼峰命名
     *  DOM 中的 style 对象并不等同 html 标签中 style 属性，在 JS 中，横杠 - 是不能作为标识符的
        
        比如：背景色样式在 DOM 中是 backgroundColor，而在 CSS 中是 background-color
    
    **style 对象的常用属性**：backgroundColor（背景色）、backgroundImage（背景图片）、color（颜色）、width（宽像素）、height（高像素）、border（边框）、opacity（设置透明度，IE8 以前是 filter: alpha(opacity=xx)）
 *  **通过 className 属性**
    
    节点的 className 属性对应于 css 中的类选择器
    
        // 获取或者修改class属性值（样式）
        element对象.className 
        // 获取class属性值集合，返回一个classList对象（es6特别提供的操作元素class的接口）
        element对象.classList
    
    **element.classList 的常用方法：**
    
        add("class样式名称")  		// 添加一个class样式
        remove("class样式名称") 	// 移除一个class样式
        contains("class样式名称") 	// 判断是否包含某一个样式,包含返回true，不包含返回false
        toggle("class样式名称") 	// 切换一个class样式。有则删除，无则添加
 *  **添加事件**：通过对象名.事件属性名 给元素添加事件
 *  示例：
    
        <!DOCTYPE html>
        <html lang="zh">
        <head>
            <meta charset="UTF-8">
            <title>dom操作样式</title>
        </head>
        <body>
        <style>
            #p1{
                background-color: red}
            .mp{
                color:green}
            .mpp{
                background-color: lightgray;}
        </style>
        <p id="p1">1. 设置一个css样式</p>
        <p id="p2">2. 批量设置css样式</p>
        <p id="p3" class="mpp">3. 通过class设置样式</p>
        <p id="p4">4. 切换class样式</p>
        <input type="button" value="切换样式" id="b1" />
        
        <script >
            let p1 = document.querySelector("#p1");		//获取段落标签
            let p2 = document.querySelector("#p2");		//获取段落标签
            let p3 = document.querySelector("#p3");		//获取段落标签
            let p4 = document.querySelector("#p4");		//获取段落标签
        
            // 内嵌式的样式，通过style对象获取不了
            console.log("p1 backgroundColor: " + p1.style.backgroundColor);	//""
            // 给p1设置css样式
            // 白色字体
            p1.style.color = "white";
            // 黑色背景
            p1.style.backgroundColor = "black";
            // 获取p1的样式名
            console.log(p1.style.backgroundColor);	//black
            console.log(p1.style.color);			//white
            // 隐藏不显示
            //p1.style.display = "none";
            // 显示
            //p1.style.display = "block";
        
            // 给p2批量设置css样式
            p2.style.cssText = "color: red;font-family: '楷体';border: 1px solid green";
        
            // 给p3通过class设置样式
            // a.给元素添加class属性的方式添加样式
            //p3.setAttribute("class","mp mpp");
            // b.使用className属性添加(两种方式)
            //p3.className= "mp mpp";
            p3.className = p3.className + " mp";	// mpp + " mp"==>mpp mp
            console.log("p3 className: " + p3.className);//mp mpp
        
            // 切换class样式
            // 获取p4的class样式集合
            var p4List = p4.classList;
            // 添加一个class样式
            p4List.add("mpp");
            // 判断某一个样式是否存在
            console.log(p4List.contains("mpp"));	//true
            console.log(p4List.contains("mp"));		//false
            // 添加一个class样式
            p4List.add("mp");
            console.log(p4List);
            // 移除一个class样式
            p4List.remove("mp");
        
            // 获取id是b1的按钮
            var b1Ele = document.querySelector("#b1");
            // 通过对象名.事件属性名,给元素添加事件
            b1Ele.onclick = function () {
                
                //切换,无则添加,有则删除
                p4List.toggle("mp");
            }
        </script>
        </body>
        </html>

[20230724024159.png_origin_url_JavaScript_20_E5_85_A5_E9_97_A8_E6_8C_87_E5_8D_97.assets_2F1595991003925.png_pos_id_img-YIdx1tFV-1711935132719]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/da529a4739b2475e880dda84c0e6d395.png