<body>
<pre>
<div>
DOM基本概念/*兼容性问题或者说是差异主要由于浏览器采用标准不同造成*/
Document Object Model 文档对象模型
文档：html页面
文档对象：文档中的元素
文档对象模型：定义 为了让程序（JS）能够去操作页面中的元素
DOM将文档当作一个树状结构,并且定义了方法来操作页面中节点
比如 documentElementById等是方法,可以设置的
比如 document,document.body等是属性,只读的
document
html
head body
p ul
li li...
DOM节点类型 共计12种
元素.nodeType 只读属性 节点类型
元素节点 1
属性节点 2
文本节点 3
元素.attributes 只读属性 节点属性列表
if( 元素.childNodes[i].nodeType == 1 ){
如果节点类型为1，即元素节点，就执行
}
元素.childNodes 只读属性 子节点列表集合/*不推荐使用*/
/*推荐使用children，标/非标只包含元素类型节点*/
/*非法嵌套的解析不同依旧存在，主要因为浏览器标准造成*/
</div>
<div>
firstChild 只读属性
标准下：包含文本类型节点,firstChild firstElementChild 均有
非标准下：只包含元素节点,没有firseElementChild
兼容
var oFirst = firstElementChild||firstChild;
/*但是，标准下初始时如果元素内没有子节点，依旧会报错*/
推荐使用 元素.children[i]
<div>
lastChild最后一个子节点
nextSibling下一个兄弟节点
previousSibling上一个兄弟节点
</div>
</div>
<div>
parentNode 当前节点的父节点 只读属性 /*无兼容问题*/
</div>
<div>
offsetParent 当前元素最近的有定位的父节点
没有定位父级 默认为body/*无兼容问题*/
IE7以下
自身有定位时 默认为html或者触发了layout特性的父节点/*元素layout测试（.currentStyle.hasLayoyt;）*/
自身没有定位 默认为body
</div>
<div>
元素.offsetTop[Left]:只读属性 当前元素到定位父级(offsetParent)的距离
</div>
<div>
元素.style.width[height]; /*样式宽[高]*/
元素.clientWidth[Height]; /*样式宽[高]+padding*/
元素.offsetWidth[Height]; /*样式宽[高]+padding+border*/
</pre>
<!--此处截断pre标签，防止例子变形-->
<!--并且证明offsetTop等属性的结果，会因为元素位置异常改变而改变-->
<div id="box" style="width: 100px; height: 100px; padding: 10px; border: 10px solid #f60; overflow: hidden; margin-left: 200px;">
<div id="cont" style="width: 100px; height: 200px; background: #FFC200;"></div>
</div>
<pre>
style="width: 100px; height: 100px; padding: 10px; border: 10px solid #f60; overflow: hidden; margin-left: 150px;"
style="width: 100px; height: 200px; background: #FFC200;"
<div>
pos
while(obj){
pos += obj.offsetLeft[Top];/*包含元素边框*/
obj = obj.offsetParent;
}
</div>
</div>
<div>
<div>
元素属性(方法)
</div>
. & [];
元素.getAttribute(属性名称); 方法 获取指定元素的指定属性值
元素.setAttribute(属性名称); 方法 设置指定元素的指定属性值
元素.removeAttribute(属性名称); 方法 删除指定元素的指定属性值
比如:oCont.removeAttribute('id');
此方法相比较于.和[],可操作自定义属性
此方法相比较于.和[],src地址不会出现完整路径/*ie7依旧为完整路径*/
</div>
<div>
元素创建(方法)
<div>
父级.appendChild(要添加的元素);
父级.insertBefore(新的元素,被插入的子元素);
比如:oUl.insertBefore(oLi,oUl.children[i]);
问题:
在IE下,如果第二个参数的元素不存在会报错
标准下,如果第二个参数的元素不存在会以appendChild的形式插入
解决:
if( 被插入的子元素 ){
父级.insertBefore(新的元素,被插入的子元素);
}else{
父级.appendChild(要添加的元素);
}
需要删除元素的父级.removeChild( 需要删除的元素 );
被替换元素的父级replaceChild( 替换的新元素,被替换的元素 );
</div>
</div>
<div>
表格
<div>
tHead 表格头
tBodies 表格正文
tFoot 表格尾
rows 表格行
cells 表格列
oTab.tBodies[i].rows[i].cells[i].innerHTML
<a href="04-DOM表格.html" target="_blank">表格实例</a>
</div>
</div>
<div>
表单
<div>
读取
oForm[name][attributes];
onchange
oFrom[name].onchange = fn;
text:焦点移出后触发
radio/checkbox:
标准下：点击改变值触发
非标准下：焦点移开后触发
select:/*取值:oForm[name].value;*/
选中即触发
事件
onsubmit 表单提交事件对应配合 type = 'submit' 标签使用
oForm.onsubmit = function (){
if( this[name][value...] == '' ){
alert ('请输入内容');
return false;
}
};
submit(); 提交表单方法,可以配合其他按钮或事件使用
onreset 表单重置
配合confirm使用
oFrom[name].onreset = function (){
return confirm('是否充值表单');
};
</div>
</div>
</pre>
</body>
浙公网安备 33010602011771号