JavaScript dom操作详细介绍

显示全部楼层 · 2016-12-27 23:35:59

[JavaScript] 纯文本查看 复制代码

// 获取 dom操作节点
document.getElementById() // 根据Id获取元素节点
document.getElementsByName() // 根据name获取元素节点
document.getElementsByTagName() // 根据HTML标签名获取元素节点
document.getElementsByClassName() // 根据class获取元素节点（注意低版本IE是不支持的，chrome随便用）

// 建议大家尽量不用或少用jquery,这两个js原生选择器很强大。而且还支持IE8.
// 远离jQuery，拥抱vue.mvvm开发模式。个人预测，jQuery未来五年内应该会被很多公司弃用或淘汰。
// 所以建议大家精通原生js。框架和库有可能被淘汰，但是原生js永远不可能淘汰，除非不用js咯。那我无话可说
// 现在真的没有让我感觉到jQuery还有什么作用。除了背后有一大堆的插件支持。
// 最开始jQuery优点：选择器和dom操作和事件以及动画和ajax的封装简单易用，兼容IE678，在当年值得叱咤风云
document.querySelector() //根据CSS选择器的规则，返回第一个匹配到的元素
document.querySelectorAll() //根据CSS选择器的规则，返回所有匹配到的元素

// 文档结构和遍历
//（1）作为节点数的文档
1、parentNode 获取该节点的父节点 
2、childNodes // 获取该节点的子节点数组 专业说法：访问一个单元素下所有的直接子节点元素
3、firstChild 获取该节点的第一个子节点
4、lastChild 获取该节点的最后一个子节点
5、nextSibling 获取该节点的下一个兄弟元素
6、previoursSibling 获取该节点的上一个兄弟元素
7、nodeType 节点的类型，9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点
8、nodeVlue Text节点或Comment节点的文本内容
9、nodeName 元素的标签名(如P,SPAN,#text(文本节点),DIV)，以大写形式表示
// (2)作为元素树的文档
1、firstElementChild 第一个子元素节点
2、lastElementChild 最后一个子元素节点
3、nextElementSibling 下一个兄弟元素节点
4、previousElementSibling 前一个兄弟元素节点
5、childElementCount 子元素节点个数量
注意，此5个方法文本节点不算进去

// 创建，插入，删除节点
document.createTextNode() // 创建一个文本节点
document.createElement() // 创建一个元素节点

appendChild() // 将一个节点插入到调用节点的最后面
insertBefore() //接受两个参数，第一个为待插入的节点，第二个指明在哪个节点前面

removeChild(val); // 由父元素调用，删除一个子节点。注意是直接父元素调用，删除直接子元素才有效，删除孙子元素就没有效果了。
replaceChild(new,old) // 使用新节点替换旧节点的内容，第一个参数为新建的节点，第二个节点为被替换的节点

setAttribute() // 设置属性
getAttribute() // 获取属性