DOM

一 什么是DOM?
DOM(document object model) 文档对象模型，表示一个页面文档的模型

二 DOM的作用？
是浏览器提供的一个操作页面内容的接口,通过DOM，编程语言可以操作浏览器加载的页面中的任意元素（a,p,div,span,文本、脚本…）,DOM建立了js和页面的桥梁。

三 DOM的规范？
DOM0 DOM1 DOM2 DOM3

四 DOM的组成？
在DOM中的页面是有节点组成的。就像js语言中所有的对象都继承自Object,我们页面的所有的内容都继承节点，也就是说，所有的东西都是节点的一种形态。

五 节点和节点关系
页面中任何内容都是节点（包括元素、属性、文本、脚本、注释、换行符…）
节点关系就是节点和节点之间的关系（父子、兄弟、爷孙关系…）,节点关系组成了一个倒树结构。

六 节点的分类
节点按类型的不同，可以分为12类，也就是说页面中其实是由12种不同类型的节点组成的。但我们实际上写页面常用的节点类型就4种
1 元素节点 标签
2 属性节点 标签的属性
3 本文节点 标签的文字
4 文档节点 document

我们从3个层面比较一下这四种类型的节点
一是节点类型nodeType 二是节点名称 nodeName 三是节点的值 nodeValue

节点 节点类型 节点名称 节点值
元素节点 1 大写的标签名 null
属性节点 2 属性名 属性值
文本节点 3 #text 对应的文本
文档节点 9 #document null

七 跟节点关系相关的属性
1 找到元素的元素的孩子组成的集合数组
lis.childNodes
2获取孩子的个数
lis.childNodes.length
3 第一个子节点
lis.firstChild
4 获取第一个元素节点
lis.firstElementChild
5 获取最后一个节点
lis.lastChild
6 获取最后一个元素节点
lis.lastElementChild
7 获取下一个兄弟
当前元素.nextSibling
获取下一个元素兄弟
lis.nextElementSibling
8 获取上一个兄弟
a.previousSibling
获取上一个元素兄弟
a.previousElementSibling
9 获取父节点
jd.parentNode
10 获取父元素
jd.parentElement
11 是否有孩子，这是一个方法，需要加()
lis.hasChildNodes()
12 连贯操作
jd.parentElement.nextElementSibling.firstChild

八 特殊节点 文档节点
1 获取文档声明
document.doctype
2 HTML属性
console.log(document.documentElement);
console.log(document.lastChild);
console.log(document.childNodes[1]);
3 head属性
document.head
4 title标题
document.title
5 body属性
document.body
6 域名
document.domain
7 URL 网址
document.URL === location.href
8 cookie信息 可以暂时不用掌握
document.cookie 获取客户端的cookie信息
cookie是在服务器上生成的，但存储在客户端，只要以前登录过服务器而且信息没过有效期，每次访问服务器时客户端都会携带cookie信息，通过cookie可以弥补http协议无状态的缺陷，服务器就会认识客户端。

php 通过setcookie函数生成cookie
setcookie(cookie名，cookie值，生命周期，作用域，安全性)
js 如何设置cookie呢？
document.cookie= cookie名=cookie值;有效期=时间;
具体实现代码
document.cookie=cookie名+ “=” +escape(value)+”;expires="+exdate.toGMTString()”

Code（编码/解码操作）编码的目的就是为了防止乱码，方便字符串在网络中传输，所以在传输前编码，到了目的地以后然后解码
decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符
encodeURIComponent( ) 转义URI组件中的字符
escape( ) 对字符串编码
unescape( ) 给转义字符串解码

九 节点操作
1创建节点
创建元素节点
document.createElement(‘标签名’)
创建属性类型的节点
document.createAttribute(‘属性名’)
创建文本类型的节点
document.createTextNode(‘文本值’)
2 元素节点的添加、修改、复制
在父元素的最后一个子节点后添加子节点
父节点.appendChild(要添加的子节点);
在父节点指定的子节点之前添加节点
父节点.insertBefore(被添加的节点,在哪个位置节点)
替换某个子节点
父节点.replaceChild(要替换成的节点，被替换的节点)
删除节点
父节点.removeChild(删除的节点)
克隆节点
要克隆的那个节点.cloneNode() 如果不加true参数表示只克隆这个节点本身，不复制里面的子节点
要克隆的那个节点.cloneNode(true) 如果加true参数,表示克隆这个节点本身并且复制里面的子节点
3 属性节点操作
添加属性节点
1 var a = document.createAttribute(属性节点名);
赋值 a.value=’属性节点的值’;
添加到元素节点 元素节点.attributes.setNamedItem(属性节点) 参数是节点而不是节点名
2 元素节点.setAttribute(‘属性名’,’属性值’)
3 如果只是添加class属性,除了可以使用以上两种通用方法添加外，还可以使用
元素节点.className= ‘属性值’
查询某个属性节点的值
1 属性节点 = 元素节点.attributes.getNamedItem(‘属性节点名’),返回的是节点
2 元素节点.getAttribute(‘属性名’)，返回的是节点值
3 如果是获取的class属性节点，可以通过元素节点.className来获取属性节点
修改属性节点
1 改变创建的属性节点的值，然后重新赋值给 元素节点
元素节点.attributes.setNamedItem(属性节点)
2 元素节点.setAttribute(‘属性名’,’属性值’)
3 元素节点.className= ‘属性值’

