JavaScript——技术篇

一、js事件

事件处理的过程分三步：

发生事件
启动事件处理程序
事件处理程序作出反应

事件处理程序可以是任意的js语句，我们一般用的特定的自定义函数来对事件进行处理。

（一）js的常用事件

1、鼠标键盘事件

事件	说明
`onclick`	鼠标单击时触发此事件
`ondblclick`	鼠标双击时触发此事件
`onmousedown`	按下鼠标时触发此事件
`onmouseup`	按下的鼠标松开时触发此事件
`onmouseover`	鼠标移动到对象上方时触发此事件
`onmouseout`	鼠标离开对象时触发此事件
`onmousemove`	鼠标移动时触发此事件
`onkeypress`	键盘上某按钮按下并释放时触发此事件
`onkeydown`	键盘上某按钮按下时触发此事件
`onkeyup`	键盘上某按下的按钮释放时触发此事件

2、表单相关事件

事件	说明
`onfocus`	某元素获得焦点时触发此事件
`onblur`	某元素失去焦点时触发此事件
`onchange`	某元素失去焦点，并且元素的内容发生改变时触发此事件
`onsubmit`	一个表单被提交时触发此事件
`onreset`	当表单中的`RESET`属性被激活时触发此事件

3、页面相关事件

事件	说明
`onload`	页面内容加载完成时触发此事件
`onunload`	当用户离开页面时发生的事件(通过点击一个连接，提交表单，关闭浏览器窗口等等)
`onresize`	浏览器窗口大小被改变时触发此事件

（二）事件的调用

1、在HTML中调用

直接在目标标签属性中添加相应事件为属性，属性值就是函数名或者代码片段：

1	<input type="button" value="测试按钮" onclick="alert('绑定事件测试成功！')" />

2、在js中调用

在js代码中，先get到目标对象的引用，再给它绑定事件：

<body>
    <input type="button" value="测试按钮2" id="button01" />
</body>
<script type="text/javascript">
	var bt01 = document.getElementById("button01");
    bt01.onclick = function(){
        alert("测试事件2绑定成功！");
    }
</script>

必须将js代码置于标签代码之后！

（三）Event对象

不知所云，但很重要！

回头再了解。

二、BOM对象

Window对象代表的是打开的浏览器窗口，通过 Window对象可以打开窗口或关闭窗口、控制窗口的大小和位置，由窗口弹出的对话框，还可以控制窗口上是否显示地址栏、工具栏和状态栏等栏目。对于窗口中的内容，Window 对象可以控制是否重载网页、返回上一个文档或前进到下一个文档。

在框架方面，Window对象可以处理框架与框架之间的关系，并通过这种关系在一个框架处理另一个框架中的文档。Window对象还是所有其他对象的顶级对象，通过对 Window 对象的子对象进行操作，可以实现更多的动态效果。Window对象作为对象的一种，也有着其自己的方法和属性。

（一）Window对象

顶层Window对象是所有其他子对象的父对象，它出现在每一个页面上，并且可以在单个js应用程序中被多次使用。

1、常用属性

属性	说明
`document`	对话框中显示的当前文档
`frames`	当前对话框中所有frame对象的集合
`location`	当前文档的URL
`name`	对话框的名字
`status`	状态栏中的当前信息
`defaultStatus`	状态栏中的当前信息
`top`	最顶层的浏览器对话框
`parent`	包含当前对话框的父对话框
`opener`	打开当前对话框的父对话框
`closed`	当前对话框是否关闭的逻辑值
`self`	表示当前对话框
`screen`	表示用户屏幕，提供屏幕尺寸、颜色深度等信息
`innerWidth`和`innerHeight`	浏览器视口的宽度和高度，包括滚动条
`navigator`	表示浏览器对象，用于获得与浏览器相关的信息

2、常用方法

方法	说明
`alter("警告内容")`	弹出一个警告对话框，参数为非必须项，窗口关闭前后续代码不会执行！
`confirm("提示信息")`	弹出一个确认对话框，参数为非必须项，点击返回`true`，点击返回`false`
`prompt("窗口提示信息", "初始输入内容")`	弹出一个提示对话框，参数都是非必须项，点击返回输入的文本，点击返回`null`
`open()`	打开一个新的浏览器窗口或查找一个已命名的窗口
`close()`	关闭被引用的窗口
`focus()`	将被引用的对话框放在所有打开窗口的前面
`blur()`	将被引用的对话框放在所有打开窗口的后面
:star:`getComputedStyle()`	用于获取页面上最终渲染出来的某元素的样式
`scrollTo(x, y)`	把窗口滚动到指定的坐标
`scrollBy(offsetX, offsetY)`	按照指定的位移量滚动窗口
`setTimeout(timer)`	在指定的毫秒数过后，对传递的表达式求值
`setInterval(interval)`	指定周期性执行代码
`moveTo(x, y)`	将窗口移动到指定坐标处
`resizeTo(x, y)`	按照指定的尺寸更改窗口大小，窗口左上角位置不变
`resizeBy(offsetX, offsetY)`	按照指定的增量更改窗口大小，增量为正则变大，为负则变小，窗口左上角位置不变
`print()`	相当于浏览器工具中的“打印”按钮
`navigate(URL)`	使用对话框显示URL指定的页面

