JavaScript DOM进阶方法(3)

// outerHTML属性在取值和innerHTML一致,但和outerText一样,赋值之后将元素抹去; var box = document.getElementById('box'); box.outerHTML = '123'; alert(document.getElementById('box')); // null; // PS:关于最常用的innerHTML属性和节点操作方法的比较;在插入大量HTML标记时,使用innerHTML的效率明显要高很多; // 因为在设置innerHTML时,会创建一个HTML解析器,这个解析器是浏览器级别的;因此执行JavaScript会快得多; // 但是,创建和销毁HTML解析器也会带来性能损失,最好控制在最合理的范围内; for(var i=0; i<10; i++){ ul.innerHTML = '<i>item</i>'; // 避免频繁; } // 完善 for(var i=0; i<10; i++){ a = '<li>item</i>'; // 临时保存; } ul.innerHTML = a;

四 小结

DOM是语言中立的API,用于访问和操作HTML和XML文档;
DOM1级将HTML和XML文档形象地看作一个层次化的节点树,可以使用JavaScript来操作这个节点树,进而改变底层文档的外观和结构;

DOM由各种节点构成,简要总结如下:

1.最基本的节点类型是Node,用于抽象地表示文档中一个独立的部分;所有其他类型都继承自Node;
2.Document类型表示整个文档,是一组分层节点的根节点;在JavaScript中,document对象是Document的一个实例;
使用document对象,有很多种方式可以查询和获取节点;
3.Element节点表示文档中的所有HTML或XML元素,可以用来操作这些元素的内容和属性;
4.另外还有一些节点类型,分别表示文本内容/注释/文档类型/CDATA区域和文档片段;

您可能感兴趣的文章: