许多优秀的Javascript库，已经封装好了丰富的Dom操作函数，这可以加快项目开发效率。但是对于非常注重网页性能的项目来说，使用Dom的原生操作方法还是必要的。
1. 查找节点
1 document.getElementById() 2 //兼容问提：IE低版本不仅检查Id属性，还会检查Name属性，当Name属性匹配参数时也会返回该元素 3 //解决方法：不要让一个元素name属性和另一个元素的id属性相同 4 5 document.getElementsByTagName()
6 document.getElementsByName()
2. 遍历节点
1 parentNode 2 firstChild 3 lastChild 4 previousSibling 5 nextSibling 6 childNodes 7 8 //兼容问题： IE下会把节点间的空白、换行、tab全部忽略；Firefox会认为是文本节点 9 //解决方法： 遍历节点的时候，使用nodeType nodeValue滤除空白、换行、tab
10 hasChildNode()
3. 节点信息
1 nodeType //元素：1 属性：2 文本：3 文档：9 2 nodeName //元素：大写标签名 属性：属性名 文本：#text 3 nodeValue
4. 修改节点
1 appendChild(newNode) 2 insertBefore(newNode [, refNode]) 3 replaceChild(newNode [, refNode]) 4 removeChild(childNode) 5 6 document.createElement() 7 document.createTextNode() 8 document.createDocumentFragment() 9 getAttribute(name) 10 setAttribute(name, value) 11 12 innerHTML
5. 克隆节点
1 cloneNode(boolean deep) //默认false，只复制当前节点； true，复制当前节点和其子节点 2 //兼容问题：IE下会复至节点的事件处理程序 3 //解决方案：复制之前最好先移除事件处理程序
6. 特殊集合
1 document.forms //返回所有from元素集合 2 document.images //返回所有img元素集合 3 document.links //返回所有带href属性的a元素集合 4 document.anchors //返回所有带name属性的a元素集合 5 6 //兼容问题：Firefox不支持用()类似，doucment.forms(name)访问集合里的元素 7 //解决方案：统一用下标的形式获取集合里的元素，document.forms[name]
7. 元素属性
1 id 2 style //style.cssText 批量操作样式 3 className 4 title 5 6 //兼容问题： IE7及以前版本通过setAttribute设置class和style，无效 7 //解决方案：使用className和style设置其值
8. 动态script、link、style
1 //动态加载文件 2 var script = document.createElement('script');
3 style.type = 'text/javascript'; 4 script.src = 'your.js'; 5 document.body.applendChild(script); 6 7 8 var link= document.createElement(link);
9 link.rel = 'stylesheet'; 10 link.type = 'text/css'; 11 link.href = 'your.css'; 12 document.getElementsByTagName('head')[0].appendChild(link); 13 14 15 16 //动态创建脚本或样式 17 var code, 18 script = document.createElement('script');
19 script.type = 'text/javascript'; 20 code = '(function(){//...})();'; 21 try { 22 script.appendChild(document.createTextNode(code)); 23 } catch (e) { 24 script.text = code; 25 } 26 document.body.applendChild(script); 27 28 //兼容问题：safari 3.0之前版本不支持text,且IE将script视为一个特殊元素，不允许DOM访问其子节点 29 //解决方案：除IE外所有浏览器支持创建文本节点的方法，IE下使用text属性来设置 30 31 var code, 32 style = document.createElement('style');
33 style.rel = 'stylesheet'; 34 style.type = 'text/css'; 35 code = '(function(){//...})();'; 36 try { 37 style.appendChild(document.createTextNode(code)); 38 } catch (e) { 39 style.stylesheet.cssText = code; 40 } 41 document.getElementsByTagName('head')[0].appendChild(style); 42 43 //兼容问题：IE将style视为一个特殊元素，不允许DOM访问其子节点 44 //解决方案：除IE外所有浏览器支持创建文本节点的方法，IE下使用styleSheet.cssText属性来设置
9. 操作table
1 //table的属性、方法 2 caption 3 tHead 4 tBodies 5 tFoot 6 createCaption 7 deleteCaption 8 createThead 9 createTFoot 10 deleteThead 11 deleteTFoot 12 13 14 //tbody的属性、方法 15 insertRows(pos) //兼容问题：pos：-1表示追加一行，IE默认为-1，Firefox无默认值； //解决方法：务必指定所以位置 16 deleteRows(pos) 17 rows 18 19 //tr的属性、方法 20 insertCells(pos) 21 deleteCells(pos) 22 cells 23 24 //兼容问题：IE中table和tr不能使用innerHTML来创建内容 25 //解决方法：table、tr不要使用innerHTML来创建内容
10. 操作select/option
1 //options的属性 2 selectedIndex 3 4 //option的属性、方法 5 text 6 value 7 index 8 selected 9 10 elmSelect.options.add(new Option(name, value)) 11 elmSelect.options.remove(index) 12 elmSelect.options[index] 13 14 15 //删除所有option 16 elmSelect.options.length = 0
.Thinking
最后获取集合对象，HTMLCollection（如：document.getElementsByTagName()）、NodeList（如：element.childNodes）、NamedNodeMap（如：element.attributes）要注意，这些都是“动态的”，每当文档发生变化时，他们就会更新与文档同步。
1 //操作这些集合对象很耗费性能，每当文档变化时，集合对象都会更新 2 3 //Maybe 4 var elms = document.getElementsByTagName('div'); 5 6 for (var i = 0; i < elms.length; i++) { 7 //文档操作 8 } 9 10 //Better 11 for (var i = 0, len = elms.length; i < len; i++) { 12 //文档操作 13 }
网页交互涉及到最多操作的地方就是DOM节点，一定要把这些基本的方法烂熟于心。如果项目不要求性能的情况，我们可以大胆使用JS第三方库。请记住不要频繁操作DOM节点，尽量一次性完成DOM节点的修改，将性能损耗降到最低，因为会引起页面的Reflow（回流）和Repaint（重绘）。
Refrence： http://www.quirksmode.org/dom/core/
转载于:https://www.cnblogs.com/zhouwenhong/p/3840613.html
最后
以上就是健康烧鹅最近收集整理的关于JS 操作Dom节点之CURD的全部内容，更多相关JS内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复