几个方法的详细使用方式：

open(URL,name,specs,replace)

用于打开一个新的浏览器窗口或查找一个已命名的窗口，参数都是可选项，每项参数都要用引号引起来！

URL：目标窗口的url，为空则打开空白窗口。
windowname：指定target属性或窗口的名称。支持以下值：
- _blank：加载到一个新的窗口。这是默认。
- _parent：加载到父框架。
- _self：替换当前页面。
- _top：替换任何可加载的框架集。
- 自定义的窗口名称。

specs：新窗口的参数，多个项目之间用逗号分隔，有以下项目可选：

参数	说明
`top=pixels`	窗口距离屏幕顶端的像素数
`left=pixels`	窗口距离屏幕左侧的像素数
`width=pixels`	窗口的宽
`height=pixels`	窗口的高，最小值为100
`scrollbars=yes/no/1/0`	是否显示滚动条，默认`yes`
`resizable=yes/no/1/0`	是否可调节窗口大小，默认`yes`
`toolbar=yes/no/1/0`	是否显示浏览器工具栏，默认`yes`
`menubar=yes/no/1/0`	是否显示菜单栏，默认`yes`
`location=yes/no/1/0`	是否显示地址栏，默认`yes`
`status=yes/no/1/0`	是否显示状态栏，默认`yes`

replace：规定新建窗口的这条浏览记录是在浏览器历史记录里替换当前条目还是新建条目：
- true：替换浏览历史中的当前条目。
- false：在浏览历史中新建条目。

close()

关闭当前窗口：
1
2
3
close();
window.close();
this.close();
要关闭指定窗口，需获取目标窗口的引用：
1
windObj.close();
scrollTo(x, y)

滚动到文档的绝对位置，参数x，y分别指文档本身的坐标点，将该点置于窗口左上角。

注：该方法是js1.2中规定的，js1.1版本中规定的方法是scroll()，二者完全相同。
scrollBy(offsetX, offsetY)

按照位移量滚动窗口，正数则向右/下滚动，负数则向左/上滚动，滚动量是相对文档自身的像素值，而与屏幕缩放与否无关。
setTimeout(timer)

设置超时，即为窗口设置一段时间后进行某个操作：
1
timerId = setTimeOut("要执行的js函数或代码片段", 等待毫秒数);
参数可以是一段js代码片段，也可以是要等待的毫秒数。

在代码执行前，还可以使用clearTimeOut()来取消该设定：
1
clearTimeOut(timeId);
setInterval(interval)
getComputedStyle()

用于获取此时浏览器窗口中渲染出来的对象的最终属性值，需要两个参数:
- 第一个：要获取样式的元素。
- 第二个：可以传递一个伪元素，一般都传null。
该方法会返回一个对象，对象中封装了当前元素对应的样式。

使用语法：
1. 可以通过 getComputedStyle(对象，null).样式名 的形式来读取样式：
  1
  var img_left = getComputedStyle(bg_img[0], null).left;
  如果获取的样式没有设置，则会获取到真实的值，而不是默认值
  
  比如：没有设置width，它不会获取到auto，而是一个长度
2. 为了更方便的使用可以加入正则表达式获取样式名
  
  利用 getComputedStyle(样式元素，null)[样式名] 的形式来获取样式

3、Window对象的使用

Window对象不用创建，可以直接调用其方法或属性：

window.属性名;
window.方法名;

window.alert("警告内容");
window.document.write("字符串");

js中self表示当前窗口，parent表示父级窗口，因此某些情况可以使用这些关键字来代替window：

1 2	self.属性名; parent.方法名;

（二）history对象

该对象用来访问窗口的历史记录：

1	[window.]history.属性名\|方法名[(方法参数)];

1、常用属性

属性	说明
length	历史纪录列表的长度，返回数字
current	当前文档的URL
next	历史列表的下一个URL
previous	历史列表的上一个URL

2、常用方法

方法	说明
`back()`	后退
`forward()`	前进
`go()`	前进或后退的数目，当前为`0`，`2`为前进2项，`-1`为后退1项

（三）一些通用的窗口事件

事件	描述
`windowId.onfocus()`	窗口获得焦点时激活
`windowId.onblur()`	窗口失去焦点时激活
`windowId.onload()`	文档完全载入窗口时激活
`windowId.onunload()`	文档未载入时激活
`windowId.onresize()`	用户改变窗口大小时激活
`windowId.onerror()`	出现js错误时激活

