初识JavaScript及DOM

改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容：
今天的日期是： Thu Feb 18 2016 10:03:32 GMT+0800 (中国标准时间)
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

实例

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML
本例改变了 p元素的内容：
实例

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

本例改变了 h1元素的内容：
实例

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

</body>
</html>

实例讲解：
上面的 HTML 文档含有 id=”header” 的 h1 元素
我们使用 HTML DOM 来获得 id=”header” 的元素
JavaScript 更改此元素的内容 (innerHTML)
改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value
本例改变了 img>元素的 src 属性：
实例

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

实例讲解：
上面的 HTML 文档含有 id=”image” 的 img 元素
我们使用 HTML DOM 来获得 id=”image” 的元素
JavaScript 更改此元素的属性（把 “smiley.gif” 改为 “landscape.jpg”）

JavaScript HTML DOM - 改变CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style
下面的例子会改变 p元素的样式：
实例

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

<p>以上段落通过脚本修改。</p>

</body>
</html>

使用事件
HTML DOM 允许我们通过触发事件来执行代码。
比如以下事件：
1.元素被点击。
2.页面加载完成。
3.输入框被修改。
4.……
在接下来的章节，你会学到更多关于事件的知识。
本例改变了 id=”id1” 的 HTML 元素的样式，当用户点击按钮时：
实例

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>

</body>
</html>

更多实例
Visibility
如何使元素不可见。您希望元素显示或消失吗？
实例：

<!DOCTYPE html>
<html>
<body>

<p id="p1">这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。</p>

<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

</body>
</html>

JavaScript HTML DOM 事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
onclick=JavaScript
HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

在本例中，当用户在 h1元素上点击时，会改变其内容：
实例

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>

本例从事件处理器调用一个函数：
实例

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>

HTML 事件属性
如需向 HTML 元素分配事件，您可以使用事件属性。
实例
向 button 元素分配 onclick 事件：

<button onclick="displayDate()">Try it</button>

在上面的例子中，名为 displayDate 的函数将在按钮被点击时执行。
使用 HTML DOM 来分配事件
HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：
实例
向 button 元素分配 onclick 事件：

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

在上面的例子中，名为 displayDate 的函数被分配给 id=myButn” 的 HTML 元素。
按钮点击时Javascript函数将会被执行。

onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
实例

<body onload="checkCookies()">

onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
实例

<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
实例
一个简单的 onmouseover-onmouseout 实例：

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}

function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

实例
onmousedown 和onmouseup
当用户按下鼠标按钮时，更换一幅图像。

<!DOCTYPE html>
<html>
<head>
<script>
function lighton()
{
document.getElementById('myimage').src="bulbon.gif";
}
function lightoff()
{
document.getElementById('myimage').src="bulboff.gif";
}
</script>
</head>

<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
<p>点击不释放鼠标灯将一直亮着!</p>
</body>
</html>

onload
当页面完成加载时，显示一个提示框。

<!DOCTYPE html>
<html>
<head>

<script>
function mymessage()
{
alert("消息在 onload 事件触发后弹出。");
}
</script>
</head>

<body onload="mymessage()">
</body>

</html>

onfocus
当输入字段获得焦点时，改变其背景色。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x)
{
x.style.background="yellow";
}
</script>
</head>
<body>

输入你的名字: <input type="text" onfocus="myFunction(this)">

<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>

</body>
</html>

鼠标事件
当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色

<!DOCTYPE html>
<html>
<body>

<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
将鼠标移至文部上</h1>

</body>
</html>

JavaScript HTML DOM EventListener

addEventListener() 方法
实例
点用户点击按钮时触发监听事件：

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
Note 注意:不要使用 “on” 前缀。例如，使用 “click” ,而不是使用 “onclick”。

向原元素添加事件句柄
实例
当用户点击元素时弹出 “Hello World!” :

element.addEventListener("click", function(){ alert("Hello World!"); });

你可以使用函数名，来引用外部函数:
实例
当用户点击元素时弹出 “Hello World!” :

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

向同一个元素中添加多个事件句柄
addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件：
实例

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

你可以向同个元素添加不同类型的事件：
实例

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

向 Window 对象添加事件句柄
addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。
实例
当用户重置窗口大小时添加事件监听：

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

传递参数
当传递参数值时，使用”匿名函数”调用带参数的函数：
实例

element.addEventListener("click", function(){ myFunction(p1, p2); });

事件冒泡或事件捕获？
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。如果你将 p元素插入到 div 元素中，用户点击 p 元素, 哪个元素的 “click” 事件先被触发呢？
在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： p元素的点击事件先触发，然后会触发 div元素的点击事件。
在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： div 元素的点击事件先触发，然后再触发 p元素的点击事件。
addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：
addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
实例

document.getElementById("myDiv").addEventListener("click", myFunction, true);

removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
实例

element.removeEventListener("mousemove", myFunction);

注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

实例
跨浏览器解决方法:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

HTML DOM 事件对象参考手册
所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
HTML DOM 事件
HTML DOM 事件
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。
事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。
提示：在 W3C 2 级 DOM 事件中规范了事件模型。
HTML DOM 事件
DOM：指明使用的 DOM 属性级别。

鼠标事件

属性  描述  DOM
onclick 当用户点击某个对象时调用的事件句柄。  2
oncontextmenu   在用户点击鼠标右键打开上下文菜单时触发  
ondblclick  当用户双击某个对象时调用的事件句柄。  2
onmousedown 鼠标按钮被按下。    2
onmouseenter    当鼠标指针移动到元素上时触发。 2
onmouseleave    当鼠标指针移出元素时触发    2
onmousemove 鼠标被移动。  2
onmouseover 鼠标移到某元素之上。  2
onmouseout  鼠标从某元素移开。   2
onmouseup   鼠标按键被松开。    2

键盘事件

属性  描述  DOM
onkeydown   某个键盘按键被按下。  2
onkeypress  某个键盘按键被按下并松开。   2
onkeyup 某个键盘按键被松开。  2

框架/对象（Frame/Object）事件

属性  描述  DOM
onabort 图像的加载被中断。 ( <object>)   2
onbeforeunload  该事件在即将离开页面（刷新或关闭）时触发    2
onerror 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)   
onhashchange    该事件在当前 URL 的锚部分发生修改时触发。  
onload  一张页面或一幅图像完成加载。  2
onpageshow  该事件在用户访问页面时触发   
onpagehide  该事件在用户离开当前网页跳转到另外一个页面时触发    
onresize    窗口或框架被重新调整大小。   2
onscroll    当文档被滚动时发生的事件。   2
onunload    用户退出页面。 ( <body> 和 <frameset>)  2

