JavaScript之BOM和DOM编程——常用函数、属性、方法

_xwh

于 2021-11-06 15:51:22 发布

阅读量1.1k

点赞数

分类专栏：前端知识文章标签： javascript 前端开发语言

本文链接： https://blog.csdn.net/qq_44174803/article/details/121180330

版权

前端知识专栏收录该内容

13 篇文章 1 订阅

订阅专栏

这里写目录标题

BOM

BOM是一种浏览器对象模型，其中的一些对象操作都是居给浏览器的一些常组件和功能进行的。此处主要对BOM的4个对象及其他们的一些常用操作函数进行简单介绍：

window对象
location对象
screen对象
history对象

一、window对象常用函数

alert、confirm、prompt、setTimeout、setInterval、clearInterval函数介绍和用法如下：

（1）alert函数

定义:
alert()函数用于进行window窗口的弹出，提示内容写在alert()函数括号内。

示例:

//使用弹出框警告可以有以下的两种表达方式
alert("弹出框");
window.alert("window的弹出框");

（2）confirm函数

定义:
confirm函数存在返回值true和false，括号内输入提示信息，根据点击的操作来进行返回值，确认代表true，取消代表false。

示例:

var a = window.confirm("你确定要离开吗");
console.log(a);

（3）prompt函数

定义:
prompt函数的第一个参数是输入框上的问题，第二参数是输入框中的默认值（可以不写第二个参数）

示例:

var name = window.prompt("你哈皮 请问鸟什么名字？", "可爱鬼dlj");
console.log(name);

（4）setTimeout函数

定义:
setTimeout的函数第一个参数代表等待执行的函数，第二参数是等待的时间，该函数只执行一次，主要起的效果就是延迟执行。

示例:

window.setTimeout(      //即使此处的时间设置为0，它的执行顺序也是排在下面代码后的（因为只要调用了setTimeout函数就会延迟它的执行顺序）
	function () {
			console.log("aabb");
	}, 0
);
console.log("ccdd");
console.log("eeff");

（5）setInterval、clearInterval函数

定义:
setInterval起到了周期性定时器的效果，是一个重复执行的函数，第一个参数是重复执行的循环体部分，第二个参数是执行任务的间隔时间。
此外存在一个对应的定时器清除函数clearInterval，用于停止周期性定时器，因此在清除定时器的时候需要我们知道如何被清除的定时器名称。

示例:

var num = 0;      //一个计数器定义
	var timer_name = null;      //首先定义一个变量保存定时器名称
	timer_name = window.setInterval(
		function () {
			num++;
			if (num > 5) {
				clearInterval(timer_name);
				return;     //退出当前函数function，因此也不继续执行下面这一行代码，导致num为6的时候并未在控制台打印输出
			}
			console.log("num:" + num);
		}, 1000
	);

周期性输出1-5后，该定时器便被清除了，因此停止输出。

二、location对象常用属性

（1）location.host

可获取到当前的主机名称和端口号（倘若没有端口号将只显示主机名称）

（2）location.hostname

location.hostname获取当前主机的主机名

（3）location.href

获取当前地址的完整URL，我们可以利用该属性获取当前URL，也可以通过将该属性设置一个我们需要进行跳转的URL地址。例如：通过location.href=“新的URL地址”，则代码执行到此处的时候会进入新的地址。

（4）location.pathname

获取当前地址URL中的某个文件名或者目录

（5）location.port

只获取当前地址的端口号

（6）location.protocol

获取当前网络地址的协议，例如是http还是https协议或者其他类型的协议

控制台输出示例：

（7）location.search

这将返回URL地址中搜索的部分，即问号之后的内容。将URL中需要搜索的部分单独切出来，方便我们进行数据查找。

例如：
下面是一个完整的URL链接和被切分出来的搜索部分
https://so.csdn.net/so/search?q=web&t=&u=&urw=

拓展：
在获取到location.search部分的内容时，我们经常对其数据进行切分和封装保存，方便对数据进行后续的操作。
例如:
我们需要将下面的location.search字符串封装成数组格式：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如何访问每个查询字参数</title>
</head>

