js操作dom节点,创建,复制,删除,添加,查找等操作总结

来源:互联网 发布:sqlserver 循环 编辑:程序博客网 时间:2024/05/21 21:39

1.创建节点
document.createElement(“div”);//创建一个div元素,参数需要是标签名;
document.createTextNode(“233”);//创建一个文本节点内容是“233”;
2.添加节点
var myli = document.createElement(“li”);
dom.appendChild(myli); //父节点下面添加一个子节点;(在所有子节点的最后)
另有,insertBefore(),insertAfter()分别是添加一个子节点在参考节点之前,之后;
insertBefore(a,b);意思是a节点会插入b节点的前面。

var oDiv = document.createElement("div");//创建一个div元素,因为是document对象的方法。  var oDiv1 = document.getElementById("div1");  document.body.insertBefore(oDiv,oDiv1);//在oDiv1节点前插入新创建的元素节点 ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾 

3.删除节点
dom.removeChild(myli); //删除子节点myli

4.替换节点
replaceChild(插入的节点,被替换的节点) ,用于替换节点,接受两个参数,第一参数是要插入的节点,第二个是要被替换的节点。返回的是被替换的节点。

var replaceChild = document.body.replaceChild(div1,div2); //将div1替换div2  

5.查找结点
children属性获取子节点的集合,

var ul = document.getElementByTagName("ul");console.log(ul.children);//返回ul子节点li的集合

集合具有length属性,可以使用ul[x]方式访问子节点
另有,childNodes,返回带空格节点的子节点集合;
parentNode :获取父节点;
firstChild ; 获取第一个子节点;
lastChild ;最后一个子节点
nextSibling ; 相邻的下一个子节点;
previousSibling ; 上一个兄弟节点;
6.复制节点
node.cloneNode(deep);
可选。默认是 false。
设置为 true,如果您需要克隆节点及其属性,以及后代
设置为 false,如果您只需要克隆节点及其后代
一般cloneNode(true);

var ul = document.getElementByTagName("ul"); var newul = ul.cloneNode(true);

7.操作dom属性:

node.getAttribute(name)//返回元素的属性值,属性由name指定 node.setAttribute('id','myul');//设置节点的属性node.removeAttribute(name)// 这个方法从元素中删除属性name 
阅读全文
0 0
原创粉丝点击