html dom 学习笔记

HTML DOM教程
DOM 译为文档对象模型，是html和xml文档的编程接口
html dom 定义了访问和操作html文档的标准方法
dom 以树的结构表达了html文档
dom 是w3c的标准
w3c dom 标准被分为3个不同的部分
1.核心DOM 针对任何结构化文档的标准模型
2.XML Dom 针对xml文档的标准模型
3.html dom 针对 html 文档的标准模型
dom 是document object model 的缩写

html dom 节点
在html dom 中，所有的事务都是节点。dom 是被视为节点树的html
根据w3c的html dom标准,html 文档中所有的内容都是节点
1.整个文档就是一个文档节点
2.每个html元素是元素节点
3.html元素内的文本都是文本节点
4.每个html属性是属性节点
5.注释是注释节点

节点树种的节点彼此拥有层级关系
父节点 子节点 同胞节点 等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞
在节点树中，顶端的节点被称为根 root
每个节点都有父节点，除了根（它没有父节点）
一个节点可以拥有任意数量的子节点
同胞是拥有相同父节点的节点

html dom 方法
html dom 方法是我们可以再节点（html 元素）上执行的动作
html dom 属性是我们可以在节点(html元素）设置和修改的值

可通过js对html dom 进行访问
所有html 元素被定义为对象，而编程接口则是对象方法和对象属性
方法是您能够执行的动作（比如添加或修改元素）
属性是您能够获取或设置的值（比如节点的名称或内容）

getElementByid()方法返回带有指定ID的元素
appendchild 插入新的子节点
removechild 删除子节点
innerhtml 节点的文本值
parentnode 节点的父节点
childnodes 节点的子节点
attributes 节点的属性节点

常用的dom对象方法
1.getelementbyid 返回带有指定ID的元素
2.getelemetsbytagname 返回包含带有指定标签名称的所有元素的节点列表
3.getelementsbyclassname 返回带有指定类名的所有元素的节点列表
4.appendchild 把新的子节点添加到指定节点
5.removechild 删除子节点
6.replacechild 替换子节点
7.insertBefore 在指定的子节点前面插入新的子节点
8.createattribute 创建属性节点
9.createlelement 创建元素节点
10.createtextnode 创建文本节点
11.getattribute 返回指定的属性值
12.setattribute 把指定属性设置或修改为指定的值

html dom 属性
属性是节点（html元素）的值
nodeName 属性规定节点的名称
1.nodeName是只读的
2.元素节点的nodeName与标签名相同
3.属性节点的nodeName与属性名相同
4.文本节点的nodeName始终是#text
5.文档节点的nodeName始终是#document
nodevalue属性规定节点的值
1.元素节点的nodevalue是undefined 或null
2.文本节点的nodevalue是文本本身
3.属性节点的nodevalue是属性值
nodetype属性 返回节点的类型 nodetype是只读的属性
元素1 属性2 文本3 注释8 文档9

html dom访问
访问html元素等同于访问节点
1.通过使用getelementbyid（）
2.通过使用getelementbytagname()
3.通过getelementsbyclassname()
4.queryselectallxxx

DOM修改
修改 html dom意味着许多不同的方面
1.改html内容
2.改变css样式
3.改变html属性
4.创建新的html元素
5.删除已有的html元素
6.改变事件（处理程序）

html dom元素
添加，删除和替换html元素
创建新的html元素 createelement 
用appendchild最佳到末尾
insertbefore 加到最前面
removechild 移除元素
replace替代元素

html dom事件
html事件的例子
1.当用户点击鼠标时
2.当网页已加载时
3.当图片已加载时
4.当鼠标移动到元素上时
5.当输入字段被改变时
6.当html表单被提交时候
7.当用户触发按键时

事件
1.onload 进入页面
2.onunload 离开页面
3.onchange事件 常用于输入字段的验证 改变事件
4.onmouseover 鼠标指针移动到元素上
5.onmouseout 鼠标指针离开元素
6.onmousedown 鼠标按下
7.onmouseup鼠标松开
8.onclick 鼠标点击

html dom 导航
通过html dom 能够使用节点关系在节点树中导航
有三个可以使用的节点树形 parentNode fristChild lastChild
document.documentElement 全部文档
document.body 文档的主体
可以用childnodes和nodevalue属性来获取元素的内容

js window对象
window对象表示浏览器中打开的窗口
如果文档含框架(<frame>或<iframe>标签),浏览器会为html文档创建一个window对象，并未每个框架创建一个额外的window对象
（没有应用于window对象的公开标准，不过所有的浏览器DOI支持该对象）
window对象属性
1.closed 返回的窗口是否已被关闭
2.defaultstatus 设置或返回窗口状态栏中的默认文本
3.document 对document 对象的只读引用
4.frames 返回窗口中所有命名的框架。该集合是window对象的数组
5.history 对history 对象的只读引用
6.innerheight 返回窗口的文档显示区的高度
7.innerwidth 返回窗口文档显示区的高度
8.localstorage 在浏览器中存储key/value对。没有过期时间
9.length 设置或返回窗口中的框架数量
10.loaction 用于窗口或框架的location对象
11.name 设置或返回窗口的名称
12.navigator 对navigator对象的只读引用
13.opener 返回创建此窗口的窗口引用
14.outerheight 返回窗口的外部高度，包括工具条和滚动条
15.outerwidth 返回窗口的外部宽度 包含工具条和滚动条
16.pageXoffset 设置或返回当前页面相对于窗口显示区左上角的X位置
17.pageYoffset 设置或返回当前页面相对于窗口显示区左上角的Y位置
18.parent 返回父窗口
19.screen 对screen 对象的只读引用
20.screenleft 返回相对于屏幕窗口的X坐标
21.screentop 返回相对于屏幕窗口的Y坐标
22.screenX 返回相对于屏幕窗口的x坐标
23.sessionStorage 在浏览器中存储key/value对 
24.screenY 返回相对于屏幕窗口的坐标
25.self 返回对当前窗口的引用，等价与window属性
26.status 设置窗口状态栏的文本
27.top 返回最顶层的父窗口
window 对象方法
1.alert （）显示带有一段消息和一确认按钮的警告框
2.atob（）解码一个base——64编码的字符串
3.btoa（）创建一个base-64编码的字符串
4.blur（）把键盘焦点从顶层窗口移开
5.clearInterval（）取消由setInterval（）设置的timeout
6.clearTimeout 取消由setTimeout（）方法设置的timeout
7.close（）关闭浏览器窗口
8.confirm 显示一段消息以及确认按钮和取消按钮的对话框
9.createPoup 创建一个pop-up窗口
10.focus 把键盘焦点给与一个窗口
11.getSelection 返回一个selection对象，标识用户选择的文本范围或光标的当前位置
12.getcomputedStyle（)获取指定元素的css样式
13.matcgmedia（）该方法用来检查media query 语句，它返回一个mediaquerylist对象 
14.moveby 可相对窗口的当前左边把它移动指定的像素
15.moveto 把窗口的做上角移动到一个指定的坐标
16.open 打开一个浏览器窗口或查找一个一名门的窗口
17.print 打印当前窗口的内容
18.prompt 显示可提示用户输入的对话框
19.resizeBy 按照指定像素调整窗口的大小
20.resizeto 把窗口的大小调整到指定的宽度和高度
21.scrollby 按照指定的像素值来滚动内容
22.scrollto 把内容滚动到指定的坐标
23.setinterval 按照指定的周期（以毫秒计）来调用函数或计算表达式
24.settimeout 在指定的毫秒数后调用函数或计算表达式
25.stop 停止页面载入
26.postMessage 安全实现跨源通信

