JavaScript DOM数据类型内存分配，如何获取页面元素

数据类型内存分配

简单数据类型又叫做基本数据类型，或者值类型，复杂数据类型又叫做引用类型。

• 值类型：简单数据类型/基本数据类型，在储存时变量中储存的是值本身，因此叫做值类型string，number，boolean，undefined，null

• 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型，通过new关键字创建的对象（系统对象，自定义对象），如Object、Array、Date等。

简单数据类型null返回的是一个空的对象 object

如果有个变量我们以后打算存储为对象，暂时没想好放什么，这时候就给null

• 简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值

• 复杂数据类型 首先在栈里存放的是地址，真正的对象实例存放在堆空间中

堆栈空间分配区别：

    1.栈（操作系统）：由操作系统自动分配释放存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；

简单数据类型存放到栈里面

    2.堆（操作系统）：储存复杂类型对象，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

复杂数据类型存放到堆里面

注意：JavaScript中没有堆和栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式，便于将来学习其他语言

• 引用类型（复杂数据类型）：通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等

• 引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

        function Person(name) {
            this.name = name;
        }
        function f1(x) {//x= p
            console.log(x.name);//刘德华
            x.name = "张学友";
            console.log(x.name);//张学友
        }
        var p = new Person("刘德华");
        console.log(p.name);//刘德华
        f1(p);
        console.log(p.name);//张学友

 API和Web API总结

1.API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现

2.Web API主要针对于浏览器提供的接口，主要针对于浏览器做交互效果。

3.Web API一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）

4.学习Web API可以结合前面学习内置对象方法的学习思路

如何获取页面元素

DOM在我们实际开发中主要是用来操作元素。

获取页面中的元素可以使用以下几种方式：

• 根据ID获取

• 根据标签名获取

• 通过HTML5新增的方法获取

• 特殊元素获取

getElementById获取元素

参数

element是一个Element对象，如果当前文档中拥有特定ID的元素不存在则返回null

id是大小写敏感的字符串，代表了所要查找的元素的唯一ID

返回值

返回一个匹配到ID的DOM Element对象。若在当前Document下没有找到，则返回null

        var timer = document.getElementById('time');
        console.log(timer);
        //5.console,dir打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);

注意： 1.因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签下面
            2.get获得element元素by通过 驼峰命名法
            3.参数id是区分大小写的
            4.返回的是一个元素对象

getElementByTagName获取某些元素

1.返回的是获取过来对象的集合，以伪数组的形式储存的

2.我们想要依次打印里面的元素对象我们可以采取遍历的方法

3.如果页面中只有一个li返回的还是伪数组形式

4.如果页面中没有 这个元素，返回伪数组形式

        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[1]);

5.element.getElementByTagName（‘标签名’）；父元素必须是制定的某个单位元素

        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // var ol = document.getElementsByTagName('ol');
        // console.log(ol[0].getElementsByTagName('li'));
        var ol = document.getElementById('ol')
        console.log(ol.getElementsByTagName('li'));

getElementsByClassName根据类名获得某些元素集合

            var boxs = document.getElementsByClassName('box');
            console.log(boxs);

 querySelector

返回制定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav

            var fb = document.querySelector('.box');
            console.log(fb);
            var nav = document.querySelector('#nav')
            console.log(nav);
            var li = document.querySelector('li')
            console.log(li);

querySelectorAll()返回制定选择器的所有元素对象集合

            var allboxs = document.querySelectorAll('.box')
            console.log(allboxs);
            var lis = document.querySelectorAll('li')
            console.log(lis);

获取特殊元素（body，html）

获取body元素

1.doucument.body//返回body元素对象

            var bodyEle = document.body;
            console.log(bodyEle);

 获取html元素

1.document.documentElement//返回html元素对象

            var htmlEle = document.documentElement;
            console.log(htmlEle);