本篇文章给大家带来的内容是关于原生js对dom可以进行什么操作？原生js对dom的操作方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、原生js对dom的操作方法之dom创建
dom节点（node）通常对应于一个标签，一个文本，或者一个html属性。dom节点有一个nodetype属性用来表示当前元素的类型，它是一个整数：
1：element，元素  
2：attribute，属性  
3：text，文本
var node1 = document.createelement(‘p’); var node2 = document.createtextnode(‘hello world!’);
二、原生js对dom的操作方法之dom查询
// 返回当前文档中第一个类名为 “myclass” 的元素 var el = document.queryselector(“.myclass”); // 返回一个文档中所有的class为”note”或者 “alert”的p元素 var els = document.queryselectorall(“p.note, p.alert”); // 获取元素 var el = document.getelementbyid(‘xxx’); var els = document.getelementsbyclassname(‘highlight’); var els = document.getelementsbytagname(‘td’); element也提供了很多相对于元素的dom导航方法： // 获取父元素、父节点 var parent = ele.parentelement; var parent = ele.parentnode; //只读，没有兼容性问题 var offsetparent=ele.offsetparent; //只读，找到最近的有定位的父节点。 //没有定位父级时，默认是body;但在ie7以下，如果当前元素没有定位属性，返回body，如果有，返回html; //如果当前元素某个父级触发了haslayout，则返回触发了haslayout这个元素。 // 获取子节点，子节点可以是任何一种节点，可以通过nodetype来判断 var nodes = ele.children; //标准下、非标准下都只含元素类型，但对待非法嵌套的子节点，处理方式与childnodes一致。 var nodes = ele.childnodes; //非标准下：只包含元素类型，不会包含非法嵌套的子节点。 //标准下：包含元素和文本类型，会包含非法嵌套的子节点。 //获取元素属性列表 var attr = ele.attributes; // 查询子元素 var els = ele.getelementsbytagname(‘td’); var els = ele.getelementsbyclassname(‘highlight’); // 当前元素的第一个/最后一个子元素节点 var el = ele.firstchild; //对待标准和非标准模式，如childnods var el = ele.lastchild; var el = ele.firstelementchild; //非标准不支持 var el = ele.lastelementchild; // 下一个/上一个兄弟元素节点 var el = ele.nextsibling; var el = ele.previoussibling; var el = ele.nextelementsibling; var el = ele.previouselementsibling;
兼容的获取第一个子元素节点方法：
var first=ele.firstelementchild||ele.children[0];
三、原生js对dom的操作方法之dom更改（增加、删除、替换、插入、克隆）
// 添加、删除子元素 ele.appendchild(el); ele.removechild(el); // 替换子元素 ele.replacechild(el1, el2); // 插入子元素 parentelement.insertbefore(newelement, referenceelement); //克隆元素 ele.clonenode(true) //该参数指示被复制的节点是否包括原节点的所有属性和子节点
四、原生js对dom的操作方法之属性操作
// 获取一个{name, value}的数组 var attrs = el.attributes; // 获取、设置属性 var c = el.getattribute(‘class’); el.setattribute(‘class’, ‘highlight’); // 判断、移除属性 el.hasattribute(‘class’); el.removeattribute(‘class’); // 是否有属性设置 el.hasattributes();
相关推荐：
 bom、dom与js中的事件
用php代替js玩转dom
以上就是原生js对dom可以进行什么操作？原生js对dom的操作方法的详细内容。