节点
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.nextSibing
获取兄弟节点
7.nextElementSibing
获取下一个兄弟标签
8.previousSibing
获取上一个兄弟标签
9.previousElemnetSibing
获取上一个兄弟标签
10.lastchild
获取最后一个子节点
11.lastElementChild
获取最后一个子标签
- childNodes
获取所有非标签类型的子节点
13.children
获取所有子标签节点
14.parentNode
获取非节点
15.creatElement
增加节点
16.appendChild
在父元素的末尾，插入节点
注意：在添加元素前 需要将元素先创建好
div.appendchilid（div）
17.replaceChild（new，old）
修改指定子节点
<meta charset="utf-8">
18. removeChild()
在删除前需要先获取到被删除元素
div.removeChild(box);
19. remove()
删除当前节点
[图片上传失败...(image-f72260-1638791255082)]
需要先获取到被删除的节点
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(属性名);