表单事件

属性  描述  DOM
onblur  元素失去焦点时触发   2
onchange    该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)    2
onfocus 元素获取焦点时触发   2
onfocusin   元素即将获取焦点是触发 2
onfocusout  元素即将失去焦点是触发 2
oninput 元素获取用户输入是触发 3
onreset 表单重置时触发 2
onsearch    用户向搜索域输入文本时触发 ( <input="search">)    
onselect    用户选取文本时触发 ( <input> 和 <textarea>)   2
onsubmit    表单提交时触发 2

剪贴板事件

属性  描述  DOM
oncopy  该事件在用户拷贝元素内容时触发  
oncut   该事件在用户剪切元素内容时触发  
onpaste 该事件在用户粘贴元素内容时触发

打印事件

属性  描述  DOM
onafterprint    该事件在页面已经开始打印，或者打印窗口已经关闭时触发   
onbeforeprint   该事件在页面即将开始打印时触发

拖动事件

事件  描述  DOM
ondrag  该事件在元素正在拖动时触发    
ondragend   该事件在用户完成元素的拖动时触发     
ondragenter 该事件在拖动的元素进入放置目标时触发   
ondragleave 该事件在拖动元素离开放置目标时触发    
ondragover  该事件在拖动元素在放置目标上时触发    
ondragstart 该事件在用户开始拖动元素时触发  
ondrop  该事件在拖动元素放置在目标区域时触发

多媒体（Media）事件

事件  描述  DOM
onabort 事件在视频/音频（audio/video）终止加载时触发。    
oncanplay   事件在用户可以开始播放视频/音频（audio/video）时触发。    
oncanplaythrough    事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。  
ondurationchange    事件在视频/音频（audio/video）的时长发生变化时触发。     
onemptied   The event occurs when the current playlist is empty  
onended 事件在视频/音频（audio/video）播放结束时触发。    
onerror 事件在视频/音频（audio/video）数据加载期间发生错误时触发。  
onloadeddata    事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。  
onloadedmetadata    事件在指定视频/音频（audio/video）的元数据加载后触发。    
onloadstart 事件在浏览器开始寻找指定视频/音频（audio/video）触发。    
onpause 事件在视频/音频（audio/video）暂停时触发。  
onplay  事件在视频/音频（audio/video）开始播放时触发。    
onplaying   事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。    
onprogress  事件在浏览器下载指定的视频/音频（audio/video）时触发。    
onratechange    事件在视频/音频（audio/video）的播放速度发送改变时触发。   
onseeked    事件在用户重新定位视频/音频（audio/video）的播放位置后触发。     
onseeking   事件在用户开始重新定位视频/音频（audio/video）时触发。    
onstalled   事件在浏览器获取媒体数据，但媒体数据不可用时触发。    
onsuspend   事件在浏览器读取媒体数据中止时触发。   
ontimeupdate    事件在当前的播放位置发送改变时触发。   
onvolumechange  事件在音量发生改变时触发。    
onwaiting   事件在视频由于要播放下一帧而需要缓冲时触发。

动画事件

事件  描述  DOM
animationend    该事件在 CSS 动画结束播放时触发   
animationiteration  该事件在 CSS 动画重复播放时触发   
animationstart  该事件在 CSS 动画开始播放时触发

过渡事件

事件  描述  DOM
transitionend   该事件在 CSS 完成过渡后触发。

其他事件

事件  描述  DOM
onmessage   该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发   
onmousewheel    已废弃。 使用 onwheel 事件替代     
ononline    该事件在浏览器开始在线工作时触发。    
onoffline   该事件在浏览器开始离线工作时触发。    
onpopstate  该事件在窗口的浏览历史（history 对象）发生改变时触发。 event occurs when the window's history changes   
onshow  该事件当 <menu> 元素在上下文菜单显示时触发    
onstorage   该事件在 Web Storage(HTML 5 Web 存储)更新时触发     
ontoggle    该事件在用户打开或关闭 <details> 元素时触发  
onwheel 该事件在鼠标滚轮在元素上下滚动时触发

事件对象
常量

静态变量    描述  DOM
CAPTURING-PHASE 当前事件阶段为捕获阶段(3)  1
AT-TARGET   当前事件是目标阶段,在评估目标事件(1)    2
BUBBLING-PHASE  当前的事件为冒泡阶段 (2)  3

属性

属性  描述  DOM
bubbles 返回布尔值，指示事件是否是起泡事件类型。    2
cancelable  返回布尔值，指示事件是否可拥可取消的默认动作。 2
currentTarget   返回其事件监听器触发该事件的元素。   2
eventPhase  返回事件传播的当前阶段。    2
target  返回触发此事件的元素（事件的目标节点）。    2
timeStamp   返回事件生成的日期和时间。   2
type    返回当前 Event 对象表示的事件的名称。  2

方法

方法  描述  DOM
initEvent() 初始化新创建的 Event 对象的属性。    2
preventDefault()    通知浏览器不要执行与事件关联的默认动作。    2
stopPropagation()   不再派发事件。 2

目标事件对象
方法

方法  描述  DOM
addEventListener()  允许在目标事件中注册监听事件(IE8 = attachEvent()) 2
dispatchEvent() 允许发送事件到监听器上 (IE8 = fireEvent()) 2
removeEventListener()   运行一次注册在事件目标上的监听事件(IE8 = detachEvent())  2

事件监听对象
方法

方法  描述  DOM
handleEvent()   把任意对象注册为事件处理程序  2

文档事件对象
方法
方法描述 DOM
createEvent() 2
鼠标/键盘事件对象
属性

属性  描述  DOM
altKey  返回当事件被触发时，"ALT" 是否被按下。  2
button  返回当事件被触发时，哪个鼠标按钮被点击。    2
clientX 返回当事件被触发时，鼠标指针的水平座标。    2
clientY 返回当事件被触发时，鼠标指针的垂直座标。    2
ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。    2
Location    返回按键在设备上的位置 3
charCode    返回onkeypress事件触发键值的字母代码。    2
key 在按下按键时返回按键的标识符。 3
keyCode 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。   2
which   返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。   2
metaKey 返回当事件被触发时，"meta" 键是否被按下。    2
relatedTarget   返回与事件的目标节点相关的节点。    2
screenX 返回当某个事件被触发时，鼠标指针的水平座标。  2
screenY 返回当某个事件被触发时，鼠标指针的垂直座标。  2
shiftKey    返回当事件被触发时，"SHIFT" 键是否被按下。   2