<body>
    <form>
        <input type="text" name="user">
        <input type="password" name="pwd">
        <input type="submit">
    </form>


    <script type="text/javascript">
        console.log(location.search);
        function getQueryString() {
            //1.去掉location.search中的问号 获取后续的字符串
            var qs = location.search.length > 0 ? location.search.substring(1) : "";    //减去问号前需要判断字串长度是否为0
            //2.进行字符串切分  分别存入数组中
            var items = qs.length > 0 ? qs.split("&") : [];     //字串分割需要判空  []代表是置为空数组

            console.log("items:" + items);
            var key = null, value = null, args = {};
            var item = null;      //用于保存items中的元素
            for (var i = 0; i < items.length; i++) {    //遍历items数组 将每一项都按照key-value键值对的方式存入到对应数组中去
                item = items[i].split("=");
                // console.log("item:" + item);
                key = decodeURIComponent(item[0]);      //名字   使用decodeURIComponent函数能够兼容一些编码问题
                value = decodeURIComponent(item[1]);    //值
                if (key.length) { //key不能为空
                    args[key] = value;      //以键名为下标将值存入数组中去
                }
            }
            return args;
        }

        var args = getQueryString();
        console.log(args);
        console.log(args.user);
        console.log(args.pwd);
    </script>
</body>

</html>

结果显示

（8）location.reload()函数

可用于当前网页的刷新。使用方法：location.reload() ;

（9）location.replace()函数

用于URL地址的替换，相当于用一个新的网页地址替换了当前网页所在地址，并且不具备history的记忆。使用方法：location.replace(“新的URL”);

三、navigator对象

Navigator对象包含有关浏览器的信息，下面主要进行对如何判断浏览器中是否存在某个具体的插件plugin进行展示。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigator对象</title>
</head>

<body>
    <script>
        // Navigator 对象包含有关浏览器的信息。
        console.log(navigator.plugins);

        function hasPlugin(name) {
            name = name.toLowerCase();             //防止大小写出现不一致的情况 统一大写转成小写
            // console.log(name);
            for (var i = 0; i < navigator.plugins.length; i++) {
                if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
                    // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。   返回值大于-1代表name在其中出现过
                    return true;
                } else return false;
            }
        }

        var plugin_name = "Flash";
        window.alert(hasPlugin(plugin_name));           //窗口显示结果
        console.log(hasPlugin(plugin_name));

        plugin_name = "WebKit内建PDF";
        window.alert(hasPlugin(plugin_name));           //窗口显示结果
        console.log(hasPlugin(plugin_name));
    </script>

</body>

</html>

结果显示：

有结果可以判断，Flash插件并不存在当前浏览器中；而WebKit内建PDF是当前浏览器的插件。

四、history对象

（1）概述

window.history属性指向 History 对象，它表示当前窗口的浏览历史。History 对象保存了当前窗口访问过的所有页面网址。

（2）属性

History 对象主要有两个属性。
History.length：当前窗口访问过的网址数量（包括当前网页）
History.state：History 堆栈最上层的状态值

（3）方法

History.back()：移动到上一个网址，等同于点击浏览器的后退键。对于第一个访问的网址，该方法无效果。

History.forward()：移动到下一个网址，等同于点击浏览器的前进键。对于最后一个访问的网址，该方法无效果。

History.go()：接受一个整数作为参数，以当前网址为基准，移动到参数指定的网址，比如go(1)相当于forward()，go(-1)相当于back()。如果参数超过实际存在的网址范围，该方法无效果；如果不指定参数，默认参数为0，相当于刷新当前页面。

history.back();
history.forward();
history.go(-2);
history.go(0)相当于刷新当前页面。

注意，移动到以前访问过的页面时，页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新属性

部分参考链接：
http://javascript.ruanyifeng.com/bom/history.html

DOM

DOM是一种文档对象模型（document object model）

一、节点的分类

文档就是一个一个的节点所组成的集合（节点树），在DOM中节点一般可以分为如下三类：

（1）元素节点（element node）

元素节点其实就是html中的常见标签元素，被看作为DOM中的一个节点，例如p标签、div标签、li标签等等，都是元素节点。元素节点的布局实际上决定了整个document的结构。

（2）文本节点（text node）

文本节点是DOM中用于呈现文本的部分，一般被包含在元素节点的开闭合标签内部。一个文档中没有文本节点代表没有实际内容。

