常见的dom操作

新增

增节点

1. document.createElement(‘元素名’);创建元素节点
2. document.createAttribute(‘属性名’);创建属性节点
3. document.createTextNode(‘文本内容’);创建新的文本节点
4. document.createComment(‘注释节点’); 创建新的注释节点
5. document.createDocumentFragment( ); 创建文档片段节点
6. xxx.innerHTML;插入html
7. xxx.innerText/xxx.textContent;插文本
8. xxx.appendChild(yyy);xxx中加一个子元素xxx
9. parent.insertBefore( newChild, existingChild );向父节点的某个特定子节点之前插入新节点

增属性

1. xxx.setAttribute( attributeName, attributeValue );给元素增加指定属性，并设定属性值
2. xxx.className+=’ red’;/xxx.classList.add(‘red’)加一个className
3. xxx.style.color=‘red’; 增加一个color样式/修改color属性
4. xxx.setAttribute( ‘data-x’, ‘text’ )设置自定义属性
5. xxx.getAttribute( ‘data-x’) 查看自定义属性

删

1. xxx.parentNode.removeChild(xxx)
2. xxx.remove()
3. xxx.childNode=‘null’

查找

查节点

1. document.getElementById(‘xxx’); / xxx 查找id为xxx的对象
2. document.getElementsByClassName(‘xxx’); 查找class为xxx的对象
3. document.getElementsByTagName(‘xxx’); 查找标签名为xxx的对象
4. document.getElementsByName(‘name属性值’); 返回拥有指定名称的对象结合
5. document/element.querySelector(‘CSS选择器’); 仅返回第一个匹配的元素
6. document/element.querySelectorAll(‘CSS选择器’); 返回所有匹配的元素
7. document.documentElement; 获取页面中的HTML标签
8. document.body; 获取页面中的BODY标签
9. document.head; 获取head
10. document.all;获取所有
11. xxx.nodeType;查看节点类型（返回值1表示元素，3表示文本）
12. xxx 查自己
13. xxx.parentNode/xxx.parentElement 查父元素
14. xxx.childNode 查子元素
15. xxx.childNode.length /xxx.children.length 查子节点长度
16. xxx.firstChild/xxx.lastChild 查第一个或最后一个元素
17. xxx.previousSibling/xxx.nextSibling 查看离自己最近一个元素（含回车符号）
18. xxx.previousElementSibling/xxx.nextElementSibling 查理自己最最的元素（不含括号）

查属性

1. xxx.style/xxx.class/xxx.id/xxx.herf/xxx.getAttribute(‘herf’) 查属性

改

1. xxxx.innerHTML=‘yyy’ 改html 内容
2. xxx.innerText/xxx.textContent=‘yyy’ 该文本
3. xxx.appendChild(yyy) 改父元素
4. xxx.id=‘yy’/xxx.className=‘yy’/xxx.classList.add(‘yy’)/xxx.style.background=“red”

事件

onclick事件—当用户点击时执行

onload事件—当用户进入时执行

onunload事件—用用户离开时执行

onmouseover事件—当用户鼠标指针移入时执行

onmouseout事件—当用户鼠标指针移出时执行

onmousedown事件—当用户鼠标摁下时执行

onmouseup事件—当用户鼠标松开时执行