常见的DOM操作有哪些？
大家好，我是IT修真院武汉分院第10期学员余佳贝，一枚正直善良的web程序员。
今天给大家分享一下，修真院官网js任务2，深度思考中的知识点——常见的dom操作有哪些？
一.背景介绍
DOM是Document Object Model（文档对象模型）的缩写,是针对HTML和XML文档的一个API（应用编程接口），通过DOM可以去改变文档. DOM描绘了一个层次化的节点树，允许开发人员添加，移除和修改页面的某一部分.
W3C DOM标准被分为3个不同的部分
核心DOM -针对任何结构化文档的标准模型
XML DOM -针对XML文档的标准模型
HTML DOM -针对HTML文档的标准模型
1998年10月DOM１级规范成为W3C的推荐标准，为基本的文档结构及查询提供了接口。本章主要讨论与浏览器中的HTML页面相关的DOM1级的特性和应用，以及JavaScript对DOM1级的实现。
二.知识剖析
1.查找html元素
1.通过id找到HTML元素
getElementById(id) -获取带有指定id的节点（元素）
2.通过类名找到HTML元素
getElementsByClassName(class)-获取带有指定类名的所有元素的节点列表
3.通过标签名找到HTML元素
getElementsByTagName(tag)-带有指定标签名称的所有元素的节点列表（集合/节点数组）
2.改变html元素的内容和属性
修改HTML内容的最简单的方法时使用innerHTML属性
document.getElementById(id).innerHTML=新的HTML
如需改变HTML元素的属性，请使用这个语法
document.getElementById(id).attribute=新属性值
3.改变html元素的样式
document.getElementById('p3').style.fontSize='50px';
4.对事件作出反应
HTML事件的例子：
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当用户触发按键时
vartext=document.getElementById('text');
text.onfocus=function() {
text.style.backgroundColor='#f93'
};
text.onchange=function() {
alert('现在的value值是：'+text.value);
};
text.onblur=function() {
text.style.backgroundColor='#ccc'
};
5.添加或删除html元素
varpara=document.createElement("p");//创建新的p元素
varnode=document.createTextNode("这是一个新的hello world。");//向p元素添加文本，首先要创建文本节点
para.appendChild(node);//向p元素追加这个文本节点
varelement=document.getElementById("div1");//向一个已有的元素追加这个新元素
element.appendChild(para);//在已存在的元素后添加新元素
三.常见问题
如何通过class和tag调用元素?如何对其设置属性？
四.解决方案
varsq=document.getElementsByClassName('sq');
varbtn1=document.getElementById('btn1');
btn1.onclick=function() {
sq[0].style.color='red';
sq[1].style.color='green';
sq[2].style.color='blue';
五.编码实战
六.扩展思考
Html5添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性， 这个属性始终会引用DOM中当前获得了焦点的元素。 另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。 我们可以去学习HTML5中的一些新内容。
七.参考链接
《dom编程艺术》
八.更多讨论
如何合理的写HTML内容和用DOM对其进行操作？
常见的dom操作有哪些？_腾讯视频
