html bom与dom解析

最新推荐文章于 2024-05-31 00:35:54 发布
最新推荐文章于 2024-05-31 00:35:54 发布
阅读量1.1k 收藏
点赞数
分类专栏： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010713277/article/details/51058723
版权

1 安排

html/css、JavaScript基础

JavaScript ： bom & dom

JavaScript 

javaweb

JavaScript 高级：ajax

ssh

JavaScript 高级：面对对象

 

2 回顾

l html 使用 JavaScript 结合

方式1：<script type="text/javascript">js 代码</script>

方式2：引入外部js类库，<script type="text/javascript" src="....js"></script>

l 变量声明

格式：var 变量；

var 可以省略的，但不能写错。例如：错误 String username = "";

变量名称：字母、_、$ 开头，不能使数字开发

l JavaScript 原始数据类型：5个

string   必须使用引号（双单）

number 整形、浮点

boolean true|false

null 占位符，用于对象返回的  typeof null --> Object

undefined 变量已经声明，但没有初始化，例如：var demo;

undefined 是null衍生 出来的。 null==undefined  --> true

l 运算符

一元：i++、++i、--i、--i、 +i 、 -i

位运算：一般不用，优化，java一样的。

boolean 运算（逻辑）

String --> boolean ： 非空字符串都是true，例如："false"  --> true

number --> boolean ： +0  -0  NaN 是false ，其他都是true

null --> boolean  : false

undefined --> boolean : false

Object --> 非空都是true

使用等值

"" == true -->  false

"true" == true  -->  false

1 == false --> false

0 == false  --> true

2 == true  --> true 表示1，false 表示0 ，2==1

NaN == NaN  --> false 任何数据与NaN操作都是 false

NaN != NaN  --> true

"NaN" == NaN

//等值运算，尝试将内容转换 数字，再进行运算

//alert("" == true); //

//alert("true" == true);  //

//alert("1" == true );  //

alert("0" == true );  //

parseInt("abc")  --> NaN

alert(NaN == true)  --> false

 

l 引用类型

Object , toString() 程序字符串答应

Function 函数

定义方式：

方式1：function xxx(参数列表){标签体} ;  xxx();

方式2：var fn = new Function(参数列表，，，，"标签体");

方式3：var fn = function(){};   fn()

注意：

只要使用函数名就可以进行操作。不需要明确实际参数

fn()  fn("abc")  fn(132)

如果将函数赋值给其他变量，其他变量仍然可以执行函数，相当于将函数引用进行传递

fn ;  var myfn = fn;    myfn()

函数体中获得实际参数，arguments 获得所有的实际参数，是一个数组

return 可以进行返回，如果没有返回，默认值undefined

void 运算符  void(函数| 函数体)  ，忽略函数返回值

String/Number/Boolean  原始类型进行操作

new String(...)  返回对象

String(...) 返回字符串--原始类型

Array 数组

方式1：使用中括号，var x = [] ;

方式2：指定大小值， var y = new Array(5);

方式3：初始化，var z = new Array("","","",134,funciton(){})

注意：

数组的长度可以变

数组成员可以任意

Date 时间

new Date()

getFullYear()

getYear()

getMonth()

getDay()

....

toLocaleString()

Math

PI

Global 全局变量

eval  将字符串进行解析，并执行。

parseInt parseFloat  处理整形和浮点

parseInt("123abc")  --->  123

encodeURI /  decodeURI()  不处理特殊字符

encodeURIComponent()  / decodeURI... 处理特殊字符

RegExp 正则

对象：

方式1：var xx = new RegExp("表达式","gi")

g 全局 global 、 i 忽略大小写  ignore Case

方式2：var yy = /xxx/gi

正则表达式语法：^...$

方式：exec()  获得匹配位置、test() 是否匹配

字符串：

match() 匹配

search() 查询

replace 替换

split 分隔

 

3 BOM

3.1 介绍

l browser object model ：浏览器对象模型，ECMAScript 规范规定，用于描述浏览器行为。提供对象进行相应操作。

 

l 学习：window、history、location

