Python全栈 Web(JavaScript DOM树、DOM对象、BOM对象)

  1. 云栖社区>
  2. 博客列表>
  3. 正文

Python全栈 Web(JavaScript DOM树、DOM对象、BOM对象)

巴黎香榭 2018-09-13 23:23:00 浏览674 评论0

摘要: 外部对象: BOM和DOM BOM: Browser Object Module 浏览器对象模型 将浏览器比喻成一个对象-window (网页初始化自动创建) 可以通过window对象操作浏览器 DOM: Document Object .


外部对象:
BOM和DOM
BOM:
Browser Object Module
浏览器对象模型
将浏览器比喻成一个对象-window (网页初始化自动创建)
可以通过window对象操作浏览器
DOM:
Document Object Module
文档对象模型
将HTML文档比喻成一个对象-document(是window的一个属性
可以灵活的操作网页上的内容 
window对象(BOM模型)
表示浏览器
window下的属性和方法在使用时 可以省略window.直接去调用
例如:
window.alert() --> alert()
window.prompt()-->pormpt()
...
window中的对话框:
警告框:
window.alert()/alert()
输入框:
window.prompt()/prompt()
确认框:
window.confirm("")/confirm("")
如果点击确定按钮 返回True
其他操作全部返回False
window中的定时器;
1.周期性定时器:
每间隔多长时间 就执行一段程序 反复执行
声明:
var ret = window.setInterval(fun, time)
fun:
函数 要周期执行的操作 可以是匿名函数
time:
要间隔的时间周期 以毫秒为单位
ret:
返回值 返回已经创建好的周期定时器对象
清除定时器:
window.clearInterval(obj)
obj:
要停止的周期定时器对象
2.一次性定时器;
在指定时间间隔后  只执行一次操作
声明:
var ret = setTimeout(fun, time);
fun:
函数 要执行的操作 可以是匿名函数
time:
要等待的时间 以毫秒为单位
ret:
返回值 已经创建好的一次性定时器对象
清除定时器:
clearTimeout(obj);
obj:要停止的一次性定时器对象
window中的属性:
1.screen属性:
获取客户端显示器的相关信息
screen的属性:
width、height
获取屏幕分辨率
availwidth、avalheight
获取可用分辨率
2.history属性:
处理当前窗口所访问的url地址
history的属性方法
属性:
length  表示当前窗口所访问过的url数量
方法:
back()   后退
forward  前进
go(num)
在当前页面的基础上进行前几后后退num步
正数前进
负数后退
3.location属性;
表示浏览器上的地址栏信息
location的属性方法
属性:
href:
表示当前窗口中正在浏览的网页地址
如果为href属性赋值的话,相当于实现的浏览的跳转功能
  方法:
  reload()
  重新加载当前网页 等同于刷新
  4.navigator属性:
  封装了浏览器的相关信息
  navigator的属性
  userAgent:
  显示浏览器相关信息
  5.document属性

document 属性/对象(DOM模型):
document 的概述:
document对象 是DOM模型中的顶层对象 封装了所有的和HTML元素相关的
属性 方法以及事件  由于 document是属于window对象的核心属性之一
所以不用声明就可以直接使用

DOM树:
网页加载的时候,会在内存中形成一颗节点树(DOM树)
DOM树会封装网页上的所有内容 包括每一个元素、属性、文本
都是DOM树上的一个独立节点


DOM所提供的操作:
查找节点的操作方法
读取节点的信息
修改节点的信息
删除节点
创建节点
注意;
只要DOM树上的节点发生变化 网页就会跟着变化(实时更新
DOM树上的节点类型:
元素节点:
表示在网页中的一个元素
属性节点:
表示的是元素中的一个属性
文本节点:
表示的是元素中的文本内容
注释节点;
表示网页上的一个注释
文档节点;
表示正HTML文档
查找元素节点:
通过元素的id查找元素节点
前提:元素一定要具备id属性,否则无法查找
方法:
var elem = document.getElementById("元素id");
elem:
返回对应的id的元素在JS中的表现形式-DOM元素/DOM对象
DOM对象的属性:
innerHTML
修改或获取当前DOM对象的HTML文本
innerText
修改或获取当前的DOM对象的普通文
*以上两个属性只对双标记有效
value:
该属性只针对表单控件 允许获取和设置表示控件的值
读取节点的信息:
节点类型;
属性:nodeType
返回值;
1:元素节点
2:属性节点
3:文本节点
8:注释节点
9:文档节点
节点的名称:
属性:nodeName
返回值:
元素节点或属性节点:返回标签名或属性名
文本节点:#text
文档节点:#document
注释节点:#comment
获取or设置元素节点的属性:
所有元素节点都会具备以下方法,用于操作属性:
方法:
获取指定属性的值
getAttribute("attrName");
atttrName:
要获取的属性名称
返回值:
attrName属性对应的值
修改/设置指定属性的值
setAttribute("attrName", "arrtValue");
attrName:
要设置的属性名称
attrValue:
要设置的属性值
删除属性:
removeAttribute("attrNmae")
将attrName从节点中删除
元素节点的样式:
使用setAttribute()设置class属性值
相当于动态的为元素绑定类选择器
elem.setAttribute("class", "类选择器")
使用元素的className属性修改class的值
elem.calssName = "类选择器";
变相的使用内联方式设置样式属性:
elem.style.css属性名 = "值";
注意:
如果属性名包含“-”的话 ,需要省略“-”并且后面一个首字母大写
font-size:
elem.style.fintSize = "18px";

查询节点的方式:
根据id查询
document.getElementById();
根据节点的层级关系查询节点:
parentNode属性:
返回当前节点的父节点元素
childNodes属性:
返回当前节点的所有子元素的数组(返回所有节点)
children属性:
返回当前节点的所有子元素数组(只反回元素节点)
nextSibling属性:
返回当前节点的下一个兄弟节点
nextElementSibling属性:
返回当前节点的下一个元素兄弟节点
previousSibling
返回当前的上一个兄弟节点
previousElementSibling:
返回当前节点的上一个兄弟元素节点

注意:
元素节点 和 节点要区分



1.网页中创建一个 按钮,显示 "关闭"
2.点击按钮时,弹出确认框 "确认关闭网页吗"
3.如果点击 确定的话,则关闭网页
关闭网页:window.close();
4.否则什么都不操作即可

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript">
		var timer;
		function k(){
			confirm("确定?");
		}
		function cls(){
			var bool = confirm("确认关闭吗?");
			if (bool){
				window.close();
			}
		}
		function showTime(){
			timer = setInterval(function(){
				var now = new Date();
				console.log(now.toLocaleString());
			}, 1000);
		}
		function stopTime(){
			clearInterval(timer);

		}
		function gotobaidu(){
			window.location.href = "http://www.tmooc.cn/"
		}
	</script>
</head>
<body>
	<button onclick="k()">确认按钮</button>
	<button onclick="cls()">关闭网页</button>
	<button onclick="showTime()">周期定时器</button>
	<button onclick="stopTime()">清除定时器</button>
	<button onclick="gotobaidu()">href</button>
</body>
</html>

1.创建一个按钮
2.点击按钮时,弹出一个确认框
确认一下是否要关闭网页??
3.如果用户点击确定的话,5s钟之后再关闭网页

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript">
		function time_clear(){
			var bool = confirm("是否关闭网页");
			alert("3秒后自动关闭")
			if (bool){
				setTimeout(function(){
					window.close();
				}, 3000);
			}
		}
	</script>
</head>
<body>
	<button onclick="time_clear()">一次性时钟</button>
</body>
</html>

1.创建一个网页
2.创建一个a标记,
链接地址为:http://www.baidu.com
文本:百度
3.创建一个按钮,文本为修改
4.点击按钮时,将 a 标记修改为
链接地址为:https://yq.aliyun.com/users/article?spm
文本:阿里云

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
	<script type="text/javascript">
		function updA() {
			var a = document.getElementById("anchor");
			a.innerText = "阿里云";
			a.setAttribute("href", "https://yq.aliyun.com/users/article?spm");
			a.setAttribute("target", "_blank");
		}
	</script>
	<a href="http://www.baidu.com" id="anchor">百度</a>
	<button onclick="updA()">修改</button>
	<script src="common.js"></script>
</body>
</html>


用云栖社区APP,舒服~

【云栖快讯】诚邀你用自己的技术能力来用心回答每一个问题,通过回答传承技术知识、经验、心得,问答专家期待你加入!  详情请点击

网友评论

巴黎香榭
文章76篇 | 关注33
关注
提供海量、安全和高可靠的云存储服务。RESTful API的平台无关性,容量和处理能力的弹性... 查看详情
CDN
是将源站内容分发至全国所有的节点,缩短用户查看对象的延迟,提高用户访问网站的响应速度与网站的... 查看详情
基于云安全大数据能力实现,通过防御SQL注入、XSS跨站脚本、常见Web服务器插件漏洞、木马... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
阿里云9.10会员日

阿里云9.10会员日