节点
1)一共12个节点类型
2)dom操作就是对节点进行操作
3)节点的类型的获取方法notetype
4)ie9以上及chrome safari firefox 会将换行符当成节点
var box=document.getElementsByClassName('box')[0];
console.log(box.nodeType);
1. getElementById()
1)静态获取
2)返回带有指定ID的元素
var box1=document.getElementById('box');
2. getdocumentsByTagName()
1)根据标签名获取
2)得到的是个数组
var div1=document.getElementsByTagName('div')[0];
3. getdocumentsByClassName()
1)根据类名获取元素
2)动态获取
3)得到的是一个数组
var box=document.getElementsByClassName('box')[0];
4. querySelector()
1)返回符合要求第一个元素
2)通过css选择器来获取指定标签
3)静态获取
5. querySelectorAll()
1)返回所有匹配元素
2)根据css选择器来获取所有标签
3)得到的是一个数组
6.1 nextSibling
获取兄弟节点
7. nextElementSibling
获取下一个兄弟标签
8. previousSibling
获取上一个兄弟节点
9. previousElementSibling
获取上一个兄弟标签
10. lastchild
获取最后一个子节点
11. lastElementChild
获取最后一个子标签
12. childNodes
获取所有类型的子节点
13. children
获取所有子标签节点
14. parentNode
获取父节点
15. createElement
增加节点
var div=document.createElement('div');
16. appendChild
在父元素的末尾,插入节点
在添加元素前,需要将元素先创建好
div.appendChild(div);
17. replaceChild(new,old)
修改指定子节点
18. removeChild()
删除指定子节点
在删除前需要先获取到被删除元素
div.removeChild(box);
19. remove()
删除当前节点
需要先获取到被删除的节点
div.remove();
属性
1)设置ID
div.id='box';
2)设置class
div.className='box';
3)设置style
div.style.width='10px';
4)设置图片路径
img.src='../';
5).自定义属性
div.setAttribute(属性名,属性值);
div.getAttribute(属性名);