方法

方法  描述  W3C
initMouseEvent()    初始化鼠标事件对象的值 2
initKeyboardEvent() 初始化键盘事件对象的值 3

JavaScript HTML DOM 元素(节点)
创建新的 HTML 元素
创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
实例

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

例子解析：
这段代码创建新的

元素：

var para=document.createElement("p");

如需向 p 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
var node=document.createTextNode(“This is a new paragraph.”);
然后您必须向 p元素追加这个文本节点：

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：

var element=document.getElementById("div1");

以下代码在已存在的元素后添加新元素：

element.appendChild(para);

删除已有的 HTML 元素
这段代码向这个已有的元素追加新元素：
实例

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

实例解析
这个 HTML 文档含有拥有两个子节点（两个

元素）的

元素：

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

找到 id=”div1” 的元素：

var parent=document.getElementById("div1");

找到 id=”p1” 的 p元素：

var child=document.getElementById("p1");

从父元素中删除子元素：

parent.removeChild(child);

如果能够在不引用父元素的情况下删除某个元素，就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

HTML DOM 教程
在我们的 JavaScript 教程的 HTML DOM 部分，您已经学到了：
如何改变 HTML 元素的内容 (innerHTML)
如何改变 HTML 元素的样式 (CSS)
如何对 HTML DOM 事件作出反应
如何添加或删除 HTML 元素
如果您希望学到更多有关使用 JavaScript 访问 HTML DOM 的知识，请访问我们完整的 HTML DOM 教程。

JavaScript 和 HTML DOM 参考手册
所有内置的JavaScript对象
所有浏览器对象
所有HTML DOM对象
JavaScript Objects 参考手册
参考手册描述了每个对象的属性和方法，并提供了在线实例。
Array 对象

Array 对象
Array 对象用于在变量中存储多个值:
var cars = [“Saab”, “Volvo”, “BMW”];
第一个数组元素的索引值为 0，第二个索引值为 1，以此类推。
更多有关JavaScript Array参考手册请参考 JavaScript Array 对象手册。
Array 对象属性

方法  描述
concat()    连接两个或更多的数组，并返回结果。
every() 检测数值元素的每个元素是否都符合条件。
filter()    检测数值元素，并返回符合条件所有元素的数组。
indexOf()   搜索数组中的元素，并返回它所在的位置。
join()  把数组的所有元素放入一个字符串。
lastIndexOf()   返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
map()   通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()   删除数组的最后一个元素并返回删除的元素。
push()  向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()   反转数组的元素顺序。
shift() 删除并返回数组的第一个元素。
slice() 选取数组的的一部分，并返回一个新数组。
some()  检测数组元素中是否有元素符合指定条件。
sort()  对数组的元素进行排序。
splice()    从数组中添加或删除元素。
toString()  把数组转换为字符串，并返回结果。
unshift()   向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()   返回数组对象的原始值。

Boolean 对象

Boolean 对象
Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false).
Boolean 对象完整教程, 请访问 JavaScript Boolean 对象教程。
Boolean 对象属性

属性  描述
constructor 返回对创建此对象的 Boolean 函数的引用
prototype   使您有能力向对象添加属性和方法。
Boolean 对象方法
方法  描述
toString()  把布尔值转换为字符串，并返回结果。
valueOf()   返回 Boolean 对象的原始值。

**重点内容**Date 对象

Date 对象用于处理日期与实际。
创建 Date 对象： new Date().
以上四种方法同样可以创建 Date 对象：

var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

更完整的日期与实际教程请参照 JavaScript Date 对象教程。
Date 对象属性

属性  描述
constructor 返回对创建此对象的 Date 函数的引用。
prototype   使您有能力向对象添加属性和方法。
Date 对象方法
方法  描述
getDate()   从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()    从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()   从 Date 对象以四位数字返回年份。
getHours()  返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()   返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()    返回 Date 对象的分钟 (0 ~ 59)。
getMonth()  从 Date 对象返回月份 (0 ~ 11)。
getSeconds()    返回 Date 对象的秒数 (0 ~ 59)。
getTime()   返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()    根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCFullYear()    根据世界时从 Date 对象返回四位数的年份。
getUTCHours()   根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMilliseconds()    根据世界时返回 Date 对象的毫秒(0 ~ 999)。
getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCMonth()   根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getYear()   已废弃。 请使用 getFullYear() 方法代替。
parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()   设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()   设置 Date 对象中的年份（四位数字）。
setHours()  设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds()   设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes()    设置 Date 对象中的分钟 (0 ~ 59)。
setMonth()  设置 Date 对象中月份 (0 ~ 11)。
setSeconds()    设置 Date 对象中的秒钟 (0 ~ 59)。
setTime()   setTime() 方法以毫秒设置 Date 对象。
setUTCDate()    根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCFullYear()    根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()   根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMilliseconds()    根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCMonth()   根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCSeconds() setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
setYear()   已废弃。请使用 setFullYear() 方法代替。
toDateString()  把 Date 对象的日期部分转换为字符串。
toGMTString()   已废弃。请使用 toUTCString() 方法代替。
toISOString()   使用 ISO 标准返回字符串的日期格式。
toJSON()    以 JSON 数据格式返回日期字符串。
toLocaleDateString()    根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString()    根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString()    据本地时间格式，把 Date 对象转换为字符串。
toString()  把 Date 对象转换为字符串。
toTimeString()  把 Date 对象的时间部分转换为字符串。
toUTCString()   根据世界时，把 Date 对象转换为字符串。
UTC()   根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf()   返回 Date 对象的原始值。

Math 对象

Math 对象用于执行数学任务。
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。
语法

var x = Math.PI; // 返回PI
var y = Math.sqrt(16); // 返回16的平方根

Math 对象教程，请参照本站的JavaScript Math 对象教程。
Math 对象属性

属性  描述
E   返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2 返回 2 的自然对数（约等于0.693）。
LN10    返回 10 的自然对数（约等于2.302）。
LOG2E   返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E  返回以 10 为底的 e 的对数（约等于0.434）。
PI  返回圆周率（约等于3.14159）。
SQRT1_2 返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2   返回 2 的平方根（约等于 1.414）。

Math 对象方法