（3）属性节点

一般是元素节点内部的属性，每一个 XML 属性算是一个属性节点。

（4）文档节点

整个文档是一个文档节点，是整个dom树的根节点；而文档节点（document）只有一个字节点为html节点。

实例说明：

<p class="temp">这是一个测试</p>

上述中p为元素节点，class为属性节点，“这是一个测试”是文本节点

二、获取元素节点的方式

（1）通过ID属性获取到元素节点

通过下面代码，对应的元素节点保存在变量eleNode中。

var eleNode = document.getElementById(元素节点的ID);

（2）通过class属性获取到元素节点

通过下面代码，所有class名称被查找的元素节点都保存在items中。

var items = document.getElementsByClassName(类名);

（3）通过标签名获取到元素节点

通过下面代码，对应的元素节点保存在变量olis中。但是olis是元素节点的一个集合，包括了所有为待查找的元素节点。即使集合中只有一个元素，olis的类型仍然不是元素节点，而是一个集合，取用其中的元素节点可以使用下标进行取用，例如olis[0]对应集合中的第一个对象，olis.length代表集合的长度即元素个数。

var olis = document.getElementsByTagName(标签名);

案例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>web前端开发</title>
</head>

<body>
	<a href="http://www.w3c.org">w3c组织</a><br />
	<a href="http://www.w3school.com.cn">w3school学习网站</a><br />
	<a href="vs.html">前端与后端</a>
	<h1>WEB前端开发知识</h1>
	<h5>web front-end development</h5>
	<hr />
	<h2>基本概念</h2>
	<p title="article">Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Esse, enim, harum ipsum suscipit rem
		minima sint
		blanditiis id officia! Qui alias impedit consequuntur? Saepe soluta obcaecati, exercitationem, pariatur
		voluptatibus quae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum vel odio beatae natus
		voluptates veniam ipsa qui officiis. Fugiat optio omnis voluptas non natus in cum unde aut, recusandae deleniti.
	</p>
	<h2>技术构成</h2>
	<p id="test">HTML</p>
	<p class="cc">CSS</p>
	<p class="cc">JS</p>
	<hr />
	<h6>copyright</h6>

	<script>
		var eleNode = document.getElementById("test");			//通过ID属性获取到元素节点
		console.log(eleNode);
		console.log(typeof (eleNode));			//打印出是object类型

		var olis = document.getElementsByTagName("a");
		console.log(olis);
		console.log(typeof (olis));

		var items = document.getElementsByClassName("cc");
		console.log(items);
		console.log(typeof (items));
	</script>
</body>

</html>

补充：
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。querySelector() 方法支持比较广泛，但是只能返回一个元素对象，支持ID选择器、class选择器，也能支持一些预定义标签和一些标签的属性；querySelectorAll()则会筛选出一个元素对象集合。这两种使用起来比较灵活方便

例子：

//获取文档中 id="demo" 的元素：
document.querySelector("#demo");

重点详细参考链接：
https://www.runoob.com/jsref/met-document-queryselector.html

三、getAttribute和setAttribute的用法

getAttribute函数用于获取节点对象的属性值，用法如下：

属性值=节点对象.getAttribute("属性名");

setAttribute函数用于设置节点对象的属性值，用法如下：

节点对象.setAttribute("属性名","属性值");

举例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>web前端开发</title>
	<style>
		#box {
			color: red;
		}
	</style>
</head>

<body>
	<a href="http://www.w3c.org">w3c组织</a><br />
	<a href="http://www.w3school.com.cn">w3school学习网站</a><br />
	<a href="vs.html">前端与后端</a>
	<h1>WEB前端开发知识</h1>
	<h5>web front-end development</h5>
	<hr />
	<h2>基本概念</h2>
	<p title="article">Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Esse, enim, harum ipsum suscipit rem
		minima sint
		blanditiis id officia! Qui alias impedit consequuntur? Saepe soluta obcaecati, exercitationem, pariatur
		voluptatibus quae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum vel odio beatae natus
		voluptates veniam ipsa qui officiis. Fugiat optio omnis voluptas non natus in cum unde aut, recusandae deleniti.
	</p>
	<h2>技术构成</h2>
	<p id="test">HTML</p>
	<p class="cc">CSS</p>
	<p class="cc">JS</p>
	<hr />
	<h6 title="版权声明">copyright</h6>


	<script>
		//在使用getAttribute函数之前  首先得需要一个确定的元素节点对象
		var item = document.getElementsByTagName("p")[0];		//代表取得是集合中的第一个元素
		//获取节点对象属性值前需要知道节点的参数名称
		var title = item.getAttribute("title");
		var classname = item.getAttribute("class");
		console.log(title);
		console.log(classname);		//如果未设置class名称  则会返回NULL

		//使用setAttribute函数进行属性设置
		item.setAttribute("id", "box");		//通过dom操作可以手动给标签元素加上id属性

	</script>