window：表示窗体

history：浏览记录

location：当前访问路径

screen：浏览器屏（了解）

navigator 浏览器特性（了解）

3.2 window 窗体

l 每一个html对应一个window对象。

frameset 框架

3.2.1 window集合

l 提供frames[] 数组获得所有的框架

3.2.2 window属性

l 导航定位

self ：当前操作窗口

parent：当前的父窗口

top：所有的顶级窗口

l bom其他对象引用

例如：history引用，window.history

l opener 确定有谁打开当前页面，在子窗口获得父窗口

A.html 打开 B.html ,此时在B.opener 获得就是A的window对象。

3.2.3 window 方法

3.2.3.1 打开窗口

l open方式

格式：window.open(URL,name,features,replace)

URL：确定打开路径

name：一般没有，设置以什么方式打开。如果不写，默认：_blank

features : 用于确定新窗口特性，例如：大小，是否有地址栏等

大部分值不同的浏览器实现不同，常用：height、width等

注意：多个值之间使用逗号分隔，每一个值格式：k=v

replace : 打开新窗口是否替换历史记录，一般没用。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		
	
		//事件--指定操作进行时，js函数将触发
		// * onclick 目标点击时将触发事件
		
		var newWindowObject;
		function openNewWindow(){
			//打开新窗口
			newWindowObject = window.open("03.window target.html","","height=100px,width=100px");
		}
		
		function closeNewWindow(){
			newWindowObject.close();
		}
		
	</script>
</head>
<body>
	<input type="button" value="打开新窗口" οnclick="openNewWindow()" /> <br/>
	<input type="button" value="关闭新窗口" οnclick="closeNewWindow()" /> <br/>
	
	<div id="divId">
			xxxx
	</div>
	
	<script type="text/javascript">
		//程序加载时，修改div内容
		window.document.getElementById("divId").innerHTML = "abc";
	</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		function closeSelf(){
			//当前窗口关闭
			window.close();
		}
		
		function sendParent(){
			//window.opener 父窗口的window
			window.opener.document.getElementById("divId").innerHTML = "算你屌";
		}
	</script>
</head>
<body>
	我被打开了 <br/>
	<input type="button" value="自己将关闭" οnclick="closeSelf()" /> <br/>
	<input type="button" value="给父窗口写内容" οnclick="sendParent()" /> <br/>
</body>
</html>


3.2.3.2 消息框

警告框：window.alert("内容"); 提供确定按钮

提示框：window.confirm("内容") 提供 确定 和 取消按钮

点击确定，返回值：true

点击却小，返回值：false

确定框：window.prompt("内容","默认") 提供 确定 、 取消 和 文本框进行输入

确认 返回值：输入值

取消，返回值：null

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		//警告
		//alert("game over!!!");
		//提示
		//var returnVal = confirm("确定要退出游戏吗？");
		//alert(returnVal);
		//确定框
		//var returnVal2 = prompt("请输入您的性别：\n1.男 \n2.女","1");
		//alert(returnVal2);
		
		//以上所有消息框，都可以使用\n 进行回车换行
	</script>
</head>
<body>

</body>
</html>


3.2.3.3 指定时间执行 Timing

setInterval 指定js函数，按照指定时间，循环执行。

格式：setInterval(函数,时间)

函数：两种写法，函数名，"函数名()"

时间：单位毫秒

clearInterval 将setInterval开启定时器关闭。

格式：clearInterval(对象)

 

setTimeout  在执行时间，延迟执行一次js函数。

clearTimeout 停止setTimeout生成定时器。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
	<div id="divId">...</div><br/>
	
	<input type="button" value="停止时间" οnclick="stopDate()"/>
	<input type="button" value="开始时间" οnclick="startDate()"/>
	
	<script type="text/javascript">
		//setInterval();
		
		//显示
		function showDate(){
			//1 创建时间
			var date = new Date();
			//2 指定位置显示
			document.getElementById("divId").innerHTML = date.toLocaleString();
		}
		//执行一次
		showDate();
		//每秒执行一次
		//setInterval(showDate,1000);
		var interId;
		
		//开始
		function startDate(){
			if(! interId){  //如果没有赋值 undefined --> false ; 有值Object --> true  (null -- false)
				showDate();
				interId = setInterval("showDate()",1000);
			}
		}
		
		//停止
		function stopDate(){
			if(interId) {
				clearInterval(interId);
				interId = undefined;
			}
		}
		
		
		
		
		
		
	</script>