方法  描述
abs(x)  返回 x 的绝对值。
acos(x) 返回 x 的反余弦值。
asin(x) 返回 x 的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)  返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x) 对数进行上舍入。
cos(x)  返回数的余弦。
exp(x)  返回 Ex 的指数。
floor(x)    对 x 进行下舍入。
log(x)  返回数的自然对数（底为e）。
max(x,y,z,...,n)    返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n)    返回 x,y,z,...,n中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)  返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x)  返回角的正切。

Number 对象

Number 对象是原始数值的包装对象。
Number 创建方式 new Number()。
语法
var num = new Number(value);
注意：如果一个参数值不能转换为一个数字将返回 NaN (非数字值)。
Number 对象属性

属性  描述
constructor 返回对创建此对象的 Number 函数的引用。
MAX_VALUE   可表示的最大的数。
MIN_VALUE   可表示的最小的数。
NEGATIVE_INFINITY   负无穷大，溢出时返回该值。
NaN 非数字值。
POSITIVE_INFINITY   正无穷大，溢出时返回该值。
prototype   允许您有能力向对象添加属性和方法。
Number 对象方法
方法  描述
toExponential(x)    把对象的值转换为指数计数法。
toFixed(x)  把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision(x)  把数字格式化为指定的长度。
toString()  把数字转换为字符串，使用指定的基数。
valueOf()   返回一个 Number 对象的基本数字值。

String 对象

String 对象用于处理文本（字符串）。
String 对象创建方法： new String().
语法
var txt = new String(“string”);
或者更简单方式：
var txt = “string”;
了解 String 对象教程，请查看 JavaScript String 对象教程。
String 对象属性

属性  描述
constructor 对创建该对象的函数的引用
length  字符串的长度
prototype   允许您向对象添加属性和方法
String 对象方法
方法  描述
charAt()    返回在指定位置的字符。
charCodeAt()    返回在指定的位置的字符的 Unicode 编码。
concat()    连接两个或更多字符串，并返回新的字符串。
fromCharCode()  将 Unicode 编码转为字符。
indexOf()   返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf()   从后向前搜索字符串。
match() 查找找到一个或多个正则表达式的匹配。
replace()   在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串。
search()    查找与正则表达式相匹配的值。
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
split() 把字符串分割为字符串数组。
substr()    从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
toLowerCase()   把字符串转换为小写。
toUpperCase()   把字符串转换为大写。
trim()  去除字符串两边的空白
valueOf()   返回某个字符串对象的原始值。
String HTML 包装方法
HTML 包装方法返回加入了适当HTML标签的字符串。
方法  描述
anchor()    创建 HTML 锚。
big()   用大号字体显示字符串。
blink() 显示闪动字符串。
bold()  使用粗体显示字符串。
fixed() 以打字机文本显示字符串。
fontcolor() 使用指定的颜色来显示字符串。
fontsize()  使用指定的尺寸来显示字符串。
italics()   使用斜体显示字符串。
link()  将字符串显示为链接。
small() 使用小字号来显示字符串。
strike()    使用小字号来显示字符串。
sub()   把字符串显示为下标。
sup()   把字符串显示为上标。

RegExp 对象

正则表达式是描述字符模式的对象。
正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
语法
var patt=new RegExp(pattern,modifiers);

或者更简单的方式:

var patt=/pattern/modifiers;
pattern（模式）描述了表达式的模式
modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配
注意：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。比如，以下是等价的：
var re = new RegExp(“\w+”);
var re = /\w+/;
更多关于 RegExp 对象请阅读我们的 JavaScript RegExp 对象教程。
修饰符
修饰符用于执行区分大小写和全局匹配:

修饰符 描述
i   执行对大小写不敏感的匹配。
g   执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m   执行多行匹配。

方括号
方括号用于查找某个范围内的字符：

表达式 描述
[abc]   查找方括号之间的任何字符。
[^abc]  查找任何不在方括号之间的字符。
[0-9]   查找任何从 0 至 9 的数字。
[a-z]   查找任何从小写 a 到小写 z 的字符。
[A-Z]   查找任何从大写 A 到大写 Z 的字符。
[A-z]   查找任何从大写 A 到小写 z 的字符。
[adgk]  查找给定集合内的任何字符。
[^adgk] 查找给定集合外的任何字符。
(red|blue|green)    查找任何指定的选项。

元字符
元字符（Metacharacter）是拥有特殊含义的字符：

元字符 描述
.   查找单个字符，除了换行和行结束符。
\w  查找单词字符。
\W  查找非单词字符。
\d  查找数字。
\D  查找非数字字符。
\s  查找空白字符。
\S  查找非空白字符。
\b  匹配单词边界。
\B  匹配非单词边界。
\0  查找 NUL 字符。
\n  查找换行符。
\f  查找换页符。
\r  查找回车符。
\t  查找制表符。
\v  查找垂直制表符。
\xxx    查找以八进制数 xxx 规定的字符。
\xdd    查找以十六进制数 dd 规定的字符。
\uxxxx  查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词  描述
n+  匹配任何包含至少一个 n 的字符串。
n*  匹配任何包含零个或多个 n 的字符串。
n?  匹配任何包含零个或一个 n 的字符串。
n{X}    匹配包含 X 个 n 的序列的字符串。
n{X,Y}  匹配包含 X 或 Y 个 n 的序列的字符串。
n{X,}   匹配包含至少 X 个 n 的序列的字符串。
n$ 匹配任何结尾为 n 的字符串。
^n  匹配任何开头为 n 的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象方法

方法  描述  FF  IE
compile 编译正则表达式。    1   4
exec    检索字符串中指定的值。返回找到的值，并确定其位置。   1   4
test    检索字符串中指定的值。返回 true 或 false。 1   4
支持正则表达式的 String 对象的方法
方法  描述  FF  IE
search  检索与正则表达式相匹配的值。  1   4
match   找到一个或多个正则表达式的匹配。    1   4
replace 替换与正则表达式匹配的子串。  1   4
split   把字符串分割为字符串数组。   1   4

全局属性和函数

JavaScript 全局属性和方法可用于创建Javascript对象。
JavaScript 全局属性

属性  描述
Infinity    代表正的无穷大的数值。
NaN 指示某个值是不是数字值。
undefined   指示未定义的值。
JavaScript 全局函数