</body>

</html>

四、节点对象的3个属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：

nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型

注意:此处的属性不是指属性节点，而是document中所有的节点都会存在相应的三个属性，属性节点也存在自己的三个属性（属性名、属性值、属性类型）

1.nodeName 属性: 节点的名称，是只读的。

元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释节点的 nodeName 永远是 #comment

2.nodeValue 属性：节点的值

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

3.nodeType 属性: 节点的类型，是只读的。
以下常用的几种结点类型:

元素类型 节点类型
元素 			1
属性 			2
文本 			3
注释 			8
文档			    9

案例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>dom对象</title>
</head>

<body>
	<div id="txt" title="文本">我是一个文本节点
		<!-- 这是个注释节点 -->
	</div>

	<script>
		//1.	元素节点的三种属性
		var oTxt = document.getElementById("txt");
		console.log(oTxt.nodeName + "|" + oTxt.nodeValue + "|" + oTxt.nodeType);

		//打印该元素节点的所有属性节点
		console.log(oTxt.attributes);

		//2.	属性节点的三种属性
		var txtClass = oTxt.attributes[1];
		console.log(txtClass.nodeName + "|" + txtClass.nodeValue + "|" + txtClass.nodeType);

		//打印该元素节点的所有子节点			上述div标签中的子节点有文本节点和注释节点、一个回车  但是不包括属性节点
		console.log(oTxt.childNodes);

		//3.	文本节点的三种属性
		var textnode = oTxt.childNodes[0];
		console.log(textnode.nodeName + "|" + textnode.nodeValue + "|" + textnode.nodeType);

		//4.	注释节点的三种属性
		var commentnode = oTxt.childNodes[1];
		console.log(commentnode.nodeName + "|" + commentnode.nodeValue + "|" + commentnode.nodeType);

		//5.	文档节点的三种属性
		console.log(document.nodeName);
		console.log(document.nodeValue);
		console.log(document.nodeType);
	</script>

</body>
</html>

五、处理元素子节点、兄弟节点中空格问题

（1）处理子节点中空格问题

在不同的浏览器中运行同样的网页存在一些兼容性问题。例如在Chrome、Safari浏览器上进行访问元素节点的子节点时，会存在空格或者回车的干扰，因此导致子节点中多处一些文本节点（“回车会被认为是文本节点#text”），下面将进行实现一个消除空格的封装函数。

<div id="txt" title="文本">我是一个文本节点
		<!-- 这是个注释节点 -->
</div>

<script>
var item = document.getElementById("txt");
console.log(item.childNodes);
</script>

可见下面的第三个节点为空。

封装函数实现例子：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>dom对象</title>

</head>

<body>
	<div id="txt" title="文本">
		<p>wadefgdascfsd</p>
		<p>阿萨德能看出发生的</p>
		稳定繁荣
	</div>
	<script>
		var item = document.getElementById("txt");
		console.log(item.childNodes);

		function get_childNodes(item) {		//利用元素节点为1的特性进行筛选
			var arr = [];
			var nodes = item.childNodes;
			for (var i = 0; i < nodes.length; i++) {
				if (nodes[i].nodeType == 1) {
					arr.push(nodes[i]);
				}
			}
			return arr;
		}
		var new_child = get_childNodes(item);
		console.log(new_child);
	</script>

</body>

</html>

结果中排除了空格或者回车键带来的影响，但是上面的封装函数也就只是提取类型为元素节点的子节点（nodeType类型为1）

（2）处理兄弟节点中空格问题

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>dom对象</title>

</head>

