DOM节点操做

学习总结：

获取节点

咱们有三种方式找到一个dom节点：

• 经过id

var d1 = document.getElementById('div1'); // 返回一个节点对象
复制代码

• 经过标签名

var d2 = document.getElementByTagName('div'); // 返回节点数组
复制代码

• 经过class名

var d3 = document.getElementByClassName('nav'); // 返回节点数组
复制代码

此外，后面两种方式还能够不经过document拿到：

var d2 = d1.getElementByTagName('div');
var d3 = d1.getElementByClassName('nav');
复制代码

也就是说，getElementByTagName和getElementByClassName方法能够在任何的节点上使用（上例从d1的子节点查找，不包括d1自己），可是getElementById方法只能在document对象使用。

建立节点，添加节点，删除节点

var d = document.getElementById('div1');

var p = document.createElement('p'); // 建立一个p节点
var pText = document.createTextNode('这是p标签的内容'); // 建立文本节点

p.appendChild(pText); // 把文本塞到p标签里面
d.appendChild(p); // 把p标签塞到d，成为d的子节点

d.removeChild(p); // 经过父节点把p节点删除
p.parentNode.removeChild(p); // 同上，经过父节点把p节点删除
复制代码

操做节点

var img1 = document.getElementById('img1');
img1.src = 'test.png'; // 换了图片
img1.className = 'test_class'; // 换了class名称，class属性例外，是js保留关键字
img1.style.width = '100px'; // 换了样式
img1.getAttribute('dat'); // 获取自定义属性或者通用属性
img1.setAttribute('dat','8'); // 修改属性值，没有则添加并设置了一个属性
img1.removeAttribute('dat'); //删除属性

var p = document.getElementById('p1');
p.innerHTML = "这是p里面的内容 <a href = 'www.baidu.com'>this is a tag</a>";
p.textContent = '纯文本，即便放了标签也不会生效，会看成文本处理';
复制代码