函数  描述
decodeURI() 解码某个编码的 URI。
decodeURIComponent()    解码一个编码的 URI 组件。
encodeURI() 把字符串编码为 URI。
encodeURIComponent()    把字符串编码为 URI 组件。
escape()    对字符串进行编码。
eval()  计算 JavaScript 字符串，并把它作为脚本代码来执行。
isFinite()  检查某个值是否为有穷大的数。
isNaN() 检查某个值是否是数字。
Number()    把对象的值转换为数字。
parseFloat()    解析一个字符串并返回一个浮点数。
parseInt()  解析一个字符串并返回一个整数。
String()    把对象的值转换为字符串。
unescape()  对由 escape() 编码的字符串进行解码。

Browser Objects 参考手册
参考手册描述了每个对象的属性和方法，并提供了在线实例。

Window 对象
Window 对象表示浏览器中打开的窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
Note注意：没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。
Window 对象属性

属性  描述
closed  返回窗口是否已被关闭。
defaultStatus   设置或返回窗口状态栏中的默认文本。
document    对 Document 对象的只读引用。(请参阅对象)
frames  返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。
history 对 History 对象的只读引用。请参数 History 对象。
innerHeight 返回窗口的文档显示区的高度。
innerWidth  返回窗口的文档显示区的宽度。
length  设置或返回窗口中的框架数量。
location    用于窗口或框架的 Location 对象。请参阅 Location 对象。
name    设置或返回窗口的名称。
navigator   对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener  返回对创建此窗口的窗口的引用。
outerHeight 返回窗口的外部高度，包含工具条与滚动条。
outerWidth  返回窗口的外部宽度，包含工具条与滚动条。
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent  返回父窗口。
screen  对 Screen 对象的只读引用。请参数 Screen 对象。
screenLeft  返回相对于屏幕窗口的x座标
screenTop   返回相对于屏幕窗口的y座标
screenX 返回相对于屏幕窗口的x座标
screenY 返回相对于屏幕窗口的y座标
self    返回对当前窗口的引用。等价于 Window 属性。
status  设置窗口状态栏的文本。
top 返回最顶层的父窗口。

Window 对象方法

方法  描述
alert() 显示带有一段消息和一个确认按钮的警告框。
blur()  把键盘焦点从顶层窗口移开。
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout()  取消由 setTimeout() 方法设置的 timeout。
close() 关闭浏览器窗口。
confirm()   显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()   创建一个 pop-up 窗口。
focus() 把键盘焦点给予一个窗口。
moveBy()    可相对窗口的当前座标把它移动指定的像素。
moveTo()    把窗口的左上角移动到一个指定的座标。
open()  打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
prompt()    显示可提示用户输入的对话框。
resizeBy()  按照指定的像素调整窗口的大小。
resizeTo()  把窗口的大小调整到指定的宽度和高度。
scroll()     
scrollBy()  按照指定的像素值来滚动内容。
scrollTo()  把内容滚动到指定的座标。
setInterval()   按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()    在指定的毫秒数后调用函数或计算表达式。

Navigator 对象

Navigator 对象
Navigator 对象包含有关浏览器的信息。
Note注意：没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。
Navigator 对象属性

属性  说明
appCodeName 返回浏览器的代码名
appName 返回浏览器的名称
appVersion  返回浏览器的平台和版本信息
cookieEnabled   返回指明浏览器中是否启用 cookie 的布尔值
platform    返回运行浏览器的操作系统平台
userAgent   返回由客户机发送服务器的user-agent 头部的值

Navigator 对象方法

方法  描述
javaEnabled()   指定是否在浏览器中启用Java
taintEnabled()  规定浏览器是否启用数据污点(data tainting)

Screen 对象

Screen 对象
Screen 对象包含有关客户端显示屏幕的信息。
Note注意：没有应用于 screen 对象的公开标准，不过所有浏览器都支持该对象。
Screen 对象属性

属性  说明
availHeight 返回屏幕的高度（不包括Windows任务栏）
availWidth  返回屏幕的宽度（不包括Windows任务栏）
colorDepth  返回目标设备或缓冲器上的调色板的比特深度
height  返回屏幕的总高度
pixelDepth  返回屏幕的颜色分辨率（每象素的位数）
width   返回屏幕的总宽度

History 对象

History 对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
Note注意：没有应用于History对象的公开标准，不过所有浏览器都支持该对象。
History 对象属性

属性  说明
length  返回历史列表中的网址数

History 对象方法

方法  说明
back()  加载 history 列表中的前一个 URL
forward()   加载 history 列表中的下一个 URL
go()    加载 history 列表中的某个具体页面

Location 对象

Location 对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。
Note注意：没有应用于Location对象的公开标准，不过所有浏览器都支持该对象。
Location 对象属性

属性  描述
hash    返回一个URL的锚部分
host    返回一个URL的主机名和端口
hostname    返回URL的主机名
href    返回完整的URL
pathname    返回的URL路径名。
port    返回一个URL服务器使用的端口号
protocol    返回一个URL协议
search  返回一个URL的查询部分

Location 对象方法

方法  说明
assign()    载入一个新的文档
reload()    重新载入当前文档
replace()   用新的文档替换当前文档

HTML DOM 参考手册
参考手册描述了 HTML DOM 的属性和方法，并提供在线实例。
HTML Document

HTML DOM 节点
在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:
文档是一个文档。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。are text nodes。
注释是注释节点。
Document 对象
当浏览器载入 HTML 文档, 它就会成为 document 对象。
document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
浏览器支持
Internet ExplorerFirefoxOperaGoogle ChromeSafari
所有主要浏览器都支持 Document 对象。
Document 对象属性和方法
HTML文档中可以使用以上属性和方法:
属性 / 方法描述
document.activeElement 返回当前获取焦点元素
document.addEventListener() 向文档添加句柄
document.adoptNode(node) 从另外一个文档返回 adapded 节点到当前文档。
document.anchors 返回对文档中所有 Anchor 对象的引用。
document.applets 返回对文档中所有 Applet 对象的引用。
document.baseURI 返回文档的绝对基础 URI
document.body 返回文档的body元素
document.close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。
document.cookie 设置或返回与当前文档有关的所有 cookie。
document.createAttribute() 创建一个属性节点
document.createComment() createComment() 方法可创建注释节点。
document.createDocumentFragment() 创建空的 DocumentFragment 对象，并返回此对象。
document.createElement() 创建元素节点。
document.createTextNode() 创建文本节点。
document.doctype 返回与文档相关的文档类型声明 (DTD)。
document.documentElement 返回文档的根节点
document.documentMode 返回用于通过浏览器渲染文档的模式
document.documentURI 设置或返回文档的位置
document.domain 返回当前文档的域名。
document.domConfig 返回normalizeDocument()被调用时所使用的配置
document.embeds 返回文档中所有嵌入的内容（embed）集合
document.forms 返回对文档中所有 Form 对象引用。
document. getElementsByClassName() 返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName() 返回带有指定名称的对象集合。
document.getElementsByTagName() 返回带有指定标签名的对象集合。
document.images 返回对文档中所有 Image 对象引用。
document.implementation 返回处理该文档的 DOMImplementation 对象。
document.importNode() 把一个节点从另一个文档复制到该文档以便应用。
document.inputEncoding 返回用于文档的编码方式（在解析时）。
document.lastModified 返回文档被最后修改的日期和时间。
document.links 返回对文档中所有 Area 和 Link 对象引用。
document.normalize() 删除空文本节点，并连接相邻节点
document.normalizeDocument() 删除空文本节点，并连接相邻节点的
document.open() 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.querySelector() 返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll() document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
document.readyState 返回文档状态 (载入中……)
document.referrer 返回载入当前文档的文档的 URL。
document.removeEventListener() 移除文档中的事件句柄(由 addEventListener() 方法添加)
document.renameNode() 重命名元素或者属性节点。
document.scripts 返回页面中所有脚本的集合。
document.strictErrorChecking 设置或返回是否强制进行错误检查。
document.title 返回当前文档的标题。
document.URL 返回文档完整的URL
document.write() 向文档写 HTML 表达式或 JavaScript 代码。
document.writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