<body>
	<div id="txt" title="文本">
		<p>wadefgdascfsd</p>
		<p>阿萨德能看出发生的</p>
		稳定繁荣
	</div>
	<div>我是一个兄弟节点</div>
	<script>
		var item = document.getElementById("txt");

		function get_nextSlibing(item) {
			var nextNode = item.nextSibling;
			while (nextNode != null && nextNode.nodeType != 1) {			//倘若不是下一个兄弟节点不是元素节点  则一直找下去
				nextNode = nextNode.nextSibling;
			}
			return nextNode;
		}
		var next = get_nextSlibing(item);
		console.log(next);
	</script>

</body>
</html>

六、元素节点的增删改查

通过dom动态对节点进行操作：

1.创建节点：createElement()

2.插入节点：appendChild()
		  insertBefore(新元素，原节点)

3.删除节点：removeChild(元素)

4.替换节点relpaceChild(新元素，原节点)

5.创建文本节点createTextNode()

6.元素对象属性:firstChild 第一个子节点
			 lastChild	最后一个子节点
			 childNodes	子节点集合

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .lovely {
            color: red;
            font-size: 15px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="box">
        <p id="act">
            超级喜欢落日飞车和sweet jhon
        </p>
    </div>

    <script>
        var item = document.getElementById("box");        //获取dom对象- ID名称为box的div区域
        var new_p = document.createElement("p");      //新建立一个p标签（元素节点）
        var newNode1 = document.createElement("h2");
        var newNode2 = document.createElement("a");


        newNode1.innerHTML = '我是一个前插节点，插入在new_p之前';
        newNode2.setAttribute("href", "http://www.baidu.com");
        newNode2.innerHTML = "点击此处进行百度";          //注意  此处的a标签设置完href属性之后 一定需要进行文本的设置  否则在浏览器上无法显示
        new_p.setAttribute("class", "lovely");           //给新节点设置类名  从而与对应样式链接在一起

        //给新的p标签设置文本：     
        //方法一    加上文本类型的子节点
        var textNode = document.createTextNode("我是一个新的p标签");
        new_p.appendChild(textNode);
        //方法二    使用innerHtml直接内嵌   innerHtml内嵌文本的时候单双引号都支持  但是内嵌html代码时只能使用单引号
        //innerHtml能够内嵌html代码和文本  innerText只能内嵌文本
        // new_p.innerHTML = "我是一个新的p标签2";
        // new_p.innerHTML = '<a href="www.baidu.com">百度一下</a>';           //为什么内嵌不了了
        // new_p.innerText = '<a href="www.baidu.com">百度一下</a>';


        item.appendChild(new_p);                //插入新节点new_p到div中
        item.insertBefore(newNode1, new_p);       //插入在new_p节点前
        console.log(item);

        //进行子节点的删除
        // item.removeChild(new_p);

        //进行下属子节点的替换
        // item.replaceChild(newNode2, newNode1);

        //使用完成进行节点对象的释放
        new_p = null;
        newNode = null;
    </script>

</body>

</html>

七、元素节点的CSS样式添加方法

通过dom操作，我们可以给已经存在的元素节点添加上CSS样式，如下存在两种方式：
（1）首先在style中设置好CSS样式，只通过dom操作将元素节点的类名设置为样式名称即可让元素节点渲染上对应的样式。
（2）全部通过dom进行操作，在获取到元素节点对象后，对对象中的style中的属性依次进行设置，达到渲染效果。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom渲染CSS的方式</title>
    <style>
        .fun {
            width: 250px;
            height: 250px;
            color: white;
            line-height: 250px;
            font-size: 15px;
            background-color: blue;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="box">通过dom进行CSS样式渲染</div>

    <script>
        var item = document.getElementById("box");        //获取对象
        console.log(item.style);

        //1.通过对元素节点设置类名，将CSS样式挂上       (批量操作 方便一次添加)
        item.setAttribute("class", "fun");

        //2. 通过对对象的style中属性进行逐个复制修改
        // item.style.width = "250px";
        // item.style.height = "250px";
        // item.style.color = "white";
        // item.style.lineHeight = "250px";
        // item.style.fontSize = "15px";
        // item.style.backgroundColor = "blue";
        // item.style.textAlign = "center";
    </script>
</body>

</html>