三、DOM对象

DOM，即Document Object Model，文档对象模型。

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。
注释是注释节点。

Document 对象：

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象是 HTML 文档的根节点。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

（一）DOM对象节点属性

属性	说明
nodeName	节点的名称
nodeValue	结点的值，通常只应用于文本节点
nodeType	结点的类型
parentNode	父结点
childNodes	子结点列表
firstChild	第一个子节点
lastChild	最后一个子结点
previousSibling	前一个兄弟节点
nextSibling	后一个兄弟节点
attributes	元素的属性列表

（二）结点的操作

1、获取节点

获取节点通过方法：

document.getElementById();

返回对拥有指定 id 的第一个对象的引用：

<body>
    <button id="bt01">按钮文本</button>
</body>

<script type="text/javascript" >
	var a = document.getElementById("bt01");
</script>

document.getElementsByName();

返回带有name属性的对象的集合，作为NodeList对象，以下三种get方法的返回值都是如此。

NodeList对象代表一个有顺序的节点列表。我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

<body>
    <h3 name="p1">
        ...
    </h3>
    <p name="p1">
        ...
    </p>
</body>

<script type="text/javascript" >
	var b = document.getElementsByName("p1");
    alert(b.length);
</script>

document.getElementsByTagName();

返回带有指定标签名的对象的集合：

<body>
    <h3 name="p1">
        ...
    </h3>
    <p name="p1">
        ...
    </p>
    <p>
        ...
    </p>
</body>

<script type="text/javascript" >
	var c = document.getElementsByTagName("p");
    alert(c[1].nodeName);
</script>

提示：参数值 "*" 返回文档的所有元素。

docyment.getElementsByClassName();

返回文档中所有指定类名的元素集合。

2、增

（1）创建节点

document.createElement(tagName)

通过指定名称创建一个元素，并返回该元素对象。

参数为必选项，String类型，内容为标签名称。
document.createTextNode()

创建一个文本节点，参数为文本内容。

（2）插入节点

用上述两种方法只是创建了节点，还需将其插入到指定位置：

document.appendChild()

向节点的子节点列表的末尾添加新的子节点。
fatherNode.insertBefore(newNode, ref)

在fatherNode结点的所有子结点中，将newNode节点插入到其子节点ref的前面。

实例演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test05</title>
		<script type="text/javascript">
			window.onload = function(){
				a = document.getElementById('ecy');
				a.nodeValue = "二齿缘";
				//alert(a.nodeValue);
				var b = document.getElementsByName("p1");
				//alert(b[1].nodeName);
				var newP = document.createElement("p");					//创建新标签节点p
				var newText = document.createTextNode("新添加的节点");	//创建新文本节点
				newP.appendChild(newText);								//文本节点插入到p中
				var fatherNode = document.getElementsByTagName("body");
				var temp02 = document.getElementsByTagName("input");
				fatherNode[0].insertBefore(newP, temp02[0]);			//插入
			}
		</script>
	</head>
	<body>
		<input type="button" value="hijfsbnjf" id="bt01" />
		<h3 id="ecy">二次元蒸鹅心</h3>
		<h3 name="p1">
		    ...
		</h3>
		<p name="p1">
		    ...
		</p>
	</body>
</html>

插入前后：

（3）复制节点

要复制的节点.cloneNode();

参数是布尔值，为true时表示深度复制——同时复制所有子节点，默认为false——仅复制单个节点，返回值为复制节点的引用。

克隆的节点不会包含任何事件监听器或用户自定义的数据属性，除非这些属性是直接在节点上设置的。

注：复制节点后网页并不会发生任何变化，要在网页上看到变化还需将其插入！

3、删

fatherNode.removeChild(oldChild)

oldChild：要删除的节点。

删除后网页会立即产生变化！

4、改

（1）DOM模型中

替换节点：

fatherNode.replaceChild(new, old);

用new节点替换old节点。

（2）DHTML模型中

innerHTML:
- 用途：获取或设置一个元素内部的 HTML 内容，包括它的子元素和文本。
- 读取：返回元素的起始标签和结束标签之间的所有内容（不包含起始标签），以字符串形式。
- 设置：当你给 innerHTML 赋值时，它会替换掉元素内部的所有内容（包括子元素），并解析赋值的字符串作为HTML，创建新的 DOM 树。
1
2
3
4
5
// 读取
var content = document.getElementById('myElement').innerHTML;

