2.3 js基础--DOM

一、javascript组成

        ECMAScript:核心解释器【为我们提供好了最基本的功能：变量声明、函数、语法、运算】。   兼容性：完全兼容。

 

        DoM：文档对象模型【document object Model】，document：操作界面的

                    比如：获取元素、修改样式、创建元素、

 

        BoM： 浏览器对象模型【Browser object Model】,操作浏览器 的，就是window.    

                    window.onload

                    window.alert

                    没有兼容性问题，基本不兼容，兼容不了。

 

二、DoM 

 

            DoM 

                                               document

                                                       |

 

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时插入报错，所以判断】