2js组成
我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。
1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]
2. BOM 是 各个浏览器厂商根据 DOM
在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
3. window 是 BOM 对象，而非 js 对象；
DOM（文档对象模型）是 HTML 和XML 的应用程序接口（API）。
BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：
1.弹出新的浏览器窗口
2.移动、关闭浏览器窗口以及调整窗口大小
3.提供 Web 浏览器详细信息的定位对象
4.提供用户屏幕分辨率详细信息的屏幕对象
5.对 cookie 的支持
6.IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象
javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。
其中DOM包含：window
1.Window对象包含属性：document、location、navigator、screen、history、frames
2.Document根节点包含子节点：forms、location、anchors、images、links
从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。
区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。
认识DOM
先来看看下面代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>DOM</title>
</head>
<body>
<h2><ahref="http://www.baidu.com">javascript DOM</a></h2>
<p>对HTML元素进行操作，可添加、改变或移除css样式等</p>
<ul>
<li>Javascript</li>
<li>DOM</li>
<li>CSS</li>
</ul>
</body>
</html>
将HTML代码分解为DOM节点层次图:
**HTML文档可以说由节点构成的集合，DOM节点有:**
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如标签的链接属性href="http://www.baidu.com"。
节点属性节点属性nodeName返回一个字符串，其内容是节点的名字nodeType返回一个整数，这个数值代表给定节点的类型nodeValue返回给定节点的当前值
遍历节点树遍历节点树childNodes返回一个数组，这个数组由给定元素的子节点构成firstChild返回第一个子节点lastChild返回最后一个子节点parentNode返回一个给定节点的父节点nextSibling返回给定节点的下一个子节点previousSibling返回给定节点的上一个子节点
DOM操作DOM操作creatElement(element)创建一个新的元素节点creatTextNode()创建一个包含给定文本的新文本节点appendChild()指定节点的最后一个节点列表后添加一个新的子节insertBefore()将一个给定节点插入到一个给定元素节点的给定子节点的前面removeChild()从一个给定元素中删除子节点replaceChild()把一个给定父元素里的一个子节点替换为另外一个节点
DOM通过创建树来表示文档，描述了处理网页内容的方法和接口，从而使开发者对文档的内容和结构具有空前的控制力，用DOM API可以轻松地删除、添加和替换节点。
1. 访问节点
varoHtml = document.documentElement;`//返回存在于 XML 以及 HTML 文档中的文档根节点，oHtml包含了一个表示<html />的HTMLElement对象
`document.body` //是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问</span><span></span></span>
`document.getElementById("ID")`//通过指定的 ID 来返回元素，getElementById() 无法工作在 XML 中，IE6还会返回name为指定ID的元素
`document.getElementByName("name")`//获取所有name特性等于指定值的元素，不过在IE6和Opera7.5上还会返回id为给定名称的元素且仅检查<input/>和<img/>
`varx=document.getElementsByTagName("p");`//使用指定的标签名返回所有的元素列表NodeList，索引号从0开始。当参数是一个星号的时候，IE6并不返回所有的元素，必须用document.all来替代
2. Node节点的特性和方法
1.firstChild //Node，指向在childNodes列表中的第一个节点
2.lastChild //Node，指向在childNodes列表中的最后一个节点
3.parentNode //Node，指向父节
4.ownerDocument //Document，指向这个节点所属的文档
5.firstChild //Node，指向在childNodes列表中的第一个节点
6.lastChild //Node，指向在childNodes列表中的最后一个节点
7.parentNode //Node，指向父节点
8.childNodes //NodeList，所有子节点的列表
9.previousSibling /Node，/指向前一个兄弟节点：如果这个节点就是第一个节点，那么该值为null
10.`nextSibling` //Node，指向后一个兄弟节点：如果这个节点就是最后一个节点，那么该值为null
11.`hasChildNodes()` //Boolean，当childNodes包含一个或多个节点时，返回真值
3.DOM事件
1.DOM同时两种事件模型：冒泡型事件和捕获型事件
2.冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标的顺序触发
3.<body οnclick="handleClick()">
<div οnclick="handleClick()">Click Me</div>
</body>
4.触发的顺序是：div、body、html(IE 6.0和Mozilla 1.0)、document、window(Mozilla 1.0)
5.捕获型事件：与冒泡事件相反的过程，事件从最不精确的对象开始触发，然后到最精确
6.上面例子触发的顺序是：document、div
7.DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。
4.事件处理函数/监听函数
**事件处理函数/监听函数**
在JavaScript中：
var oDiv = document.getElementById("div1");
oDiv.onclick = function(){ //onclick只能用小写，默认为冒泡型事件
alert("Clicked!");
}
在HTML中：
<div οnclick="javascript: alert("Clicked!")"></div> //onclick大小写任意
IE事件处理程序attachEvent()和detachEvent()
在IE中，每个元素和window对象都有两个方法：attachEvent()和detachEvent()，这两个方法接受两个相同的参数，事件处理程序名称和事件处理程序函数，如：
[object].attachEvent("name_of_event_handler","function_to_attach")
[object].detachEvent("name_of_event_handler","function_to_remove")
var fnClick = function(){
alert("Clicked!");
}
oDiv.attachEvent("onclick", fnClick);//添加事件处理函数
oDiv.attachEvent("onclick", fnClickAnother);// 可以添加多个事件处理函数
oDiv.detachEvent("onclick", fnClick);//移除事件处理函数
在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window。
跨浏览器的事件处理程序
addHandler()和removeHandler()
addHandler()方法属于一个叫EventUntil()的对象，这两个方法均接受三个相同的参数，要操作的元素，事件名称和事件处理程序函数。
事件类型
**事件类型**
鼠标事件：click、dbclick、mousedown、mouseup、mouseover、mouseout、mousemove
键盘事件：keydown、keypress、keyup
HTML事件：load、unload、abort、error、select、change、submit、reset、
resize、scroll、focus、blur
事件处理器
执行JavaScript 代码的程序在事件发生时会对事件做出响应。为了响应一个特定事件
而被执行的代码称为事件处理器。
在HTML标签中使用事件处理器的语法是：
<HTML标签 事件处理器="JavaScript代码''>
事件处理程序
事件就是用户或浏览器自身执行的某种动作。比如click,mouseup,keydown,mouseover等都是事件的名字。而响应某个事件的函数就叫事件处理程序（事件监听器），事件处理程序以on开头，因此click的事件处理程序就是onclick
DOM 0级事件处理程序
DOM 0级事件处理程序：把一个函数赋值给一个事件的处理程序属性
<input type="button"value="按钮2"id="ben2"/>
varbtn2=document.getElementById('btn2');获得btn2按钮对象
btn2.onclick //给btn2添加onclick属性，属性又触发了一个事件处理程序
btn2.οnclick=function(){
} //添加匿名函数
btn2.οnclick=null//删除onclick属性
如何阻止冒泡？
阻止冒泡有以下方法：
e.cancelBubble=true;
e.stopPropagation();
returnfalse;
innerText、innerHTML、outerHTML、outerText
innerText、innerHTML、outerHTML、outerTextinnerText: 表示起始标签和结束标签之间的文本innerHTML: 表示元素的所有元素和文本的HTML代码如：<div><b>Hello</b> world</div>的innerText为Hello world，innerHTML为Hello worldouterText: 与前者的区别是替换的是整个目标节点，问题返回和innerText一样的内容outerHTML: 与前者的区别是替换的是整个目标节点，返回元素完整的HTML代码，包括元素本身
DOM 2级事件处理程序
DOM 2级事件定义了两个方法，用于指定和删除事件处理程序的操作。addEventListener()和removeEventListener()
addEventListener()和removeEventListener()
在DOM中，addEventListener()和removeEventListener()用来分配和移除事件处理函数，与IE不同的是，这些方法需要三个参数：事件名称，要分配的函数和处理函数是用于冒泡阶段(false)还是捕获阶段(true)，默认为冒泡阶段false
[object].addEventListener("name_of_event",fnhander,bcapture)
[object].removeEventListener("name_of_event",fnhander,bcapture)
var fnClick = function(){
alert("Clicked!");
}oDiv.addEventListener("onclick", fnClick, false); //添加事件处理函数
oDiv.addEventListener("onclick", fnClickAnother, false); // 与IE一样，可以添加多个事件处理函数
oDiv.removeEventListener("onclick", fnClick, false); //移除事件处理函数
如果使用addEventListener()将事件处理函数加入到捕获阶段，则必须在removeEventListener()中指明是捕获阶段，才能正确地将这个事件处理函数删除
oDiv.onclick = fnClick;
oDiv.onclick = fnClickAnother; //使用直接赋值，后续的事件处理函数会覆盖前面的处理函数
oDiv.onclick = fnClick;
oDiv.addEventListener("onclick", fnClickAnother, false); //会按顺序进行调用，不会覆盖
更详细的XML DOM - Element 对象的属性和方法请访问w3cshool
BOM 部分
BOM的核心是window，而window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global对象。
window.close(); //关闭窗口
window.alert("message");//弹出一个具有OK按钮的系统消息框，显示指定的文本
window.confirm("Are you sure?");//弹出一个具有OK和Cancel按钮的询问对话框，返回一个布尔值
window.prompt("What's your name?","Default");//提示用户输入信息，接受两个参数，即要显示给用户的文本和文本框中的默认值，将文本框中的值作为函数值返回
window.status //可以使状态栏的文本暂时改变
window.defaultStatus//默认的状态栏信息，可在用户离开当前页面前一直改变文本
window.setTimeout("alert('xxx')", 1000);//设置在指定的毫秒数后执行指定的代码，接受2个参数，要执行的代码和等待的毫秒数
window.clearTimeout("ID");//取消还未执行的暂停，将暂停ID传递给它
window.setInterval(function, 1000);//无限次地每隔指定的时间段重复一次指定的代码，参数同setTimeout()一样
window.clearInterval("ID");//取消时间间隔，将间隔ID传递给它
window.history.go(-1);//访问浏览器窗口的历史，负数为后退，正数为前进
window.history.back();//同上
window.history.forward();//同上
window.history.length//可以查看历史中的页面数
基本属性
属性
描述
closed
返回窗口是否已被关闭。
defaultStatus
设置或返回窗口状态栏中的默认文本。
innerheight
返回窗口的文档显示区的高度。
innerwidth
返回窗口的文档显示区的宽度。
length
设置或返回窗口中的框架数量。
name
设置或返回窗口的名称。
opener
返回对创建此窗口的窗口的引用。
outerheight
返回窗口的外部高度。
outerwidth
返回窗口的外部宽度。
pageXOffset
设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset
设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent
返回父窗口。
self
返回对当前窗口的引用。等价于 Window 属性。
window
window 属性等价于 self 属性，它包含了对窗口自身的引用。
status
设置窗口状态栏的文本。
top
返回最顶层的先辈窗口。
screenLeft
screenTop
screenX
screenY
只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。
2）对象方法
window.close(); //关闭窗口
window.alert("message"); //弹出一个具有OK按钮的系统消息框，显示指定的文本
window.confirm("Are you sure?"); //弹出一个具有OK和Cancel按钮的询问对话框，返回一个布尔值
window.prompt("What's your name?", "Default"); //提示用户输入信息，接受两个参数，即要显示给用户的文本和文本框中的默认值，将文本框中的值作为函数值返回
window.status //可以使状态栏的文本暂时改变
window.defaultStatus //默认的状态栏信息，可在用户离开当前页面前一直改变文本
window.setTimeout("alert('xxx')", 1000); //设置在指定的毫秒数后执行指定的代码，接受2个参数，要执行的代码和等待的毫秒数
window.clearTimeout("ID"); //取消还未执行的暂停，将暂停ID传递给它
window.setInterval(function, 1000); //无限次地每隔指定的时间段重复一次指定的代码，参数同setTimeout()一样
window.clearInterval("ID"); //取消时间间隔，将间隔ID传递给它
window.history.go(-1); //访问浏览器窗口的历史，负数为后退，正数为前进
window.history.back(); //同上
window.history.forward(); //同上
window.history.length //可以查看历史中的页面数
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
createPopup() 创建一个 pop-up 窗口。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout(方法,秒数) 在指定的毫秒数后调用函数或计算表达式。
timeOutEvent = setTimeout("longPress('" + obj + "')",1500);定时器传参数
扩展
① 如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
② window.frames 返回窗口中所有命名的框架
③parent是父窗口（如果窗口是顶级窗口，那么parent==self==top）
top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe）
self是当前窗口（等价window）
opener是用open方法打开当前窗口的那个窗口
④与消息框有关的方法：alert(String)、confirm(String)、prompt(String)
⑤两种定时器：setTimeout(code,latency) 和 setInterval(code,period)
注：setTimeout只执行一次code，如果要多次调用，可以让code自身再次调用setTimeout()；setInteval()会不停地调用code，直到clearInterval()被调用。
3.6 Document对象
HtmlDocument 为 Internet Explorer 的文档对象提供托管包装，该文档对象也称为 HTML 文档对象模型 (DOM)。您可以通过 WebBrowser 控件的 Document 属性获取 HtmlDocument 的实例。
HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。
HTML 文档中的 HTML 标记可以相互嵌套。因此，HtmlDocument 表示一个文档树，其子级是 HtmlElement 类的实例。下面的代码示例演示一个简单的 HTML 文件。
HtmlDocument 表示 HTML 标记内的整个文档。BODY、DIV、FORM 和 SPAN 标记各由一个单独的 HtmlElement 对象表示。
document.body//提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。
document.cookie 返回与当前文档有关的所有 cookie。
document.title //返回文档标题等价于HTML的title标签
document.domain 返回当前文档的域名。
document.URL //设置URL属性从而在同一窗口打开另一网页
document.referrer 返回载入当前文档的文档的 URL。
document.lastModified 返回文档被最后修改的日期和时间。
2）常用对象方法
document.write() //动态向页面写入内容
document.writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
document.createElement(<Tag>) //用指定标签类型创建一个新的element对象)
document.getElementById(ID) //获得指定ID值的对象
document.getElementsByName(Name) //获得指定Name值的对象
document.getElementsByTagName() 返回带有指定标签名的对象集合。
document对象
document对象：实际上是window对象的属性，document == window.document为true，是唯一一个既属于BOM又属于DOM的对象
document.lastModified//获取最后一次修改页面的日期的字符串表示
document.referrer //用于跟踪用户从哪里链接过来的
document.title //获取当前页面的标题，可读写
document.URL //获取当前页面的URL，可读写
document.anchors[0]或document.anchors["anchName"]//访问页面中所有的锚
document.forms[0]或document.forms["formName"]//访问页面中所有的表单
document.images[0]或document.images["imgName"]// 访问页面中所有的图像
document.links [0]或document.links["linkName"]//访问页面中所有的链接
document.applets [0]或document.applets["appletName"]//访问页面中所有的Applet
document.embeds [0]或document.embeds["embedName"]//访问页面中所有的嵌入式对象
document.write(); 或document.writeln();//将字符串插入到调用它们的位置
location对象
location对象：表示载入窗口的URL，也可用window.location引用它
location.href //当前载入页面的完整URL，如http://www.somewhere.com/pictures/index.htm
location.portocol //URL中使用的协议，即双斜杠之前的部分，如http
location.host //服务器的名字，如www.wrox.com
location.hostname //通常等于host，有时会省略前面的www
location.port //URL声明的请求的端口，默认情况下，大多数URL没有端口信息，如8080
location.pathname //URL中主机名后的部分，如/pictures/index.htm
location.search //执行GET请求的URL中的问号后的部分，又称查询字符串，如?param=xxxx
location.hash //如果URL包含#，返回该符号之后的内容，如#anchor1
location.assign("http:www.baidu.com");//同location.href，新地址都会被加到浏览器的历史栈中
location.replace("http:www.baidu.com");//同assign()，但新地址不会被加到浏览器的历史栈中，不能通过back和forward访问
location.reload(true|false);//重新载入当前页面，为false时从浏览器缓存中重载，为true时从服务器端重载，默认为false
navigator对象
`navigator`对象：包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用，也可用window.navigator引用它
`navigator.appCodeName`//浏览器代码名的字符串表示
navigator.appName //官方浏览器名的字符串表示
navigator.appVersion//浏览器版本信息的字符串表示
navigator.cookieEnabled//如果启用cookie返回true，否则返回false
navigator.javaEnabled//如果启用java返回true，否则返回false
navigator.platform//浏览器所在计算机平台的字符串表示
navigator.plugins //安装在浏览器中的插件数组
navigator.taintEnabled//如果启用了数据污点返回true，否则返回false
navigator.userAgent//用户代理头的字符串表示
screen对象
screen对象：用于获取某些关于用户屏幕的信息，也可用window.screen引用它
screen.width/height //屏幕的宽度与高度，以像素计
screen.availWidth/availHeight//窗口可以使用的屏幕的宽度和高度，以像素计
screen.colorDepth //用户表示颜色的位数，大多数系统采用32位
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);//填充用户的屏幕
3.2 History对象
window.history.length //浏览过的页面数
history.back() //在浏览历史里后退一步
history.forward() //在浏览历史里前进一步
history.go(i) //到汗青详细登记单的第i位
//i>0进步,i<0撤退退却
Document子对象HTMLElement对象详解
HTML DOM 节点
在 HTML DOM （文档对象模型）中，每个部分都是节点：
1.文档本身是文档节点
2.所有 HTML 元素是元素节点
3.所有 HTML 属性是属性节点
4.HTML 元素内的文本是文本节点
5.注释是注释节点
Element 对象
在 HTML DOM 中，Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。
元素也可以拥有属性。属性是属性节点
获取
document.getElementById(ID) //获得指定ID值的对象
document.getElementsByName(Name) //获得指定Name值的对象
getElementsByTagName() 返回带有指定标签名的对象集合。
属性和方法
方法里有a,b的参数仅仅是为了加深说明,其他元素没有a,b不代表是无参方法
Element.add(<class>)给元素添加指定的类
element.accessKey 设置或返回元素的快捷键。
element.appendChild() 向元素添加新的子节点，作为最后一个子节点。
element.attributes 返回元素属性的集合。
element.childNodes 返回元素子节点的 NodeList。
element.className 设置或返回元素的 class 属性。
element.clientHeight 返回元素的可见高度。
element.clientWidth 返回元素的可见宽度。
element.cloneNode() 克隆元素。
element.compareDocumentPosition() 比较两个元素的文档位置。
element.contentEditable 设置或返回元素的文本方向。
element.dir 设置或返回元素的文本方向。
element.firstChild 返回元素的首个子。
element.getAttribute() 返回元素节点的指定属性值。
element.getAttributeNode() 返回指定的属性节点。
element.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。
element.getFeature() 返回实现了指定特性的 API 的某个对象。
element.getUserData() 返回关联元素上键的对象。
Element.hidden获取或设置hidden属性的存在状态
element.hasAttribute() 如果元素拥有指定属性，则返回true，否则返回 false。
element.hasAttributes() 如果元素拥有属性，则返回 true，否则返回 false。
element.hasChildNodes() 如果元素拥有子节点，则返回 true，否则 false。
element.id 设置或返回元素的 id。
element.innerHTML 设置或返回元素的内容。
element.insertBefore(<a>,<b>) 在指定的已有的子节点之前插入新节点。A插到b前
element.isContentEditable 设置或返回元素的内容。
element.isDefaultNamespace() 如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。
element.isEqualNode(<a>) 检查a元素是否与当前元素相等。
element.isSameNode(a) 检查指定元素是否就是当前元素.
element.isSupported() 如果元素支持指定特性，则返回 true。
element.lang 设置或返回元素的语言代码。
element.lastChild 返回元素的最后一个子元素。
element.namespaceURI 返回元素的 namespace URI。
element.nextSibling 返回当前元素之后的兄弟元素
element.nodeName 返回元素的名称。
element.nodeType 返回元素的节点类型。
element.nodeValue 设置或返回元素值。
element.normalize() 合并元素中相邻的文本节点，并移除空的文本节点。
element.offsetHeight 返回元素的高度。
element.offsetWidth 返回元素的宽度。
element.offsetLeft 返回元素的水平偏移位置。
element.offsetParent 返回元素的偏移容器。
element.offsetTop 返回元素的垂直偏移位置。
element.ownerDocument 返回元素的根元素（文档对象）。
element.parentNode 返回元素的父节点。
element.previousSibling 返回当前元素之前的兄弟元素
Element.remove(<class>) 从元素移除指定的类
element.removeAttribute() 从元素中移除指定属性。
element.removeAttributeNode() 移除指定的属性节点，并返回被移除的节点。
element.removeChild(a) 从元素中移除子节点。
element.replaceChild(a,b) 替换元素中的子节点。
element.scrollHeight 返回元素的整体高度。
element.scrollLeft 返回元素左边缘与视图之间的距离。
element.scrollTop 返回元素上边缘与视图之间的距离。
element.scrollWidth 返回元素的整体宽度。
element.setAttribute() 把指定属性设置或更改为指定值。
element.setAttributeNode() 设置或更改指定属性节点。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData() 把对象关联到元素上的键。
element.style 设置或返回元素的 style 属性。
Element.toggle(<class>)如果类不存在就添加它存在就移除它
element.tabIndex 设置或返回元素的 tab 键控制次序。
element.tagName 返回元素的标签名。
element.textContent 设置或返回节点及其后代的文本内容。
element.title 设置或返回元素的 title 属性。
element.toString() 把元素转换为字符串。
nodelist.item() 返回 NodeList 中位于指定下标的节点。
nodelist.length 返回 NodeList 中的节点数。
contentWindow 属性 如果文档里有iframe属性利用此属性可以返回iframe的内容
事件监听方法单讲
element.addEventListener(event, function, useCapture)
参数
描述
event
必须。字符串，指定事件名。
注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function
必须。指定要事件触发时执行的函数。
当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture
可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
可能值:
true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行
附:DOM基本操作思维导图