警告 !!!
在 W3C DOM核心，文档对象继承节点对象的所有属性和方法。
很多属性和方法在文档中是没有意义的。
HTML 文档对象可以避免使用这些节点对象和属性：
属性 / 方法避免的原因
document.attributes 文档没有该属性
document.hasAttributes() 文档没有该属性
document.nextSibling 文档没有下一节点
document.nodeName 这个通常是 #document
document.nodeType 这个通常是 9(DOCUMENT_NODE)
document.nodeValue 文档没有一个节点值
document.ownerDocument 文档没有主文档
document.ownerElement 文档没有自己的节点
document.parentNode 文档没有父节点
document.previousSibling 文档没有兄弟节点
document.textContent 文档没有文本节点

HTML Element

HTML DOM 节点
在 HTML DOM (Document Object Model) 中, 每个东西都是节点 :
文档本身就是一个文档对象
所有 HTML 元素都是元素节点
所有 HTML 属性都是属性节点
插入到 HTML 元素文本是文本节点
注释是注释节点
元素对象
在 HTML DOM 中, 元素对象代表着一个 HTML 元素。
元素对象的子节点可以是, 可以是元素节点，文本节点，注释节点。
NodeList 对象代表了节点列表，类似于 HTML元素的子节点集合。
元素可以有属性。属性属于属性节点（查看下一章节）。
浏览器支持
Internet ExplorerFirefoxOperaGoogle ChromeSafari
所有主流浏览器都支持元素对象和 NodeList 对象。.
属性和方法
以上属性和方法可适用于所有 HTML 元素：

属性 / 方法 描述
element.accessKey   设置或返回accesskey一个元素
element.addEventListener()  向指定元素添加事件句柄
element.appendChild()   为元素添加一个新的子元素
element.attributes  返回一个元素的属性数组
element.childNodes  返回元素的一个子节点的数组
element.classlist   返回元素的类名，作为 DOMTokenList 对象。
element.className   设置或返回元素的class属性
element.clientHeight    在页面上返回内容的可视高度（不包括边框，边距或滚动条）
element.clientWidth 在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
element.cloneNode() 克隆某个元素
element.compareDocumentPosition()   比较两个元素的文档位置。
element.contentEditable 设置或返回元素的内容是否可编辑
element.dir 设置或返回一个元素中的文本方向
element.firstChild  返回元素的第一个子节点
element.focus() 设置文档或元素获取焦点
element.getAttribute()  返回指定元素的属性值
element.getAttributeNode()  返回指定属性节点
element.getElementsByTagName()  返回指定标签名的所有子元素集合。
element. getElementsByClassName()   返回文档中所有指定类名的元素集合，作为 NodeList 对象。
element.getFeature()    返回指定特征的执行APIs对象。
element.getUserData()   返回一个元素中关联键值的对象。
element.hasAttribute()  如果元素中存在指定的属性返回 true，否则返回false。
element.hasAttributes() 如果元素有任何属性返回ture，否则返回false。
element.hasChildNodes() 返回一个元素是否具有任何子元素
element.hasfocus()  返回布尔值，检测文档或元素是否获取焦点
element.id  设置或者返回元素的 id。
element.innerHTML   设置或者返回元素的内容。
element.insertBefore()  现有的子元素之前插入一个新的子元素
element.isContentEditable   如果元素内容可编辑返回 true，否则返回false
element.isDefaultNamespace()    如果指定了namespaceURI 返回 true，否则返回 false。
element.isEqualNode()   检查两个元素是否相等
element.isSameNode()    检查两个元素所有有相同节点。
element.isSupported()   如果在元素中支持指定特征返回 true。
element.lang    设置或者返回一个元素的语言。
element.lastChild   返回的最后一个子元素
element.namespaceURI    返回命名空间的 URI。
element.nextSibling 返回该元素紧跟的一个元素
element.nodeName    返回元素的标记名（大写）
element.nodeType    Returns the node type of an element
element.nodeValue   返回元素的类型
element.normalize() 使得此成为一个"normal"的形式，其中只有结构（如元素，注释，处理指令，CDATA节和实体引用）隔开Text节点，即元素（包括属性）下面的所有文本节点，既没有相邻的文本节点也没有空的文本节点
element.offsetHeight    返回，任何一个元素的高度包括边框和填充，但不是边距
element.offsetWidth 返回元素的宽度，包括边框和填充，但不是边距
element.offsetLeft  返回当前元素的相对水平偏移位置的偏移容器
element.offsetParent    返回元素的偏移容器
element.offsetTop   返回当前元素的相对垂直偏移位置的偏移容器
element.ownerDocument   返回元素的根元素（文档对象）
element.parentNode  返回元素的父节点
element.previousSibling 返回某个元素紧接之前元素
element.querySelector() 返回匹配指定 CSS 选择器元素的第一个子元素
document.querySelectorAll() 返回匹配指定 CSS 选择器元素的所有子元素节点列表
element.removeAttribute()   从元素中删除指定的属性
element.removeAttributeNode()   删除指定属性节点并返回移除后的节点。
element.removeChild()   删除一个子元素
element.removeEventListener()   移除由 addEventListener() 方法添加的事件句柄
element.replaceChild()  替换一个子元素
element.scrollHeight    返回整个元素的高度（包括带滚动条的隐蔽的地方）
element.scrollLeft  返回当前视图中的实际元素的左边缘和左边缘之间的距离
element.scrollTop   返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
element.scrollWidth 返回元素的整个宽度（包括带滚动条的隐蔽的地方）
element.setAttribute()  设置或者改变指定属性并指定值。
element.setAttributeNode()  设置或者改变指定属性节点。
element.setIdAttribute()    
element.setIdAttributeNode()    
element.setUserData()   在元素中为指定键值关联对象。
element.style   设置或返回元素的样式属性
element.tabIndex    设置或返回元素的标签顺序。
element.tagName 作为一个字符串返回某个元素的标记名（大写）
element.textContent 设置或返回一个节点和它的文本内容
element.title   设置或返回元素的title属性
element.toString()  一个元素转换成字符串

