一、javascript组成
ECMAScript:核心解释器【为我们提供好了最基本的功能:变量声明、函数、语法、运算】。 兼容性:完全兼容。
DoM:文档对象模型【document object Model】,document:操作界面的
比如:获取元素、修改样式、创建元素、
BoM:
浏览器对象模型【Browser object Model】,操作浏览器 的,就是window.
window.onload
window.alert
没有兼容性问题,基本不兼容,兼容不了。
二、DoM
DoM
document
|
![](http://966d2a75.wiz03.com/share/resources/4262fb10-8571-4f95-889b-7c7c0ab17fab/index_files/2cec3b49-7367-417f-94b0-73870cf50ae1.jpg)
1、 obj.TagName 获取标签名
(所有的字母都是大写的)
2、 obj.parentNode//获取父节点。
最大的祖宗是document,再往上就没有了null
3、 obj.childNodes//获取子节点【包括了文本 节点(换行等等)】。
节点类型:
标签节点:1
文本节点:3默认的换行。
检测节点的类型。nodeType:3【文本节点】nodeType:1【标签节点】
4、 obj.children;//获取子节点。【只包括他 儿子不包括孙子】,是个数组。
5、 obj.
previousSibling//获取上一个兄弟元素。至兼容ie 6,7,8.
obj,previousElementSibling//高版本浏览器获得上一个兄弟元素。
“||”的妙用:如果两个都是真的既是真的。如果第一个是假的才会执行后面的。如果第一个是真的则执行。永远执行最后的那个。var pre= previousElementSibling|| oOn.previousSibling//如果一真则真。前面兼容了后面就不执行了。
6、 obj.nextSibling;
obj.nextElementSibling
var next=
nextElementSibling||
oOn.nextSibling;//长的写前边。
7、 obj.firstElementChild;//兼容高级浏览器
obj.firstChild;//兼容ie 6 7 8
var ofirst=obj.firtElementChild||obj.firstChild ;
8、 obj.lastElementChild;
obj.lastChild;
var la=obj.lastElementChild||obj.lastChild;
9、
物体信息3
obj.offsetWidth:获取盒子模型的宽度 width padding*2 border*2;
obj.offsetHeight:获取盒子模型的高度
obj.offsetLeft:获取元素 距离定位父级的左边距。没有right
obj.offsetTop:获取元素距离定位父级的上边距。没有 bottom
obj.offsetParent:获取定位父级。总结:结构的最高父级最大是 document
定位的最高父级最大是body
11、 document.createElement('div');//创建元素
document.documentElement;//获取html标签。
父级.appendChild(创建的元素)// 在父级的最后边添加了一个元素。
父级.insertBefore(你要插入的元素,插入到谁之前);
【低版本浏览器父级.children.length==0时插入报错,所以判断】