JavaScript - DOM and BOM

最新推荐文章于 2019-09-03 10:58:26 发布

LSYHhhhh

最新推荐文章于 2019-09-03 10:58:26 发布

阅读量112

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_33961117/article/details/83277879

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一、DOM

1、JS中标签关系

<div class="sup">
    <div class="sub1"></div>
    <div class="sub2"></div>
    <div class="sub3"></div>
</div>

<script>
    var sub2 = document.querySelector('.sub2');
    // 父级标签
    console.log(sub2.parentElement);
    // 上一个标签
    console.log(sub2.previousElementSibling);
    // 下一个标签
    console.log(sub2.nextElementSibling);

    var sup = document.querySelector('.sup');
    // 所有子标签
    console.log(sup.children);
    // 第一个子标签
    console.log(sup.firstElementChild);
    // 最后一个子标签
    console.log(sup.lastElementChild);
</script>

2、JS操作页面标签

// 创建一个div标签
var div = document.createElement("div");
// 添加到body末尾，返回自身
div = body.appendChild(div);
// 插入到body中box标签前，返回自身
div = body.insertBefore(div, box);
// 替换掉body中box标签，返回box
box = body.replaceChild(div, box);
// 在body中移除div，返回自身
div = body.removeChild(div);

3、JS操作DOM一般步骤

1、创建标签
2、设置标签样式文本
3、添加到页面指定位置

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>DOM操作</title>
	<style type="text/css">
		.box {
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.p {
			width: 100px;
			height: 100px;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="box">box box box bi box</div>
	<button class="b1">添加到box中</button>
	<button class="b2">添加到body中</button>
	<button class="b3">插到body下box之前</button>
	<button class="b4">将body下box替换为p</button>
	<button class="b5">删除box</button>
</body>
<script type="text/javascript">
	var body = document.querySelector('body');
	var box = document.querySelector('.box');
	var b1 = document.querySelector('.b1');
	var b2 = document.querySelector('.b2');
	var b3 = document.querySelector('.b3');
	var b4 = document.querySelector('.b4');
	var b5 = document.querySelector('.b5');

	// 创建标签p
	var p = document.createElement('p');
	console.log(p);

	// 设置标签样式
	p.className = 'p';

	// 添加到指定区域
	b1.onclick = function () {
		var res = box.appendChild(p);
		console.log(res); // 自身
	}
	b2.onclick = function () {
		body.appendChild(p);
	}

	// 总结:
	// 1.创建标签只能由document来调用执行
	// 2.一次创建只产生一个标签对象,该标签对象只能存在最后一次操作的位置


	// 插入到指定区域
	b3.onclick = function () {
		// 将p插到box之前(前者插入到后者之前)
		var res = body.insertBefore(p, box);
		console.log(res);  // 自身
		// box和p都是body的一级子标签后,顺序有需求决定
		// body.insertBefore(box, p);
	}

	b4.onclick = function () {
		// 将p替换掉box(前者替换后者)
		var res = body.replaceChild(p, box);
		console.log(res); // box
	}

	b5.onclick = function () {
		// 由父级删除指定子级
		// var res = body.removeChild(box);
		// 获取父级来删除自身
		var res = box.parentElement.removeChild(box);
		
		console.log(res); // box
		setTimeout(function () {
			// 删除后,标签对象依然可以被js保存,继而可以重新添加到页面
			body.appendChild(res);
		}, 1000)
	}

</script>
</html>

二、BOM

1、窗口操作 open

// 新tag打开目标地址
open("http://www.yahoo.com");
// 自身tag转跳目标地址
open("http://www.yahoo.com", '_self');
// 自定义窗口打开目标地址
open("http://www.yahoo.com", '_blank', 'width=300, height=300');

2、历史记录 history

// 历史后退
history.back();
// 历史前进
history.forward()

3、导航器 navigator

// 拥有浏览器信息的字符串
navigator.userAgent;

4、地址信息 location

// 协议
location.protocol
// 服务器
location.hostname
// 端口号
location.port
// 参数拼接
location.search

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>BOM</title>
</head>
<body>
	<button class="b1">open</button>
	<button class="b2">前进</button>
	<button class="b3">浏览器信息</button>
</body>
<!-- open -->
<script type="text/javascript">
	var b1 = document.querySelector('.b1');
	b1.onclick = function () {
		// 新tag打开目标地址
		// window.open("http://www.yahoo.com");
		// 自身tag转跳目标地址
		// open("http://www.yahoo.com", '_self');
		// 自定义窗口打开目标地址
		open("http://www.yahoo.com", '_blank', 'width=300, height=300');
	}
</script>
<script type="text/javascript">
	var b2 = document.querySelector('.b2');
	b2.onclick = function () {
		// 历史后退
		// history.back();
		// 历史前进
		history.forward();
		// history.go(num)
	}
</script>
<script type="text/javascript">
	var b3 = document.querySelector('.b3');
	b3.onclick = function () {
		console.log(navigator.userAgent);
		if (navigator.userAgent.match("Chrome")) {
			alert("谷歌浏览器")
		}
	}
</script>
<script type="text/javascript">
	// 协议
	console.log(location.protocol);
	// 服务器
	console.log(location.hostname);
	// 端口号
	console.log(location.port);
	// 参数拼接
	console.log(location.search);
</script>
</html>

LSYHhhhh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript - DOM and BOM

目录一、DOM1、JS中标签关系2、JS操作页面标签3、JS操作DOM一般步骤二、BOM1、窗口操作 open2、历史记录 history3、导航器 navigator4、地址信息 location一、DOM1、JS中标签关系&lt;div class="sup"&gt; &lt;div class="sub1"&gt;&lt;/div&...
复制链接

扫一扫

专栏目录