文档:html页面
文档对象:页面中的元素
文档对象模型:为了能让程序(js)操作页面中的元素
DOM 看做一颗树状结构 里面的元素为节点(DOM节点),同时定义方法操作树
元素.childNodes:子节点列表集合
childNodes只包含一级子节点,不包含孙及以下。
标准下:包含文本和元素节点,也包含非法嵌套类型
非标准下:只包含元素类型节点,ie7不包含非法嵌套
元素.nodeType:只读 属性当前元素的节点类型
元素节点:1 \\ 文本节点:3
//属性
//元素属性:元素.attributes 只读属性集合
DOM类型:12种 元素节点、文本节点(也算)
children:只读属性 子节点列表集合。
children:只包含一级子节点,不包含孙及以下。*/
/*
元素.firstChild、lastChild:第一个(最后一个)元素
标准下firstChild会包含文本类型的节点(无效)
非标准:只包含元素节点
元素.firstElementChild(lastElementChild、firstElementChild=children[0]、nextElementSibling、previousElementSibling)
(可以直接再浏览器中使用该属性 需加Element):只读 属性 标准下获取第一个元素类型的子节点
元素.nextElementSibling:下一个兄弟节点
元素.previousElementSibling:上一个兄弟节点
*/
元素.parentNode:只读 属性 当前节点的唯一的父级节点.(可以直接使用)
元素.offsetParent:只读 属性 离当前元素最近的一个有定位的父节点
如果没有定位父级默认为body
*/
/*document.createElement(要创建的标签名)创建元素
父级.removeChild(要删除的元素) 删除元素
添加到指定位置
父级.appendChild(要添加的元素)方法 追加(创建的标签)子元素
oUl.appendChild(oLi);//后面添加
父级.insertBefore(新的元素,被插入元素)
oUl.insertBefore(oLi,oUl.children[0]);//前面插入
父级.replaceChild(新节点,被替换的节点)
document.body.replaceChild(oDiv,oP);前一个替换后一个
oP.appendChild(oDiv);
appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点,也可以操作已有节点*/
//alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);//dd
/*tHead:表格头
tBodies:表格内容
tFoot:表格尾
rows:行
cells:列
*/
/*<input type="text" id="text1" name="text1"/>
name :oForm.text1.value/父级.name[第几个].value
有name属性的用name选择比id更好
alert(oForm.text1.value);*/
// onfocus:当元素获取到焦点的时候触发
//onblur:当元素失去焦点的时候
// obj.focus();给指定元素设置焦点
// obj.blur();取消指定元素的焦点
//obj.select();只能选择用户输入的内容
事件冒泡:当一个元素接收到事件的时候,会把他接受到的所有传播给他的父级;一直到 window 为事件冒泡(该发生还是会发生)
//给一个对象绑定一个事件处理函数的第一种形式
//给一个元素绑定事件函数的第二种形式:
//给一个对象的同一个事件绑定多个不同的函数:(同一个按钮点第一次发生ss,第二次 发生xx)
function fn1(){
alert(1);
}
ie:obj.attachEvent(事件onclick,函数名称);
document.attachEvent('onclick',fn1);
ie:没有捕获,点击加on、顺序为从最后一个到第一个
标准:obj.addEventListener(事件不用on,函数名称,是否捕获true or false)
是否捕获:默认为false;false:冒泡、true:捕获;
标准:有捕获、事件名称没有on、顺序为第一排到最后
//事件取消
/*
ie:obj.detachEvent(事件名称,函数名字);
标准:obj.removeEventListener(事件名称,函数名字,是否捕获)
*/
/*
onkeydown:当键盘按键按下;如果按下不抬起会连续触发
onkeyup:当键盘按键抬起;
// 不是所有元素都能够接受键盘事件,有焦点就可以
按下具体的键位
event.keyCode:数字类型 键盘按键的值 键值
ctrlKey、shiftKey、altKey 布尔值
当一个事件发生的时候,如果 ctrl || shift || alt
键为按下状态则返回true否则false
document.onkeydown=function(event){//键盘按下发生的事
var e = event || window.event || arguments.callee.caller.arguments[0];
// alert(event.keyCode)//数字代表的键位
if(e && e.keyCode==13){ // enter 键
alert('按下了回车键');
}
};
</script>
事件默认行为:当一个事件发生的时候浏览器自己默认做得事情
/*
怎么阻止?:
当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用return false;
oncontextmenu:右键菜单事件,显示出来时候触发