1.Object
Node:最大的父节点类型
Element:节点类型/标签类型
document：文档类型
comment：注释类型
textnode:文本类型
Node属性和方法（实例对象和原型对象可以调用）
nodeType:节点类型，返回值为number类型
Element:返回值为1 document:返回值为9 textnode:返回值为3 comment:返回值为8
nodeName:节点名
对于节点类型 返回值为大写的字符串类型的节点名称，非节点类型返回#小写名称
childNodes:孩子节点 属性，保存一个Nodelist对象，Nodelist是一种类数组对象用来保存一组有序的节点
参数:参数为空的时候，返回值为当前父类所有的孩子节点，访问孩子子节点[index]
window.οnlοad=function(){
var a=document.body;
console.log(a.childNodes);//所有body的所有孩子节点
console.log(a.childNode[0]);//访问body的第一个孩子节点
}
parentNode:父节点
previousSibling:兄弟结点的前一个结点 前面没有兄弟节点返回undefined
nextSibling:兄弟节点的后一个节点
firstChild:childNodes列表中的第一个节点 console.log(a.firstChild)
lastchild:childNodes列表中的最后一个节点 console.log(lastChild)
ownerDocument:指向整个文档的文档节点 HTMLDocument
hasChildNodes();在包含孩子节点的情况下返回true，不包含孩子节点的情况下返回false
操作节点
以下四个节点都需要父节点对象调用
1.appendChild();
向childNodes列表末尾添加一个节点，返回新增的节点
2.insertBefore();
参数为两个
第一个参数:要插入的节点
第二个参数:作为参照的节点
3.replaceChild();
参数:
第一个参数:要插入的节点
第二个参数:要替换的节点
要更替的节点将由这个方法返回并从文档树中移除，同时由要插入的节点占据其位置。
4.removeChild();
一个参数，即要移除的节点
移除的节点作为方法的返回值
其他方法;
cloneNode();
cloneNode(空 / true /false) 任何节点对象都可以调用
用于创建调用这个方法的节点的一个完全相同的副本。有一个参数为布尔类型参数为true时，表示深复制，即复制节点以及整个子节点数。参数为false的时候，表示浅复制，只复制节点本身。该方法不会复制添加到DOM节点中的JavaScript属性，例如事件处理程序等。该方法只复制特定,子节点，其他一切都不复制。但是IE中可以复制，建议标准相同，在复制之前，移除所有事件处理程序。
Document:
在浏览器中，document对象是HTMLDocument的一个实例。在整个html页面，
document是window对象的一个属性，因此可以直接调用。
可以继承Node所有的属性和方法
属性:
documentElement 始终指向HTML页面中的<html>元素。
body 直接指向<body>元素
doctype 访问<!DOCTYPE>, 浏览器支持不一致，很少使用
title 获取文档的标题
URL 取得完整的URL
domain 取得域名，并且可以进行设置，在跨域访问中经常会用到。
referer
images:获取所有的img对象，返回HTMLCollection类数组对象
forms:获取所有的form对象，返回HTMLCollection类数组对象
links 获取文档中所有带href属性的<a>元素
查找元素
getElementById()
参数为想要取得元素的ID，如果页面中出现多个id值相同的标签，只返回
文档中第一次出现的元素。找不到返回null
getElementsByName()
参数为元素的name，返回为NodeList类型的类数组对象
getElementsByTagName()
参数为想要取得元素的元素名，在html文档中，返回类型为HTMLCollection
类型的数组对象，和NodeLsit类似
getElementByClassName()
参数为一个字符串，可以由多个空格隔开的标识符组成，元素的类名，返回HTMLCollection
类型的类数组对象
3.
document.createAttribute();
var a=document.createAttribute("flag");
a.value="one";
console.log(a);//flag='one'
document.createElement();
Element类型:节点类型
1.HTML元素
所有的HTML元素都由HTMLElement类型表示
id 返回字符串类型的id名
title 返回字符串类型内容
style 返回样式
className 返回字符串类型的类名的值
src img具有的属性
alt img具有的属性
可以通过属性访问到该属性对应的值
1.取得属性
getAttribute():
2.设置属性
setAttribute():两个参数，第一个参数为属性名，第二个参数为属性值。如果该值存在则替换
3.移除属性
removeAttribute();参数为想要移除的属性
4.创建元素
createElement();
一个参数，要创建元素的标签名
2.作为文档树的文档
Element中的属性
children:返回为HTMLCollection类数组对象所有类型为Element类型的实例对象
firstElementchid 返回Element类型的第一个孩子节点
lastElementchild 返回Element类型的最后一个孩子节点
nextElementSibling返回前一个兄弟节点
previousElementSibling返回后一个兄弟节点
childElementCount 返回孩子节点数量 和children.length相等
3.元素内容
innerHTML:返回元素内容 标签里必须有内容
textContent：返回元素文本内容
4.Text类型:文本类型
文本节点。包含的是可以按照字面解释的纯文本内容。
length
文本长度
appendData(text)
追加文本
deleteData(beginIndex,count)
删除文本
insertData(beginIndex,text)
插入文本
replaceData(beginIndex,count,text)
替换文本
splitText(beiginIndex)
从beginIndex位置将当前文本节点分成两个文本节点
substringData(beiginIndex,count)
从beginIndex开始提取count个子字符串
document.createTextNode()
创建文本节点，参数为要插入节点中的文本
5.comment类型
事件
js与html交互通过事件来实现的。事件就是文档或浏览器窗口发生的一些特定的交互瞬间
事件三要素
1.事件目标
点击那个按钮做什么事情 按钮是事件目标 做什么是事件处理程序
2.事件处理程序
var outer=getNameById("outer");
outer.onclick=function(){
alert("hello")} function(){}这个函数就是事件处理程序
3.事件对象
var outer=getNameById("outer");
outer.onclick=function(event//事件对象){
alert("hello")
console.log(event)}//点击之后返回click对象
window对象封装的事件
1.事件流
描述的是从页面中接受事件的顺序
事件捕获
从外向内
事件冒泡
从内向外
执行事件类型Onclick
1.先进行事件捕获 点击不松开的时候事件捕获
2.在进行事件冒泡 点击松开的时候事件冒泡
2.事件绑定
dom0级事件
事件绑定
事件目标.onType=function(){}
事件解绑
事件目标.onType=null;
div.onclick=null;
优点:兼容性较好
缺点:不能给一个元素同时绑定多个类型相同的事件
dom2级事件
事件绑定
事件目标.addEventListener()
参数：3
第一个参数：想要绑定的事件类型//click
第二个参数：作为事件处理的函数function(){}
第三个参数:布尔值 true在捕获阶段调用事件处理程序，false在事件冒泡阶段调用事件处理程序
事件解绑
removeEventListener();//注意 移除的时候第二个参数为事件处理函数的引用地址
第一个参数：要删除的事件名
第二个参数：作为事件处理的函数
第三个参数：布尔值：true在捕获阶段调用事件处理程序；false在冒泡阶段调用
优点:可以同时给一个元素绑定多个类型相同的事件
缺点：兼容性较差
6114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