nodelist.item() 返回某个元素基于文档树的索引
nodelist.length 返回节点列表的节点数目。

HTML Attributes

Attr 对象
在 HTML DOM 中, Attr 对象代表一个 HTML 属性。
HTML属性总是属于HTML元素。
NamedNodeMap 对象
在 HTML DOM 中, the NamedNodeMap 对象表示一个无顺序的节点列表。
我们可通过节点名称来访问 NamedNodeMap 中的节点。
浏览器支持
Internet ExplorerFirefoxOperaGoogle ChromeSafari
所有主流浏览器都支持 Attr 对象和 NamedNodeMap 对象。

属性 / 方法 描述
attr.isId   Returns true if the attribute is of type Id, otherwise it returns false
attr.name   返回属性名称
attr.value  设置或者返回属性值
attr.specified  如果属性被指定返回 true ，否则返回 false

nodemap.getNamedItem()  从节点列表中返回的指定属性节点。Returns a specified attribute node from a NamedNodeMap.
nodemap.item()  返回节点列表中处于指定索引号的节点。
nodemap.length  返回节点列表的节点数目。
nodemap.removeNamedItem()   删除指定属性节点
nodemap.setNamedItem()  设置指定属性节点(通过名称)

DOM 4 警告 !!!
在 W3C DOM 内核中, Attr (属性) 对象继承节点对象的所有属性和方法。
在 DOM 4 中, Attr (属性) 对象不再从节点对象中继承。
从长远的代码质量来考虑，在属性对象中你需要避免使用节点对象属性和方法:

属性 / 方法 避免原因
attr.appendChild()  属性没有子节点
attr.attributes 属性没有属性
attr.baseURI    使用 document.baseURI 替代
attr.childNodes 属性没有子节点
attr.cloneNode()    使用 attr.value 替代
attr.firstChild 属性没有子节点
attr.hasAttributes()    属性没有属性Attributes don't have attributes
attr.hasChildNodes  属性没有子节点Attributes don't have child nodes
attr.insertBefore() 属性没有子节点
attr.isEqualNode()  没有意义
attr.isSameNode()   没有意义
attr.isSupported()  通常为 true
attr.lastChild  属性没有子节点
attr.nextSibling    属性没有兄弟节点
attr.nodeName   使用 attr.name 替代
attr.nodeType   通常为 2 (ATTRIBUTE-NODE)
attr.nodeValue  使用 attr.value 替代
attr.normalize()    属性没有规范
attr.ownerDocument  通常为你的 HTML 文档
attr.ownerElement   你用来访问属性的 HTML 元素
attr.parentNode 你用来访问属性的 HTML 元素
attr.previousSibling    属性没有兄弟节点
attr.removeChild    属性没有子节点
attr.replaceChild   属性没有子节点
attr.textContent    使用 attr.value 替代

HTML Events**重点内容**

HTML DOM 事件
DOM：指明使用的 DOM 属性级别。
鼠标事件

属性  描述  DOM
onclick 当用户点击某个对象时调用的事件句柄。  2
oncontextmenu   在用户点击鼠标右键打开上下文菜单时触发  
ondblclick  当用户双击某个对象时调用的事件句柄。  2
onmousedown 鼠标按钮被按下。    2
onmouseenter    当鼠标指针移动到元素上时触发。 2
onmouseleave    当鼠标指针移出元素时触发    2
onmousemove 鼠标被移动。  2
onmouseover 鼠标移到某元素之上。  2
onmouseout  鼠标从某元素移开。   2
onmouseup   鼠标按键被松开。    2

键盘事件

属性  描述  DOM
onkeydown   某个键盘按键被按下。  2
onkeypress  某个键盘按键被按下并松开。   2
onkeyup 某个键盘按键被松开。  2

框架/对象（Frame/Object）事件

属性  描述  DOM
onabort 图像的加载被中断。 ( <object>)   2
onbeforeunload  该事件在即将离开页面（刷新或关闭）时触发    2
onerror 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)   
onhashchange    该事件在当前 URL 的锚部分发生修改时触发。  
onload  一张页面或一幅图像完成加载。  2
onpageshow  该事件在用户访问页面时触发   
onpagehide  该事件在用户离开当前网页跳转到另外一个页面时触发    
onresize    窗口或框架被重新调整大小。   2
onscroll    当文档被滚动时发生的事件。   2
onunload    用户退出页面。 ( <body> 和 <frameset>)  2

表单事件
属性描述 DOM

onblur  元素失去焦点时触发   2
onchange    该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)    2
onfocus 元素获取焦点时触发   2
onfocusin   元素即将获取焦点是触发 2
onfocusout  元素即将失去焦点是触发 2
oninput 元素获取用户输入是触发 3
onreset 表单重置时触发 2
onsearch    用户向搜索域输入文本时触发 ( <input="search">)    
onselect    用户选取文本时触发 ( <input> 和 <textarea>)   2
onsubmit    表单提交时触发 2

剪贴板事件

属性  描述  DOM
oncopy  该事件在用户拷贝元素内容时触发  
oncut   该事件在用户剪切元素内容时触发  
onpaste 该事件在用户粘贴元素内容时触发

打印事件

属性  描述  DOM
onafterprint    该事件在页面已经开始打印，或者打印窗口已经关闭时触发   
onbeforeprint   该事件在页面即将开始打印时触发

拖动事件

