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对象。