DOM基础概念、操作
DOM是什么
DOM全称为The Document Object Model，应该理解为是一个规范，定义了HTML和XML文档的逻辑结构和文档操作的编程接口。
文档逻辑结构
DOM基础概念、操作
DOM是什么
DOM全称为The Document Object Model，应该理解为是一个规范，定义了HTML和XML文档的逻辑结构和文档操作的编程接口。
文档逻辑结构
DOM实际上是以面向对象方式描述的对象模型，它将文档建模为一个个对象，以树状的结构组织（本文称之为“文档树”，树中的对象称为“节点”）。
每个文档包含1个document节点，0个或1个doctype节点以及0个或多个元素节点等。document节点是文档树的根节点。
如对于HTML文档，DOM 是这样规定的：
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点
节点与文档内容是一一对应的关系，节点之间有层次关系。
例如下面的html文档：
文档标题
我的链接
我的标题
会被建模为下面的文档树：
nodeType
元素.nodeType：只读 属性 当前元素的节点类型
DOM节点的类型nodeType一种有12种，可以查看这里。
常用的节点类型包括：元素节点、文本节点、属性节点：
元素节点 ELEMENT_NODE：1
属性节点 ATTRIBUTE_NODE ：2
文本节点 TEXT_NODE：3
- 1111
- 1111
- 1111
- 1111
oUl = document.getElementById('ul1');
alert(oUl.nodeType); // 弹出1
alert(oUl.childNodes[0].nodeType); //弹出3
alert(oUl.attributes[0].nodeType); //弹出2
alert(oUl.attributes[0].name); //弹出'id'
alert(oUl.attributes.length); //弹出2
alert(oUl.attributes[0].value); //弹出'ul1'
attributes
元素.attributes：只读 属性 属性列表集合
具体代码可以查看NodeType中js代码中alert的部分。
DOM节点
childNodes \ children
获取第一级子元素
有兼容性问题（空白节点），nodeType属性
firstChild \ firstElementChild
获取子元素里的第一个
lastChild \ lastElementChild
获取子元素里的最后一个
childNodes
元素.childNodes：只读属性 子节点列表集合
childNodes至包含一级子节点，不包含后辈孙级以下的节点
childNodes的兼容性问题：
标准浏览器下：childNodes包含了文本和元素类型的节点，并且也会包含非法嵌套的子节点；
非标准浏览器下，至包含元素类型的节点，IE7及以下不包含非法嵌套的子节点
- 1111
- 1111
- 1111
- 1111
oUl = document.getElementById('ul1');
alert(oUl.childNodes.length); //在标准浏览器下弹出9；在IE6、7弹出4。因为标准浏览器下，文本元素（在这里是换行符）也包含在childNodes里面了。
for (var i=0; ichildren
元素.children：只读 属性 子节点列表集合
标准下： 只包含元素类型的节点，并且包含非法嵌套的子节点
非标准下：只包含元素类型的节点，IE7及以下不包含非法嵌套的子节点
这样，如果把childNodes换为children的话，就不用进行nodeType的判断了。
for (var i=0; i子节点和兄弟节点的操作
firstChild
元素.firstChild：只读 属性 第一个子节点
标准下：firstChild会包含文本类型的节点
非标准下： 只包含元素节点
firstElementChild
元素.firstElementChild：只读 属性
标准下获取第一个元素类型节点的子节点
非标准浏览器不支持
因此要进行判断：
if (oUl.firstElementChild){
oUl.firstElementChild.style.background = 'red';
} else {
oUl.firstChild.style.background = 'red';
}
//更为简洁的写法：
var oFirst = oUl.firstElementChild || oUl.firstChild;
oFirst.style.background = 'red';
lastChild、lastElementChild
元素.lastChild
元素.lastElementChild 最后一个子节点
原理与firstChild
firstElementChild相似，不再赘述
nextSibling、previousSibling
元素.nextSibling
元素.nextElementSibling 下一个兄弟节点
元素.previousSibling
元素.previousElementSibling 上一个兄弟节点
父节点
parentNode
var oA = document.getElementsByTagName('a');
for (var i=0; i元素.parentNode： 只读 属性 只有一个 当前节点的父级节点
offsetParent
var oDiv3 = document.getElementById('div3');
alert(oDiv3.parentNode.id); //弹出div2
alert(oDiv3.offsetParent.id); //弹出body1
上面的代码，如果给div1的style里面加上position: relative; 那么div3的offsetParent就变成了div1
元素.offsetParent：只读 属性 离当前元素最近的一个有定位的父节点
如果没有定位父级，默认是body
操作元素属性的多种方式
点的形式和中括号形式
通过.点的形式：oText.value
通过中括号[]的形式：oText[‘value’] （当属性名用变量来表示的时候，用中括号）
getAttribute、setAttribute、removeAttribute
元素.getAttribute(属性名称); 方法 获取指定元素的指定属性的值
元素.setAttribute(属性名称, 属性值); 方法 给指定元素指定的属性设置值
元素.removeAttribute(属性名称); 方法 移除指定的元素的指定的属性
set/get与用点.的区别：
用.和[]的形式无法操作元素的自定义属性；getAttribute可以操作元素的自定义属性
用.和[]的形式来获取src的时候，获取的是一长串绝对路径，但是在IE8以上以及标准浏览器中，用getAttribute(‘src’)可以获取到相对路径（但是在IE7及以下，获取的src还是绝对路径）
元素的创建操作
document.createElement();
document.createElement(标签名);
动态创建元素
不会直接显示在页面当中
前面必须是document，不能是其他
appendChild()
父级.appendChild(要追加的元素)
方法
在指定父级子节点最后一个后面追加子元素
insertBefore()
父级.insertBefore(新的元素，指定的被插入的元素);
方法
在父级的指定子元素前面插入一个新元素
在IE下，如果第二个参数的节点不存在，会报错
在其它标准浏览器下，如果第二个参数的节点不存在，则会以appendChild的方式进行添加
为了兼容，应做以下判断：
var oText = document.getElementById('text1');
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('ul1');
oBtn.onclick = function() {
var oLi = document.createElement('li');
oLi.innerHTML = oText.value;
if ( oUl.children[0] ) {
oUl.insertBefore( oLi, oUl.children[0] );
} else {
oUl.appendChild( oLi );
}
var oA = document.createElement('a');
oA.innerHTML = '删除';
oA.href = 'javascript:;';
oLi.appendChild( oA );
oA.onclick = function() {
// oUl.removeChild( this.parentNode );
this.parentNode.remove();
}
}
removeChild()
父级.removeChild(要删除的节点);
或者 元素.remove();
replaceChild()
父级.replaceChild(新节点、被替换节点) 替换子节点
appendChild，insertBefore，replaceChild可以操作静态节点，也可以操作动态生成的节点。
表单操作
name
name：表单中可以通过name来获取元素：父级.name （该方法浏览器都兼容）
onchange事件
onchange事件：当值发生改变的时候触发
text：当光标离开的时候，如果内容有变化，就触发
radio/checkbox：
标准下点击的时候，只要值发生改变，就会触发；
非标准下，焦点离开的时候，如果值发生改变就触发
select：一选择不同的项，就触发
Title
表格操作
1
leo
男
删除
1
小美
女
删除
var oTab = document.getElementById('tab1');
alert(oTab.children[1].children[1].innerHTML); //什么也弹不出来，提示显示oTab.children[1]未定义，这是因为如果在table中没有添加tbody的话，浏览器会自动隐形添加一个tbody出来。因此，写表格结构时，最好添加上tbody。
正确的做法
编号
姓名
性别
操作
1
leo
男
删除
1
小美
女
删除
var oTab = document.getElementById('tab1');
// alert(oTab.children[0].children[1].children[1].innerHTML); //这是就可以弹出“小美”
alert(oTab.tBodies[0].rows[1].cells[1].innerHTML); //弹出小美，更为直观
表格属性
tHead：表格头（DOM中规定thead只能有一个）
tBodies：表格正文（DOM中规定tbody可以有多个）
tFoot：表格尾（DOM中规定tfoot只能有一个）
rows：行
cells：列
Title
编号
姓名
性别
操作
购物车练习
购物车
真划算
商品
单价(元)
颜色
库存
好评率
操作
罗技M185鼠标
80
黑色
893
98%
微软X470键盘
150
黑色
9028
96%
洛克iphone6手机壳
60
透明
672
99%
蓝牙耳机
100
蓝色
8937
95%
金士顿U盘
70
红色
482
100%
购物车
商品
单价(元)
数量
金额(元)
删除
总计
谢谢