javascript中级笔记
浏览数：21 /
时间：2015年06月08日
DOM : Document Object Model 文档对象模型
文档：html页面
文档对象：页面中元素
文档对象模型：定义 为了能够让程序(js)去操作页面中的元素
DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点）
DOM节点
getElementById
getElementByTagName
document
document.body
元素.childNodes : 只读 属性 子节点列表集合
标准下：包含了文本和元素类型的节点，也会包含非法嵌套的子节点
非标准下：只包含元素类型的节点，ie7以下不会包含非法嵌套子节点
childNodes只包含一级子节点，不包含后辈孙级以下的节点
DOM节点的类型有很多种 12种
元素.nodeType : 只读 属性 当前元素的节点类型
元素节点 : 1
属性节点 : 2
文本节点 : 3
childNodes问题很多建议使用children
元素.children : 只读 属性 子节点列表集合
标准下：只包含元素类型的节点（不包含文本节点了）
非标准下：只包含元素类型的节点
for (var i=0; i<oUl.children.length; i++) {
oUl.children[i].style.background = ‘red‘;
}
元素.firstChild : 只读 属性 第一个子节点
标准下：firstChild会包含文本类型的节点
非标准下：只包含元素节点
元素
var oFirst = oUl.firstElementChild || oUl.firstChild;
oFirst.style.background = ‘red’;
//在不支持firstElementChild的时候它返回null，后面返回textNode，所以会报错。
正确的使用方法如下：
if ( oUl.children[0] ) {
oUl.children[0].style.background = ‘red‘;
} else {
alert( ‘没有子节点可以设置‘ );
}
元素.lastChild || 元素.lastElementChild 最后一个子节点
元素.nextSibling || 元素.nextElementSibling 下一个兄弟节点
元素.previousSibling || 元素.previousElementSibling 上一个兄弟节点
元素.parentNode : 只读 属性 当前节点的父级节点 没有兼容性问题
元素.offsetParent : 只读 属性 离当前元素最近的一个有定位属性的父节点
如果没有定位父级，默认是body
ie7以下，如果当前元素没有定位默认是body，如果有定位则是html
ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上
元素.offsetLeft[Top] : 只读 属性 当前元素到定位父级的距离（偏移值）
到当前元素的offsetParent的距离
如果没有定位父级
offsetParent -> body
offsetLeft -> html
如果有定位父级
ie7以下：如果自己没有定位，那么offsetLeft[Top]是到body的距离
如果自己有定位，那么就是到定位父级的距离
其他：到定位父级的距离
<div id="div1" style="width: 100px; height: 100px; border: 1px solid red; padding: 10px; margin: 10px;"></div>
alert( oDiv.style.width ); //100
alert( oDiv.clientWidth ); //样式宽 + padding 120
alert( oDiv.offsetWidth ); //样式宽 + padding + border 可视区宽 + 边框 122
创建元素：
/*
document.createElement(标签名称); 创建元素
*/
var oLi = document.createElement(‘li‘);
//oLi.innerHTML = oText.value + ‘<a href="javascript:;">删除</a>‘;
oLi.innerHTML = oText.value;
var oA = document.createElement(‘a‘);
oA.innerHTML = ‘删除‘;
oA.href = ‘javascript:;‘;
oA.onclick = function() {
/*
父级.removeChild(要删除的元素); 删除元素
*/
oUl.removeChild( this.parentNode );
}
oLi.appendChild( oA );
//添加到页面中
/*
父级.appendChild(要添加的元素) 方法 追加子元素
*/
//oUl.appendChild( oLi );
/*
父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素
在ie下如果第二个参数的节点不存在，会报错
在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加
*/
//oUl.insertBefore( oLi, oUl.children[0] );
if ( oUl.children[0] ) {
oUl.insertBefore( oLi, oUl.children[0] );
} else {
oUl.appendChild( oLi );
}
元素的替换
/*
父级.replaceChild(新节点，被替换节点) 替换子节点
*/
//document.body.replaceChild( oDiv, oP );
/*
appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点，也可以操作已有节点
*/
//oP.appendChild( oDiv );
获取所有节点
document.getElementsByTagName(‘*’);
表单元素：
<form id="form1">
<input type="text" id="text1" name="username" value="" />
</form>
var oForm = document.getElementById(‘form1’);
获取表单中一个元素 表单.元素name
alert( oForm.username.value );
table里面会默认有一个tbody
获取第二个tr里的第二个元素的写法：
oTab.children[0].children[1].children[1].innerHTML;
tHead : 表格头
tBodies ： 表格正文
tFoot ： 表格尾
rows ： 行
cells ： 列
oTab.tBodies[0].rows[1].cells[1].innerHTML;
BOM : Browser Object Model 浏览器对象模型
//open(地址默认是空白页面，打开方式默认新窗口) 打开一个新窗口
//window.open(‘http://www.baidu.com‘, ‘_self‘);
//window.open(‘http://www.baidu.com‘, ‘_self‘);
opener = window.open();//返回值 返回的新开页面的window对象
//alert(opener == window)
//opener.document.body.style.background = ‘red‘;
window.close(); 关闭窗口
ff : 无法关闭 chrome : 直接关闭 ie : 询问用户
//window.navigator.userAgent : 浏览器信息
//alert( window.navigator.userAgent )
if ( window.navigator.userAgent.indexOf(‘MSIE‘) != -1 ) {
alert(‘我是ie‘);
} else {
alert(‘我不是ie‘);
}
window.location.href = window.location内容
window.location.search = url?后面的内容
window.location.hash = url#后面的内容
//可视区尺寸
//alert( document.documentElement.clientHeight );
//滚动距离
//alert( document.documentElement.scrollTop ); 可视区域到顶部的距离
//alert( document.body.scrollTop );
//document.documentElement.scrollTop = 100
//var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 这样做才兼容
//alert(scrollTop)
var oDiv = document.getElementById(‘div1‘);
//scrollHeight : 内容实际宽高
//offsetHeight
//alert( document.body.offsetHeight );
//ie : 如果内容没有可视区高，那么文档高就是可视区
//alert( document.documentElement.offsetHeight );
alert( document.body.offsetHeight );
//onscroll : 当滚动条滚动的时候触发
var i = 0;
window.onscroll = function() {
document.title = i++;
}
//onresize : 当窗口大小发生变化的时候触发
window.onresize = function() {
document.title = i++;
}
事件：
焦点 : 使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入。
我们可以通过一些方式给元素设置焦点
1.点击
2.tab
3.js
不是所有元素都能够接收焦点的.能够响应用户操作的元素才有焦点
onfocus : 当元素获取到焦点的时候触发
oText.onfocus = function()
onblur : 当元素失去焦点的时候触发
oText.onblur = function()
obj.focus() 给指定的元素设置焦点
obj.blur() 取消指定元素的焦点
obj.select() 选择指定元素里面的文本内容 选中的是用户输入的内容，div里的内容不行
event : 事件对象 , 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的调用。飞机-黑匣子
事件对象必须在一个事件调用的函数里面使用才有内容
事件函数：事件调用的函数，一个函数是不是事件函数，不在定义的决定，而是取决于这个调用的时候
兼容
ie/chrome : event是一个内置全局对象 ff下面是没有这个对象的 var ev = ev || event;
标准下 : 事件对象是通过事件函数的第一个参数传入
如果一个函数是被事件调用的那么，这个函数定义的第一个参数就是事件对象
clientX[Y] : 当一个事件发生的时候，鼠标到页面可视区的距离
*/
//alert( event ); //这里没有事件
/*document.onclick = function() {
alert(event);
};*/
function fn1(ev) {
//alert( event );
//alert( ev );
var ev = ev || event;
//alert(ev);
/*for ( var attr in ev ) {
console.log( attr + ‘ = ‘ + ev[attr] );
}*/
alert(ev.clientX);
}
//fn1(); //不是事件调用的函数
document.onclick = fn1; //是事件调用的函数，所以event有内容
//onmousemove : 当鼠标在一个元素上面移动的触发
//触发频率不是像素，而是间隔时间，在一个指定时间内（很短），如果鼠标的位置和上一次的位置发生了变化，那么就会触发一次
var oDiv = document.getElementById(‘div1‘);
document.onmousemove = function(ev) {
//document.title = i++;
var ev = ev || event;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
oDiv.style.left = ev.clientX + ‘px‘;
oDiv.style.top = ev.clientY + scrollTop + ‘px‘;
}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
