DOM 基本节点操作方法

获取节点的属性

1.获取div的上一个节点

div.previousSibling;
1
2.获取div的上一个标签节点

div.previousElementSibling;
1
3.获取div的下一个节点

div.nextSibling;
1
4.获取div的下一个标签节点

div.nextElementSibling;
1
5.获取div的第一个子节点

div.firstChild;
1
6.获取div的最后一个子节点

div.lastChild;
1
7.获取div的所有子节点

var div=div.childNodes;
1
8.获取父节点

div.parentNode
div.parentElement//ie标准
1
2
9.获取文本

div.innerHTML//获取文本结构+内容
div.innerText//获取文本内容
1
2
获取节点的方法

1.判断div是否有子节点，返回布尔值

var div=div.hasChildNodes();
1
2.获取id名为该字符串的div，返回一个节点

var div=document.getElementById(“id值”);
1
3.获取类名为该字符串的div，返回节点集合

var div=document.getElementsByName(“类名”)
1
4.获取name属性得值为该字符串的div，返回节点集合

var div=document.getElementsByName(“name值”)
1
5.获取标签为该字符串的div，返回节点集合

var div=document.getElementsByTagName(“标签”)
1
文本操作

div.appendData(“内容”)//在div文本节点后面添加该内容
div.deleteData(start,length)//将从start处删除length个字符
div.insertData(start,添加的内容)//插入文本
div.replaceData(start,length,替换后的内容)//替换文本
splitData(offset);//在offset处分割文本节点
1
2
3
4
5
创建节点

var myp=document.createElement(“标签”);//创建一个标签节点
var mytext=document.createTextNode(“内容”);//创建一个文本节点
var myattr=document.createAttribute(“属性名”); //对某个节点创建属性
1
2
3
在标签之后插入节点

myp.appendChild(mytext);//将文本内容加在标签中
div.appendChild(myp);//将p标签节点加到div节点的最后面
1
2
在标签之前插入节点

div.insertBefore(新节点,标签);
1
移动节点

div1.appendChild(div2);//将div2节点放入div1节点
1
删除节点

div1.removeChild(div2);//删除div1节点中的div2节点
1
替换节点

div.replaceChild(新节点,原节点);
1
克隆节点

let newnode=div.cloneNode(true);//true复制所有，false不复制子节点
div.appendChild(newnode);
1
2
获取属性

div.getAttribute(“属性名”);//获取为该属性名的属性值
1
设置属性

div.setAttribute(“属性名”,“属性值”);//设置该属性名的属性值
1
dom浏览器获取div的最终样式

document.defaultView.getComputedStyle(div,null).属性名
1
ie浏览器获取div的最终样式