大家好，我是IT修真院北京总院第22期的学员张雪飞，一枚正直纯洁善良的web程序员
今天讲下深度思考中的知识点——
——network中的请求信息，headers中的每一项分别是什么意义?
1.背景介绍
DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描
绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于
Netscape及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正的跨
平台、语言中立的方式。
1998年10月DOM１级规范成为W3C的推荐标准，为基本的文档结构及查询提供了接口。本章主
要讨论与浏览器中的HTML页面相关的DOM1级的特性和应用，以及JavaScript对DOM1级的实现。
IE、Firefox、Safari、Chrome和Opera都非常完善地实现了DOM。
2.知识剖析
什么是DOM
DOM是Document Object Model（文档对象模型）的缩写。
DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
在HTML DOM中，所有事物都是节点。DOM是被视为节点树的HTML。
DOM节点
HTML文档中的所有内容都是节点。整个文档是一个文档节点,每个HTML元素是元素节点，
HTML元素内的文本是文本节点，每个HTML属性是属性节点，注释是注释节点。
DOM常用操作
查找节点
新建节点
添加节点
删除节点
修改节点
我们用到最多的是element类型，用于表现HTML元素，提供了对元素标签名、子节点及特性的访问。
DOM常用操作举例
查找节点
document.getElementById('id属性值');
返回拥有指定id的第一个对象的引用
document/element.getElementsByClassName('class属性值');
返回拥有指定class的对象集合
新建节点
document.createElement('元素名');
创建新的元素节点
document.createAttribute('属性名');
创建新的属性节点
document.createTextNode('文本内容');
创建新的文本节点
document.createComment('注释节点');
创建新的注释节点
document.createDocumentFragment( );
创建文档片段节点
DOM常用操作
添加节点
常用来添加文本节点element.innerHTML='新增文本内容'
创建文本节点
创建文本节点
functionaddText(){
varelement=document.getElementsByTagName('p')[0];
element.innerHTML='新增文本内容';//插入文本内容
}
DOM常用操作
删除节点
parentNode.removeChild( existingChild );
删除已有的子节点，返回值为删除节点
element.removeAttribute('属性名');
删除具有指定属性名称的属性，无返回值
element.removeAttributeNode( attrNode );
删除指定属性，返回值为删除的属性
DOM常用操作
修改节点
添加属性节点，修改属性值：
element.setAttribute( attributeName, attributeValue );
属性节点
增添id属性，并修改class属性值
varelement=document.getElementsByTagName('p')[0];
//添加属性节点
varattr=document.createAttribute('id');
attr.value='idValue';
element.setAttributeNode(attr);
//修改属性值
varattr=document.createAttribute('class');
attr.value='classNewValue';
element.setAttributeNode(attr);
DOM事件
允许JavaScript对HTML事件作出反应
onclick事件——当用户点击时
onload事件——用户进入
onunload事件——用户离开
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup事件——鼠标抬起
3.常见问题
如何通过class和tag调用元素?如何对其设置属性？
4.解决方案
一个页面中常常有多个class相同的元素，也有多个标签相同的元素，在调用时方法如下
div2
document.getElementsByClassName("time")[0].innerHTML = "16:43";
document.getElementsByClassName("time")[1].innerHTML = "16:44";
document.getElementsByTagName("div")[0].className = "text-time";
5.编码实战
我们运行一下上一页给出的代码，来用DOM改变一下HTML的内容和样式。
6.扩展思考
Html5添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性，
这个属性始终会引用DOM中当前获得了焦点的元素。
另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。
7.参考文献
参考一：《JavaScript高级程序设计》
参考二：DOM树知识点梳理
8.更多讨论
如何合理的写HTML内容和用DOM对其进行操作？
鸣谢
感谢观看
感谢 沁修|寇晨迪|曹樾 此教程在她技术分享的基础上完善而成！
链接:链接:
https://pan.baidu.com/s/1o8R0FtK
密码: evqs
------------------------------------------------------------------------------------------------------------------------------------------
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