事件  描述  DOM
ondrag  该事件在元素正在拖动时触发    
ondragend   该事件在用户完成元素的拖动时触发     
ondragenter 该事件在拖动的元素进入放置目标时触发   
ondragleave 该事件在拖动元素离开放置目标时触发    
ondragover  该事件在拖动元素在放置目标上时触发    
ondragstart 该事件在用户开始拖动元素时触发  
ondrop  该事件在拖动元素放置在目标区域时触发

多媒体（Media）事件

事件  描述  DOM
onabort 事件在视频/音频（audio/video）终止加载时触发。    
oncanplay   事件在用户可以开始播放视频/音频（audio/video）时触发。    
oncanplaythrough    事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。  
ondurationchange    事件在视频/音频（audio/video）的时长发生变化时触发。     
onemptied   The event occurs when the current playlist is empty  
onended 事件在视频/音频（audio/video）播放结束时触发。    
onerror 事件在视频/音频（audio/video）数据加载期间发生错误时触发。  
onloadeddata    事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。  
onloadedmetadata    事件在指定视频/音频（audio/video）的元数据加载后触发。    
onloadstart 事件在浏览器开始寻找指定视频/音频（audio/video）触发。    
onpause 事件在视频/音频（audio/video）暂停时触发。  
onplay  事件在视频/音频（audio/video）开始播放时触发。    
onplaying   事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。    
onprogress  事件在浏览器下载指定的视频/音频（audio/video）时触发。    
onratechange    事件在视频/音频（audio/video）的播放速度发送改变时触发。   
onseeked    事件在用户重新定位视频/音频（audio/video）的播放位置后触发。     
onseeking   事件在用户开始重新定位视频/音频（audio/video）时触发。    
onstalled   事件在浏览器获取媒体数据，但媒体数据不可用时触发。    
onsuspend   事件在浏览器读取媒体数据中止时触发。   
ontimeupdate    事件在当前的播放位置发送改变时触发。   
onvolumechange  事件在音量发生改变时触发。    
onwaiting   事件在视频由于要播放下一帧而需要缓冲时触发。

动画事件

事件  描述  DOM
animationend    该事件在 CSS 动画结束播放时触发   
animationiteration  该事件在 CSS 动画重复播放时触发   
animationstart  该事件在 CSS 动画开始播放时触发

过渡事件

事件  描述  DOM
transitionend   该事件在 CSS 完成过渡后触发。

其他事件

事件  描述  DOM
onmessage   该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发   
onmousewheel    已废弃。 使用 onwheel 事件替代     
ononline    该事件在浏览器开始在线工作时触发。    
onoffline   该事件在浏览器开始离线工作时触发。    
onpopstate  该事件在窗口的浏览历史（history 对象）发生改变时触发。 event occurs when the window's history changes   
onshow  该事件当 <menu> 元素在上下文菜单显示时触发    
onstorage   该事件在 Web Storage(HTML 5 Web 存储)更新时触发     
ontoggle    该事件在用户打开或关闭 <details> 元素时触发  
onwheel 该事件在鼠标滚轮在元素上下滚动时触发

事件对象
常量

静态变量    描述  DOM
CAPTURING-PHASE 当前事件阶段为捕获阶段(3)  1
AT-TARGET   当前事件是目标阶段,在评估目标事件(1)    2
BUBBLING-PHASE  当前的事件为冒泡阶段 (2)  3

属性

属性  描述  DOM
bubbles 返回布尔值，指示事件是否是起泡事件类型。    2
cancelable  返回布尔值，指示事件是否可拥可取消的默认动作。 2
currentTarget   返回其事件监听器触发该事件的元素。   2
eventPhase  返回事件传播的当前阶段。    2
target  返回触发此事件的元素（事件的目标节点）。    2
timeStamp   返回事件生成的日期和时间。   2
type    返回当前 Event 对象表示的事件的名称。  2

方法

方法  描述  DOM
initEvent() 初始化新创建的 Event 对象的属性。    2
preventDefault()    通知浏览器不要执行与事件关联的默认动作。    2
stopPropagation()   不再派发事件。 2

目标事件对象
方法

方法  描述  DOM
addEventListener()  允许在目标事件中注册监听事件(IE8 = attachEvent()) 2
dispatchEvent() 允许发送事件到监听器上 (IE8 = fireEvent()) 2
removeEventListener()   运行一次注册在事件目标上的监听事件(IE8 = detachEvent())  2

事件监听对象
方法

方法  描述  DOM
handleEvent()   把任意对象注册为事件处理程序  2

文档事件对象
方法

方法  描述  DOM
createEvent()       2

鼠标/键盘事件对象
属性

属性  描述  DOM
altKey  返回当事件被触发时，"ALT" 是否被按下。  2
button  返回当事件被触发时，哪个鼠标按钮被点击。    2
clientX 返回当事件被触发时，鼠标指针的水平座标。    2
clientY 返回当事件被触发时，鼠标指针的垂直座标。    2
ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。    2
Location    返回按键在设备上的位置 3
charCode    返回onkeypress事件触发键值的字母代码。    2
key 在按下按键时返回按键的标识符。 3
keyCode 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。   2
which   返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。   2
metaKey 返回当事件被触发时，"meta" 键是否被按下。    2
relatedTarget   返回与事件的目标节点相关的节点。    2
screenX 返回当某个事件被触发时，鼠标指针的水平座标。  2
screenY 返回当某个事件被触发时，鼠标指针的垂直座标。  2
shiftKey    返回当事件被触发时，"SHIFT" 键是否被按下。   2

方法

方法  描述  W3C
initMouseEvent()    初始化鼠标事件对象的值 2
initKeyboardEvent() 初始化键盘事件对象的值 3

HTML DOM Element Objects 参考手册
参考手册描述了每个对象的属性和方法，并提供了在线实例。
Anchor 对象
Area 对象
Base 对象
Body 对象
Button 对象
Form 对象
Frame/IFrame 对象
Frameset 对象
Image 对象
Input Button 对象
Input Checkbox 对象
Input File 对象
Input Hidden 对象
Input Password 对象
Input Radio 对象
Input Reset 对象
Input Submit 对象
Input Text 对象
Link 对象
Meta 对象
Object 对象
Option 对象
Select 对象
Style 对象
Table 对象
td / th 对象
tr 对象
Textarea 对象

以上内容均分享自这里，次网站内容很详细，这里我把重点的一些内容整合在一个页面，方便自己或者大家查阅

初识JavaScript及DOM

TCP連接通信過程及網絡管理

H5新春賀卡之筆記

數據庫管理視圖:查看視圖定義

初識Linux-系統安裝，系統信息查看，馬哥初印象

文本編輯器專輯之—Vim

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結