JS 操作Dom节点之CURD

时间：2023-03-08 20:50:29

许多优秀的Javascript库，已经封装好了丰富的Dom操作函数，这可以加快项目开发效率。但是对于非常注重网页性能的项目来说，使用Dom的原生操作方法还是必要的。

1. 查找节点

 document.getElementById()

 //兼容问提：IE低版本不仅检查Id属性，还会检查Name属性，当Name属性匹配参数时也会返回该元素

 //解决方法：不要让一个元素name属性和另一个元素的id属性相同

 document.getElementsByTagName()
 document.getElementsByName()

2. 遍历节点

 parentNode

 firstChild

 lastChild

 previousSibling

 nextSibling

 childNodes

 //兼容问题： IE下会把节点间的空白、换行、tab全部忽略；Firefox会认为是文本节点

 //解决方法： 遍历节点的时候，使用nodeType nodeValue滤除空白、换行、tab
10 hasChildNode()

3. 节点信息

 nodeType   //元素：1 属性：2  文本：3  文档：9

 nodeName   //元素：大写标签名  属性：属性名  文本：#text

 nodeValue

4. 修改节点

 appendChild(newNode)

 insertBefore(newNode [, refNode])

 replaceChild(newNode [, refNode])

 removeChild(childNode)

 document.createElement()

 document.createTextNode()

 document.createDocumentFragment()

 getAttribute(name)

 setAttribute(name, value)

 innerHTML

5. 克隆节点

 cloneNode(boolean deep) //默认false，只复制当前节点； true，复制当前节点和其子节点

 //兼容问题：IE下会复至节点的事件处理程序

 //解决方案：复制之前最好先移除事件处理程序

6. 特殊集合

 document.forms //返回所有from元素集合

 document.images //返回所有img元素集合

 document.links //返回所有带href属性的a元素集合

 document.anchors //返回所有带name属性的a元素集合

 //兼容问题：Firefox不支持用()类似，doucment.forms(name)访问集合里的元素

 //解决方案：统一用下标的形式获取集合里的元素，document.forms[name]

7. 元素属性

 id

 style       //style.cssText  批量操作样式

 className

 title

 //兼容问题： IE7及以前版本通过setAttribute设置class和style，无效

 //解决方案：使用className和style设置其值

8. 动态script、link、style

 //动态加载文件

 var script = document.createElement('script');

 style.type = 'text/javascript';

 script.src = 'your.js';

 document.body.applendChild(script);

 var link= document.createElement(link);

 link.rel = 'stylesheet';

 link.type = 'text/css';

 link.href = 'your.css';

 document.getElementsByTagName('head')[0].appendChild(link);

 //动态创建脚本或样式

 var code,

     script = document.createElement('script');

 script.type = 'text/javascript';

 code = '(function(){//...})();';

 try {

     script.appendChild(document.createTextNode(code));

 } catch (e) {

     script.text = code;

 }

 document.body.applendChild(script);

 //兼容问题：safari 3.0之前版本不支持text,且IE将script视为一个特殊元素，不允许DOM访问其子节点

 //解决方案：除IE外所有浏览器支持创建文本节点的方法，IE下使用text属性来设置

 var code,

     style = document.createElement('style');

 style.rel = 'stylesheet';

 style.type = 'text/css';

 code = '(function(){//...})();';

 try {

     style.appendChild(document.createTextNode(code));

 } catch (e) {

     style.stylesheet.cssText = code;

 }

 document.getElementsByTagName('head')[0].appendChild(style);

 //兼容问题：IE将style视为一个特殊元素，不允许DOM访问其子节点

 //解决方案：除IE外所有浏览器支持创建文本节点的方法，IE下使用styleSheet.cssText属性来设置

9. 操作table

 //table的属性、方法

 caption

 tHead

 tBodies

 tFoot

 createCaption

 deleteCaption

 createThead

 createTFoot

 deleteThead

 deleteTFoot

 //tbody的属性、方法

 insertRows(pos) //兼容问题：pos：-1表示追加一行，IE默认为-1，Firefox无默认值； //解决方法：务必指定所以位置

 deleteRows(pos)

 rows

 //tr的属性、方法

 insertCells(pos)

 deleteCells(pos)

 cells

 //兼容问题：IE中table和tr不能使用innerHTML来创建内容

 //解决方法：table、tr不要使用innerHTML来创建内容

10. 操作select/option

 //options的属性

 selectedIndex

 //option的属性、方法

 text

 value

 index

 selected

 elmSelect.options.add(new Option(name, value))

 elmSelect.options.remove(index)

 elmSelect.options[index]

 //删除所有option

 elmSelect.options.length = 0

.Thinking

最后获取集合对象，HTMLCollection（如：document.getElementsByTagName()）、NodeList（如：element.childNodes）、NamedNodeMap（如：element.attributes）要注意，这些都是“动态的”，每当文档发生变化时，他们就会更新与文档同步。

 //操作这些集合对象很耗费性能，每当文档变化时，集合对象都会更新

 //Maybe

 var elms = document.getElementsByTagName('div');

 for (var i = 0; i < elms.length; i++) {

     //文档操作

 }

 //Better

 for (var i = 0, len = elms.length; i < len; i++) {

     //文档操作

 }

网页交互涉及到最多操作的地方就是DOM节点，一定要把这些基本的方法烂熟于心。如果项目不要求性能的情况，我们可以大胆使用JS第三方库。请记住不要频繁操作DOM节点，尽量一次性完成DOM节点的修改，将性能损耗降到最低，因为会引起页面的Reflow（回流）和Repaint（重绘）。

Refrence： http://www.quirksmode.org/dom/core/

相关文章