// 修改
document.getElementById('myElement').innerHTML = '<p>New content</p>';
innerText:
- 用途：获取或设置一个元素内部的文本内容，不包括 HTML 标签。
- 读取：返回元素和它的子元素的文本内容。
- 设置：当你给 innerText 赋值时，它会替换掉元素内部的所有内容，并将赋值的字符串作为纯文本插入。
1
2
3
4
5
复制// 读取
var text = document.getElementById('myElement').innerText;

// 设置
document.getElementById('myElement').innerText = 'New text content';
outerHTML:
- 用途：获取或设置一个元素的整体 HTML 内容，包括元素自身的标签。
- 读取：返回整个元素的 HTML 表示，包括起始标签、结束标签以及它们之间的所有内容。
- 设置：在大多数浏览器中，outerHTML 不能被设置，因为它没有标准的定义，并且可能会引起安全问题。
1
2
// 读取
var html = document.getElementById('myElement').outerHTML;
outerText:
- 用途：outerText 是一个非标准的属性，它在某些浏览器（如 IE）中可用，但在现代浏览器中并不推荐使用。
- 读取：与 outerHTML 类似，返回整个元素的 HTML 表示。

设置：与 innerText 类似，替换掉整个元素，并将其内部的字符串作为纯文本插入。

由于 outerText 是非标准的，所以在跨浏览器兼容性方面可能会有问题。在现代的网页开发实践中，推荐使用 outerHTML 来获取元素的 HTML 表示，而使用 innerText 来设置或获取元素的文本内容。

注意：在设置 innerHTML 或 innerText 时，需要小心，因为它们可以执行 HTML 或 JavaScript，这可能导致安全问题，如 XSS（跨站脚本攻击）。

四、Style对象

属性	说明
`background`	设置或检索对象最多5个独立的背景属性
`backgroundColor`	背景颜色
`backgroundImage`	背景图像
`backgroundPosition`	背景位置
`backgroundPositionX`	backgroundPosition属性X的坐标
`backgroundPositionY`	backgroundPosition属性Y的坐标
`behavior`	DHTML行为的位置
`border`	边框
`borderColor`	边框颜色
`borderStyle`	上、下、左、右边框的样式
`borderWidth`	边框宽度
`borderBottom, borderLeft, borderRight, borderTop`	四边框属性
`borderBottomColor, borderLeftColor, borderRightColor, borderTopColor`	四边框颜色
`borderBottomStyle, borderLeftStyle, borderRightStyle, borderTopStyle`	四边框样式
`borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth`	四边框宽度
`color`	文本颜色
`cursor`	当鼠标指向对象时使用的形状
`direction`	文本方向
`display`	是否渲染在屏幕上，不会占据位置
`font`	设置或检索对象最多6个独立的字体属性
`fontFamily`	字体样式名称
`fontSize`	字体大小
`fontStyle`	字体样式，如斜体、常规或倾斜体
`fontVariant`	字体是否以小型大写字母显示
`fontWeight`	字体宽度
`height`	对象高度
`width`	对象宽度
`left`	对象相对于文档层次中下一个定位对象左边界的位置
`right`	对象相对于文档层次中下一个定位对象右边界的位置
`top`	对象相对于文档层次中下一个定位对象顶部的位置
`bottom`	对象相对于文档层次中下一个定位对象底部的位置
`letterSpacing`	字符间距（总和）
`lineHeight`	两行间的距离
`listStyle`	列表属性（最多三个）
`listStyleImage`	列表项目符号的图像
`listStylePosition`	列表项目符号的位置
`listStyleType`	列表项目符号的预定义类型
`margin, marginLeft, marginRight, marginBottom, marginTop`	外边距
`padding, paddingLeft, paddingRight, paddingBottom, paddingTop`	内边距
`scrollbar3dLightColor`	滚动条中滚动滑块和滚动按钮的左上颜色
`scrollbarArrowColor`	滚动条中滚动箭头标识的颜色
`scrollbarBaseColor`	滚动条中滚动按钮和滚动滑块的主要颜色
`scrollbarDarkShadowColor`	滑槽的颜色
`scrollbarFaceColor`	滚动条和滚动箭头的颜色
`scrollbarHighlightColor`	滚动框和滚动条滚动箭头的左上边缘颜色
`scrollbarShadowColor`	滚动框和滚动条滚动箭头的右下边缘颜色
`scrollbarTrackColor`	滚动条上轨迹元素的颜色
`styleFloat`	元素float布局
`tableLayout`	控制表格的行为和布局方式
`textAlign`	文字对齐方式（左中右、两端对齐）
`textDecoration`	文本是否有闪烁、上中下划线
`verticalAlign`	对象的垂直排列
`visibility`	元素是否可见，仍然占据空间
`whiteSpace`	是否自动换行
`wordBreak`	是否拆分单词换行
`wordSpacing`	字符间距总量
`wordWrap`	内容超过容器边界时是否换行
`zIndex`	堆叠次序
`zoom`	放大比例