1.DOM
节点之间的关系:父子级,兄弟级
节点操作:获取父子节点,兄弟节点
文档的根节点:document.documetElement
body节点:document.body
当前激活的节点:document.acticeElement //IE
鼠标节点操作:
鼠标事件对象:event
鼠标来源节点:event.fromElement
鼠标去向节点:event.toElement
当前激活的节点:event.srcElement //IE
event.target //ff
节点对象:node
获取父节点:node.parentNode, node.parendElement,
获取所有子节点:node.childNodes(包含文本节点及标签节点),node.children
获取第一个子节点:node.firstChild
获取最后一个子节点: node.lastChild
获取上一个兄弟节点:node.nextSibling
获取下一个兄弟节点:node.previousSibling
获取所有兄弟节点:
jquery: $(dom).siblings();
js: 思路:先获取该节点 的父节点,通过父节点获取父节点的所有子节点,
排除当前节点
2.DOM操作
增、删、改、查
增加:写、创建、克隆、插入
写:document.write()
创建:document.createElement() || document.createTextNode()
克隆:cloneNode()
插入:appendChild() || inserBefore()
删除:
删除节点:removeChild()
删除元素属性:removeAttribute()
修改:
修改节点:replaceChild()
修改属性:setAttribute()
查找:
查找节点:
通过ID获取节点:document.getElementById("id")
获取相同元素的节点:getElementByTagName("a")
获取相同名称的节点:getElementByName("name")
查找元素:
getAttribute()
3.如何使用事件,DOM 事件模型
在DOM元素上绑定事件处理器 //兼容
window.οnlοad=function(){…}
obj.οnmοuseοver=function(e){…}
obj.οnclick=function(){…}
W3C事件模型 //IE不支持
window.addEventListener(‘load’,function(){…},false);
document.body.addEventListener(‘keypress’,function{…},false);
obj.addEventListener(‘mouseover’,callBack,true);
function callBack(){…}
IE事件模型 //IEwindow.attachEvent(‘onload’,function(){…});
document.body.attachEvent(‘onkeypress’,myKeyHandler);
阻止默认事件 : 在W3C下调用e.preventDefault(),IE下 window.event.returnValue=false
阻止事件冒泡: 在W3C标准里调用e.stopPropagation(),IE下 window.event.cancelBubble=true。
4.XMLHttpRequest
IE7+、所有浏览器都内置了 XMLHttpRequest对象
var xhr = new XMLHttpRequest()
IE5/IE6 下
var xhr = new ActiveXObject("Microsoft.XMLHTTP")
发起XMLHttpRequest请求
xhr.onreadystatechange=state_Change;
xhr.open("GET",url,true);
xhr.send(null)
5.严格模式与混杂模式
告诉浏览器如何解析CSS=》盒模型引发
严格模式:W3C标准模式
混杂模式:兼容老旧浏览器
6.盒模型
标准盒模型:
w3c 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分
IE盒子模型
ie 盒子模型的范围也包括 margin、border、padding、content,和标准 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了 border 和 pading。
7.块级元素与行内元素
行内元素会在一条直线上排列,都是同一行的,水平方向排列
块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
行内元素与块级元素属性的不同,主要是盒模型属性上
行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效
行内元素转换为块级元素 display:block (字面意思表现形式设为块级)
8.浮动元素
float || clear
1.脱离文档,不占据空间大小,浮动到包含边框或者另一个浮动元素边框