1、创建dom节点 document.createElement(dom标签)
var div = document.createElement('div');
div.innerHTML = 123;
2、在指定节点最后插入节点appendChild()
var div = document.createElement('div');
div.innerHTML = 123;
document.body.appendChild(div);
3、在指定元素前面插入节点 父节点.insertBefore(新的节点, 相对节点)
hcoder
var newP = document.createElement('p');
newP.innerHTML = 'hi...';
var div1 = document.getElementById('div1');
var p1 = document.getElementById('p1');
div1.insertBefore(newP, p1);
4、复制节点cloneNode(boolean)
参数true,复制整个节点和里面的内容;false,只复制节点不要里面的内容。
hcoder
var p1 = document.getElementById('p1');
var p2 = p1.cloneNode(true);
document.getElementById('div1').appendChild(p2);
5、删除节点 父节点.removeChild(要删除的节点)
利用父节点删除指定节点。
hcoder
var p1 = document.getElementById('p1');
var p2 = p1.cloneNode(true);
var div1 = document.getElementById('div1');
div1.appendChild(p2);
div1.removeChild(p1);
6、获取节点的常用方法
1、getElementById()利用元素id获取元素,返回对象形式的对应元素。
2、getElementsByTagName() 利用标签名称获取元素,返回数组形式的对象集合。
3、getElementsByClassName() 利用元素class属性获取元素,返回数组形式的对象集合。
4、根据获取到的元素演变出第一个节点、指定节点、最后一个节点等。
1
2
3
4
var ps = document.getElementsByClassName('p');
//第一个节点
var firstNode = ps[0];
console.log(firstNode.innerHTML);
//第x个节点
var threeNode = ps[2];
console.log(threeNode.innerHTML);
//最后一个节点
var lastNode = ps[ps.length - 1];
console.log(lastNode.innerHTML);
//获取下一个相邻节点
console.log(threeNode.nextElementSibling.innerHTML);
//获取上一个相邻节点
console.log(threeNode.previousElementSibling.innerHTML);
5、parentNode 获取父节点。