html查找元素的常用方法,JavaScript dom选择、节点对象查找

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 获取父节点。