navigator 对象
1.appcodeName 返回浏览器的代码名
2.appname 返回浏览器的名称
3.appversion 返回浏览器的平台和版本信息
4.cookieEnable 返回之谜浏览器中是否企业cookie的布尔值
5.platform 返回运行浏览器的操作系统平台
6.userAgent 返回由客户机法安寺服务器的user-agent 头部的值
7.geolocation 返回浏览器的地理位置信息
8.language 返回浏览器使用的语言
9.online 返回浏览器是否在线，在线返回true 否则返回false
10.product 返回浏览器使用的引擎（产品）
navigator
1.javaenabled 指定是否在浏览器中启用java
2.taintenabled 规定浏览器是否启用数据污点（data tainting）

screen 对象
1.availheight 返回屏幕的高度(不包括window任务栏）
2.availwidth 返回屏幕的宽度(不包括window任务栏)
3.colorDepth 返回目标社保和缓冲器上的调色板的比特深度
4.height 返回屏幕的总高度
5.pixelDepth 返回屏幕的颜色分辨率
6.width 返回屏幕的总宽度

history 对象
history对象包含在用户（在浏览器窗口中）访问过的url
history 对象是window对象的一部分 可通过window.history 属性对其进行访问
length 返回历史列表中的网址数
back 加载history 列表中的前一个url
forward 加载history 列表中的下一个url
go 加载history 列表中的某个具体页面

loaction 对象
location对象包含有关当前的url的信息
location对象是window对象的一部分,可通过window.loaction.xxx 格式想给属性对其进行访问
1.hash 返回一个url的锚部分
2.host 返回一个URL的主机名和端口
3.hostname 返回url的主机名
4.href 返回完整的url
5.pathname 返回 url路径名
6.port 返回一个url服务器使用的端口号
7.porocol 返回一个url协议
8.search 返回一个url的查询部分
location对象方法
1.assign 载入一个新的文档
2.reload 重新载入当前文档
3.replace 用新的文档替换当前的文档

js存储对象
web存储api提供了sessionstorage（会话存储）和loacalstorage（本地存储）两个存储对象来对网页的数据进行添加，删除，修改，查询操作。
localstorage 用于长久的保存郑哥网站的数据，保存的数据没有过期时间，直到手动去除
sessionstorage 用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据。
存储对象属性
length 返回存储对象中包含多少条数据
key 返回存储对象中包含多少条数据
getitem 返回指定键的值
setitem 添加键值对，如果对应的值存在，则更新该键对应的值
removeitem 移除键
clear 清除存储对象中所有的键