</body>
</html>

3.3 history历史

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

l length 属性：表示历史记录个数。

back() 回退 左边按钮

forward() 前进 右边按钮

go(number | url)  跳到指定的位置

-1 等效于back()

1 等效于forward()

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	</script>
</head>
<body>
	<a href="06.第2个页面.html">打开2页面</a> <br/>
	
	<input type="button" value="前进" οnclick="history.forward()"> <br/>
	<input type="button" value="前进" οnclick="history.go(1)"> <br/>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	</script>
</head>
<body>
	<input type="button" value="返回" οnclick="history.back()"> <br/>
	<input type="button" value="返回" οnclick="history.go(-1)"> <br/>
	<a href="javascript:void(0)" οnclick="history.go(-1);">返回</a> <br/>
</body>
</html>


3.4 Location

l Location 对象包含有关当前 URL 的信息。

3.4.1 属性

l URL路径：  http://www.itheima.com:80/a/b/c/demo.html?username=jack&password=1234

hash 设置或返回从井号 (#) 开始的 URL（锚）。(了解)

   index.html#xxx  获得xxx

host 设置或返回主机名和当前 URL 的端口号。

   www.itheima.com:80

hostname 设置或返回当前 URL 的主机名。

   www.itheima.com

pathname 设置或返回当前 URL 的路径部分。

   /a/b/c/demo.html

port 设置或返回当前 URL 的端口号。

  80

protocol 设置或返回当前 URL 的协议。

  http

search 设置或返回从问号 (?) 开始的 URL（查询部分）。

  username=jack&password=1234

 

href 设置或返回完整的 URL。

  location.href= ...;  指定请求路径

 

3.4.2 方法

assign() 加载新的文档。 将打开新的页面，历史记录也是新。

replace() 用新的文档替换当前文档。将打开新的页面，历史记录将被覆盖。

reload() 重新加载当前文档。 （刷新）

 

4 DOM

4.1 介绍

l DOM：Document object Model 文档对象模型，用于修改文档（及可以对文档中内容进行CRUD）

文档：结构化文档。例如：html、xml等

l DOM规范：html dom、xml dom等

l 之后的操作，将html页面加载内容（浏览器），浏览器将整个文档生成一个对象 document，将采用DOM树方式对html内容进行展现。

4.2 document获取

l 获取方式：window.document ，浏览器将文档加载成功之后，自动生成dom树，并将封装好的对象赋值给window.document

l window 对象属性，可以直接访问，及document. 操作

4.3 Element获取

document.getElementById("id属性的值")  ，<xxx id=""> 通过标签id属性值 获得 元素

id属性值，必须在整个文档唯一的。

document.getElementsByName("name属性值")  <xxx name=""> 通过标签name属性获得元素们

name属性值可以重复的。

<input type="radio" name="gender" value="男">

<input type="radio" name="gender" value="女">

document.getElementsByClassName("class 属性值")  <xxx class="css样式">通过标签class属性获得元素们

document.getElementsByTagName("标签名称")  <xxx>  通过标签名获得 元素们

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	</script>
</head>
<body>
	<form id="form1" name="myForm" method="get" class="formClass" action="/demo1Servlet"></form>
	<form id="form2" name="myForm" method="post" class="formClass" action="/demo2Servlet"></form>
	<form id="form3" name="myForm" method="post"></form>
	<script type="text/javascript">
		//id , 元素属性值快速获取 , 格式： 对象.属性
		var formObj1 = document.getElementById("form1");
		//alert(formObj1.action);
		
		//name 获得数组
		var forms2 = document.getElementsByName("myForm");
		//alert(forms2.length);
		
		//class
		var forms3 = document.getElementsByClassName("formClass");
		//alert(forms3.length);
		
		// tag
		var forms4 = document.getElementsByTagName("form");
		//alert(forms4.length);
	</script>
</body>
</html>


4.4 Element方法

appendChild() 指定的元素内追加

insertBefore() 指定的元素前追加

elementNode.insertBefore(new_node,existing_node)

new_node 当前新创建element

existing_node 谁之前（已经存在）

removeChild() 删除指定的元素

elementNode.removeChild(node)  父亲吧孩子删除掉。

elementNode 必须是父元素

node 子元素

通过孩子如何父元素

childElement.parent.removeChild(childElement)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

	<script type="text/javascript">
		//表示 页面加载成功之后，设置函数， 相当于  <body οnlοad="xxx()">
		window.onload = function(){
			//1 创建div
			var newDivObj = document.createElement("div");
			//1.1 设置属性
			newDivObj.setAttribute("id","newDivId");
			//1.2 设置样式
			newDivObj.style.height = "200px";
			newDivObj.style.width = "200px";
			newDivObj.style.border = "1px solid #000";
			// 1.3 内容
			newDivObj.innerHTML = "我在这里傻傻看着你";
			
			//2 获得body document.getElementsByTagName("body")[0]
			// * 简化版 document.body
			
			
			
			
			//3 追加
			//document.getElementsByTagName("body")[0].appendChild(newDivObj);
			document.body.appendChild(newDivObj);

		}
		</script>
</head>
<body>
</body>
</html>
后面继续更新html dom解析及xml dom解析！！！！！！！！！！！！

 

 


 

 

 

 

 

 

 

 

机会留给准备的人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML BOM
qq_33193871的博客
11-10 2101
大纲 BOM的概念 window对象 提示框 间隔调用和延迟调用 初始数据解析 1.BOM的概念 1.1 BOM **概念：**BOM(Browser Object Model)即浏览器对象模型 关于BOM的说明： BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window对象 BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性 BOM缺乏一个统一的标准 JavaScript语法的标准化组织是ECMA DOM的
html中的bom和dom,前端之BOM和DOM
weixin_36278817的博客
06-15 519
一. BOM和DOMJavaScript分为ECMAScript, BOM, DOM.BOM( Browser Object Model )是指浏览器对象模型, 它使JavaScript有能力与浏览器进行交互.DOM( Document Object Model )是指文档对象模型, 通过它,可以访问HTML文档的所有元素.二. window对象所有浏览器都支持window对象. 它表示浏览器窗口...
HTML、DOM 和 BOM：深入解析网页加载和渲染过程
最新发布
qq_52010229的博客
05-31 1483
HTML（HyperText Markup Language）是用于描述网页结构的标记语言。它通过标签（如<div><p><a>等）定义网页的内容和布局，是网页的基础。DOM（Document Object Model）是 HTML 文档的编程接口。它将文档表示为树结构（或节点树），每个节点代表文档的一部分（例如元素、属性、文本）。通过 DOM，开发者可以使用 JavaScript 动态地访问和修改文档的内容、结构和样式。
HTML中的BOM
wssjiayou的博客
08-26 365
HTML中的BOM
HTML BOM(window对象的总结)
ZiXiaweb的博客
09-13 1046
什么是BOM？ BOM，Browser Object Model 即浏览器对象模型。浏览器页面初始化时，会在内存创建一个全局对象，用来描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型。 不同于DOM的标准化组织是W3C，JavaScript的语法标准化组织是ECMA，BOM没有官方标准，对于现代浏览器，每个浏览器都有自己的BOM实现方法，所以直接使用BOM会有兼容性问题。 BOM包含哪些内容? BOM有一个核心对象window，window对象包含了6大核心模块，分别是： document对象
html之BOM
qq_45353823的博客
03-26 849
BOM概念： browser object model浏览器对象模型 将浏览器的各个组成部分封装成对象； BOM的组成 window：窗口对象 history：历史记录对象 location：地址栏对象 screen：显示器屏幕对象 navigator：浏览器对象 window对象： 特点：可以直接通过方法名，也可以通过window点+方法名 <html> <title>...
HTML要点解析
m0_70013049的博客
04-23 322
一、表格 1.表格标签<table> <tr> <td> <th> <thead> <tbody> 2.表格标签属性 align="left, center, right" 确定表格对齐方式 border="像素值" 表格边跨宽度 cellpadding="像素值"...
BOM与DOM的区别分析
09-05
**BOM与DOM的区别分析** 在Web开发中，BOM（Browser Object Model）和DOM（Document Object Model）是两个至关重要的概念，它们都是用于处理和操作网页内容的接口。DHTML（Dynamic HTML）技术的实现离不开这两者的...
Javascript操作BOM和DOM
12-30
在JavaScript的世界里，BOM（浏览器对象模型）和DOM（文档对象模型）是两个至关重要的概念，它们允许开发者与用户的浏览器进行深入交互。 **BOM（浏览器对象模型）**: BOM是浏览器提供的一系列接口，它允许...
HTML-01-第10章 DOM和BOM.pptx
11-25
掌握DOM和BOM对于前端开发至关重要，它们是JavaScript与HTML交互的基础，使得动态更新网页内容、响应用户交互成为可能。通过理解并熟练运用DOM和BOM，开发者可以构建更加丰富和交互性强的Web应用。
BOM对象和DOM对象
12-02
在Web开发中，BOM（Browser Object Model）对象和DOM（Document Object Model）对象是两个至关重要的概念，它们分别处理浏览器交互和HTML文档结构的解析。 **一、BOM对象** BOM，浏览器对象模型，主要负责处理...
解决项目中html去除BOM问题
08-07
经本人亲自试验，解决项目中html去除BOM问题.
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
10-27
DHTML，全称Dynamic HTML，是一种在...理解并掌握DHTML、JavaScript、DOM、BOM以及Web标准对于现代前端开发至关重要，它们共同构建了丰富的网页交互体验，为开发者提供了强大的工具来创建动态、响应式的网页应用程序。
HTML----JavaScript操作对象BOM对象
zhoutong2323的博客
01-02 837
BOM（浏览器对象模型）是JavaScript中的一个重要概念，它提供了一组用于控制浏览器窗口和页面内容的对象和方法。弹出新的浏览器窗口 移动、关闭浏览器窗口以及调整窗口的大小页面的前进、后退。
BOM(包含案例）
qq_56303170的博客
08-21 1214
BOM BOM概述 BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性 BOM的构成 window对象是浏览器的顶级对象，它具有双重角色 它是js访问浏览器窗口的一个接口 它是一个全局对象。定义在全局作用域的变量、函数都会变为window对象的属性和方法 在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等 注意：window下的一
DOM与BOM详解
libingjiedd的博客
03-12 1004
DOM 全称是 Document Object Model，也就是文档对象模型。提供操作页面元素的方法和属性，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM 树DOM树是Web页面的模型，当浏览器加载一个Web页面时，它会创建这个页面的模型，称为DOM树。DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。①.文档节点：在树的顶端是文档节点，它呈现整个页面。②.元素节点：需要访问DOM树时，需要从查找元素开始。
HTML--BOM window对象（实例：放大镜）
weixin_54107527的博客
05-06 3976
目录 简介： 1、BOM结构 2、window对象 3、location对象 4、history对象 5、navigator对象 6、screen对象 BOM 定时器 1、定时器方法 放大镜 简介： BOM即浏览器对象模型（Browser Object Model），它提供了页面与浏览器窗口进行交互的对象接口。BOM由一系列的相关对象组成，window作为BOM的顶层对象，所有其他全局对象都是window的子对象，甚至DOM也是其子对象之一。学会了window对象及其子对象的常用
Web前端开发：BOM与DOM编程实战解析
BOM主要负责处理与浏览器交互的相关功能，而DOM则专注于管理和操作HTML或XML文档的结构和内容。 BOM模型是JavaScript与浏览器进行交互的桥梁，它定义了一系列的接口，允许开发者获取和设置浏览器的属性和行为。在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值