删除属性节点
1 元素节点.attributes.removeNamedItem(‘属性节点名’)
2 元素节点.removeAttribute(‘属性节点名’)
3 元素节点.className = ‘’;

**********以上的所有方法，第二种最重要，如果要设置属性 *******
元素节点.setAttribute(属性名,属性值) 添加和修改属性节点
元素节点.getAttribute(‘属性名’) 获取属性节点的值
元素节点.removeAttribute(‘属性节点名’) 删除属性节点

修改元素的样式 style
1如果是查询通过行内式的方式添加的样式
元素节点.style.要查询的样式属性（color、width、height、backgbround…）
css的样式和js的样式如何转换
把css样式中的-去掉，后面的单词的首字母变大写
如果是通过内联式的方式添加的样式，需要通过window.getComputedStyle(元素节点)的方式获取
2 如果是设置元素的样式，直接使用
元素节点.style.要设置的样式名 = 样式值

补充 document的文档流写入方法
document.open() 打开文档
document.write(‘向文档中写入的内容’) 写内容,不带换行符，源代码不会换行
document.writeln(‘向文档中写入的内容’) 写内容带换行符，源代码会换行
document.close() 关闭文档
当打开一个新的文档流document.open(),源文档流就会被覆盖；当关闭一个文档流是，原文档流就不让写文本了，再写文档就会开一个新的文档流。
注意 document.open()跟window.open() 打开一个新窗口不一样，这个是打开一个新文档流
document.close()跟window.close() 关闭一个窗口不一样，这个表示关闭原文档流
4 文本节点操作
创建文本节点
var 文本节点 = document.createTextNode(‘文本内容’)；
将文本节点作为子节点添加到父节点
父节点.appendChild(文本节点)
元素节点.innerHTML 获取或设置元素节点中的文本，如果是设置文本，此种方式会解析文本中的标签
元素节点.innerText 获取或设置元素节点中的文本，如果是设置，此种方式不会解析文本中的标签，把整个文本作为一个普通字符串对待。

十 document的子对象
1 anchors 锚点对象
获取页面中的所有的锚点
document.anchors
获取第一个锚点
document.anchors[0]
获取第一个锚点的属性
document.anchors[0].href
document.anchors[0].getAttribute(‘href’)
document.anchors[0].attributes.getNameItem(‘href’)

2 links 超链接对象
1）document.links 获取页面中所有的超链接
2）获取页面中超链接的个数
document.links.length
3）获取某个对应下标的超链接 第2个
document.links[1]
4）获取某个超链接的属性
document.links[1].href
document.links[1].attributes.getNamedItem(‘href’).value
document.links[1].getAttribute(‘href’)
5）设置某个属性的值
document.links[1].href=‘http://www.baidu.com’

3 images 图片对象
document.images 获取页面中所有的图片
document.images.length 获取图片的数量
document.iamges[i] 获取某张图片
4 forms 表单对象
document.forms 获取页面中所有的form表单
获取form表单中的控件
forms[0].elements
控件的个数
forms[0].elements.length
获取第一个控件
forms[0].elements[0]
var uname = document.getElementsByName(‘uname’)[0]
获取到控件中的值
uname.value
设置控件的值
uname.value=‘lisi’;
获取文本框的类型
uname.type
uname.getAttribute(‘type’)

单选按钮
选中某一项
rad[0].checked = true
设置单选按钮的值
rad[0].value=‘abc’;

下拉列表
所有的列表项
sel.options
列表项的个数
sel.length
当前被选中的列表项的下标是
sel.selectedIndex
获取某个列表项
sel.options[2]
获取当前所选中的列表项的值
sel.options[sel.selectedIndex].value
获取当前选中列表项的文本
sel.options[sel.selectedIndex].text
添加一个新的列表项
var opt = document.createElement(‘option’);
opt.innerHTML = ‘杭州’;
sel.add(opt);
删除列表项
sel.remove(要删除的那一项的下标)
sel.remove(sel.selectedIndex)
5 table 表格对象
属性
mytable.rows 所有的行
mytable.row.length 行数
mytable.rowIndex 行的索引下标

方法
添加行 var row = mytable.insertRow(行号)
添加单元格 row.insertCell(下标)
删除行 mytable.deleteRow(行号)