一、节点
1.节点层次
(1)节点是浏览器中的基础类型,所有DOM对象都是特殊的节点,继承自node,可以使用节点自带的方法。(2)可以通过somenode.childNodes[0];somenode.childNodes.item(0);somenode.firstChild;somenode.lastChild迭代当前节点的子节点。
(3)可以通过somenode.parentNode获取当前节点的父节点。
(4)可以通过somenode.appendChild(anothernode);somenode.insertBefore(anothernode,somenode.firstChild);somenode.replaceChild(another,somenode.firstChild)添加和替换子节点。
(5)可以通过somenode.removeChild(somenode.firstChild)删除节点。
2.document类型
(1)document是一个特殊的node,是window的一个属性,可以在全局直接访问。(2)可以通过document.documentElement;document.childNodes[0];document.firstChild获取html元素的引用,第一种效率最高。
(3)可以通过document.body获取body元素引用,这个最常用。
(4)可以通过document.title获取和设置页面的标题,这个设置不影响<title>标签。
(5)可以通过document.domain设置当前页面所在的域。当页面中存在多个frame/iframe,并且这些框架中的页面在不同域时,通过js是无法直接完成跨域页面通信的。如果把每个页面的document.domain设置成相同的值,这些页面就能相互访问对方包含的javascript对象了。
(6)可以通过document.getElementById;documment.getElementsByTagName;document.getElementsByName获取到html元素的引用。非常常用。
(7)可以通过document.anchors;document.applets;document.forms;document.images;document.links等特殊集合直接访问html元素。
(8)可以通过document.write;document.writeln动态写入文档流。
3.element类型
(1)直接把element理解为html元素也没有问题。因为element广泛的应用,就是提供了一组操作html标签的API。(2)可以通过element.arrtName获取或设置html元素的某个属性值。如div.id=1;img.src="1.jpg";table.className="class1"。
(3)可以通过element.getAttribute("attrName");element.setAttribute("attrName",value);element.removeAttribute("attrName")设置、修改或删除html元素的属性。getAttribute返回的是某个属性的值,如果用这个方法去访问style或者onclick之类的属性,得到的都是字符串,而不是对象或函数。
(4)可以通过document.createElement("div"/"<div id='mydiv'>");的形式创建element。
二、DOM操作
1.动态脚本
(1)动态脚本指的是不在head写script标签载入js文件,而是通过创建element并添加的方法把外部js引入。(2)引入动态脚本的难点在于,怎样确定脚本已经加载完毕可以使用了。我们将在以后的内容详细展开,这里只给出一个简单的例子。
- //小实验
- var script=document.createElement("script");
- script.type="text/javascript";
- script.src="demo.js";
- document.body.appendChild(script);
2.动态样式
(1)动态脚本是引入js文件,那css文件能动态加载么?答案是肯定的。(2)样式的载入本来就是异步的,因此动态载入样式有个好处就是不用太关心啥时候完成。
- //小实验
- var link=document.createElement("link");
- link.rel="stylesheet";
- link.type="text/css";
- link.href="style.css";
- document.getElementsByTagName("head")[0].appendChild(link);
三、DOM扩展
1.选择器
用原生的getElementById和getElementsByTagName选取往往比较麻烦,扩展性也不好。因此有很多js库写了自己的选择器。W3C制定了一个选择器标准,要求所有实现此类功能的js库,都完成一个或使用已经存在的选择器,选择器使用CSS筛选器语法,开发人员都会尽可能提高自己的选择器的性能,从而提高js库的执行效率。目前实现最好的是jQuery的sizzle引擎。2.HTML5
(1)HTML5定义DOM的同时,为js提出了很多新的API。(2)document.getElementsByClassName(),根据class内容筛选出html元素;
(3)element.classlist,定义了一套操作class的api,如element.classlist.add/remove/toggle/contains。
(4)document.activeElement,保存当前具有焦点的element。element.hasFocus(),返回当前元素时候含有焦点。
(5)document.readyStated,表示页面是loading还是complete,目前所有浏览器都支持。
(6)document.charset,获取或设置页面渲染的字符集。
(7)自定义数据属性集data-。自定义字符集的好处是不必利用getAttribute去获取某个自定义属性,而是直接通过element.dataset.myAttr操作。当然,这要求html标签中,属性的前缀是data-。
(8)scrollIntoView(),允许控制滚动条滚动,以显示某个元素。element.scrollIntoView()。传入true或NULL,让元素顶部与窗口顶部对齐;传入false,让元素尽可能多的显示在页面中,类似与垂直居中。
四、专业扩展
浏览器厂商都根据自己的喜好在标准之外添加着一些扩展功能。基本上这些功能是不通用的,但以后说不定会成为标准。比如element.children,是IE为了去除页面空白字符弄出来的,如果没有空白字符,这个和childNodes是完全一样的。还有contains,判断一个节点是不是另一个节点的祖先(注意不止是父亲),if (parentNode.contains(childNode))。另外还有几个控制滚动条的方法,这里不再赘述。五、DOM2和DOM3
1.以上都是DOM1,而DOM2和DOM3的目的在于扩展DOM API,以满足操作XML的所有需求,同时提供更好的错误处理及特性检测能力。DOM2没有在DOM1基础上引入新类型,只是增加了新方法和新属性;DOM3同样增强了已有类型,但也引入了一些新类型。2.js修改样式style的功能是DOM2才加入的。同时DOM2又增加了操作styleSheet的API。
3.DOM2级定义了createRange()方法,定义一个选中的范围。