js dom获取元素对象

        dom是一个web api，提供了操作dom树的api。我们利用这些api或者对这些api的封装库就可以快速地实现js对dom树地修改，增加网页地交互性和动态性。

目录

一，dom树

二，元素定位方法

2.1 getElementById()方法

2.2 getElementsByTagName()方法

2.3 element.get-node方法

2.4 getElementsByClassName()方法

2.4 querySelector()&querySelectorAll()

三，document对象的属性

3.1 document.body&document.documentElement

3.2 document对象的其他属性

---

一，dom树

        dom树是浏览器解析html文档之后在内存里面形成的类似于二叉树形状的数据结构，并与变量document进行绑定。

        浏览器将html文档所有的内容都解析为节点node，更详细划分为：元素节点element，元素节点又包含元素内容文本节点和元素属性节点，以及注释节点。详细如下图：

        各种节点的包含关系如下：可见element对象属于node节点对象的子类，也就是说所有的element对象都含有node节点对象的属性和方法。

        使用dom时应该注意api函数的参数、函数的功能、以及函数api返回值的是element对象还是node节点对象亦或是comment、attrbute对象。

二，元素定位方法

2.1 getElementById()方法

        一般id具有唯一性，故为Element而不是Elements。dir(obj)用于打印一个对象的所有属性。该方法返回一个对象，log这个对象会打印出这个对象的html文档内容。

2.2 getElementsByTagName()方法

        一个html文档一般包含多个同名tag，所以使用Elements，带s的一般返回伪数组。由于有多个element对象，该方法返回一个伪数组对象HTMLCollection，用于存放定位得到的所有element元素。伪数组就是指：可以像遍历数组和使用下标访问数组一样进行访问。不管tag嵌套多深，都会被定位到。

        另外伪数组里面的元素对象是动态的，如果某个对象被其他js修改过了，那么在伪数组中匹配得到的元素也会发生相应改变。

2.3 element.get-node方法

        document属于根节点，使用document.get……方法可以定位到嵌套比较浅的元素节点。我们也可以从某个嵌套节点开始定位得到其他节点。这是因为元素节点属于node节点的子对象，完全可以使用这些方法。

2.4 getElementsByClassName()方法

         利用类名定位元素节点。多值属性使用空格隔开。

var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";

2.4 querySelector()&querySelectorAll()

        将css选择器作为字符串参数定位element元素。前者只能捕捉到第一个正确的元素，后者能够匹配所有正确的元素对象。

三，document对象的属性

        document代表整个html文档，一个html文档只存在一个html标签和body标签，在dom apis中，将两者作为document对象的属性。

3.1 document.body&document.documentElement

         分别指向body和html标签，也就是body和html两个element对象。

3.2 document对象的其他属性

        地址。document对象的属性大全。