有关getElementById,getElementsByClassName和$的区别和互通性

延伸话题：如何获取标签名称（js，jquery）

1.原生js：document.getElementById("archivie_scheme").tagName

　　　　document.getElementById("archivie_scheme").nodeName

2.Jquery:$(".archivie_scheme").get(0).tagName

　　　　$(".archivie_scheme").get(0).nodeName

getElementById:该方法可返回对拥有指定 ID 的第一个对象的引用。如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()

getElementsByClassName:方法返回文档中所有指定类名的元素集合，作为 NodeList 对象，和.getElementsByTagName()性质很像，所以要使用方法的时候应该先指定对应的下标

如下图所示getElementById和getElementsByClassName比较明显的应用区别：

$:是jquery常用的一个回传函数,等价于jQuery，可以引用内部封装的方法

其实jquery外层也就是一个闭包，如下实例所示：

 var temp = "Hello World!";
    (function( window, undefined ) {
       var temp = "KAKA World!";
       window.temp = temp;
    })( window );
    alert(temp);

通过上面实例我们可以看出，它的结果应该是KAKA，而不是Hello。因为我们在闭包中导出了temp局部变量为全局变量，因此会覆盖了第一行声明的全局变量temp.

$("#div")是[object Object]返回的是jquery对象，可以使用jquery的内部封装的方法和函数、属性等

document.getElementById("div")是[object HTMLDivElement]，返回的是一个DOM对象；

但是$和dom可以相互转换，如下所示：

var $v =$("#v") ; //jQuery对象 
var v=$v[0];var v=$v.get(0) //DOM对象

有关jquery的核心封装：

jQuery = function( selector, context ) {

        return new jQuery.fn.init( selector, context, rootjQuery );

      }

jQuery.fn = jQuery.prototype;

jQuery.fn.init.prototype = jQuery.fn;

上面的两句话，1.把jQuery对象的原型赋给了fn属性，2.把jQuery对象的原型又赋给了init对象的原型。这样便可以实现：init对象和jQuery具有相同的原型，因此我们在上面返回的init对象，就与jQuery对象有一样的属性和方法

jQuery其实就是将DOM对象加了一层包裹

当其进行DOM对象化的时候就可以调用它们的属性方法（tagName,nodeName）,如上图所示。

有关getElementById,getElementsByClassName和$的区别和互通性

猜你喜欢