DOM基础知识点

DOM基础知识点

核心语法

ECMAScript核心，可以作用在浏览器里面运行，也可以在node中运行。开发服务器端编程。

1. 基础语句，循环语句、判断语句、变量、运算符、函数、数组等等。
2. 函数的高级概念-闭包、作用域、ES6的一些新增特性、箭头函数
3. WEBAPI（原生对象的API操作）

BOM

浏览器对象模型。所有BOM和DOM包含的对象都是宿主对象。

window对象：浏览器的顶层对象。里面包含了操作浏览器的所有对象和函数。

1. 定时器、setTimeout、setInterval
2. 弹框 alert、comfirm`promt
3. open close
4. location对象
5. history获取浏览器的历史记录。操作前进后退
6. navigator
7. screen

DOM

文档对象模型（Document Object Model），负责和html进行交互的一块内容。可以实现动态的页面元素控制和一些事件绑定处理。

背景

随着前期静态网页带来的用户体验和功能性都比较差，后期发明了DOM技术，DOM这项技术并不是只用于JavaScript，算一门独立的编程技术。Java中也有Dom,JavaScript也有Dom，在JavaScript中引入了Dom这项技术来完成网页中元素的控制。

DOM：将文档进行抽象化，并提供对应API来操作文档的一种技术、与平台无关、与语言无关系。只是JavaScript提供了对DOM的支持。

级别

DOM在发展的过程中也是不管在优化和壮大。

DOM0：DOM的早起版本在各个浏览器中运行并没有一个同一的标准，相对来说功能比较单一，主要是对图片和表单进行操作，早期的DOM提供一些的对象对象 forms、images，我们把这种初级的DOM成为DOM0级。

DOM1: 1998年正式纳入W3C标准，由DOM的核心内容和DOM html组成了这个版本的内容，

DOM2:dom2在dom1的基础之上对内容进行了扩展，加入的鼠标事件、键盘事件等等，还提供了遍历html节点的一些操作，还提供了对层叠样式表的操作。

DOM3:dom3也是dom2的基础上继续扩展和优化，dom载入与保存，效率的优化，还有对dom的x base xml等等规范。

DOM组成：

1. 文档部分，主要 dom对html增删改查
2. css样式：dom封装了所有的样式，你可以通过dom获取样式也可以修改样式
3. 事件：可以基于事件驱动来完成业务。

DOM树

浏览器加载网页的流程图？

网页在浏览器运行的时候，首先html解析器会将网页骨架转化为一颗dom树，文档中的标签就会变成树的一个个节点。在节点里面又会包含其他的子节点。

节点：节点其实用来描述dom数上面的内容的一个词汇，主要分为元素节点（标签）、属性节点（元素身上属性）、文本节点（元素里面的内容）。

dom技术就是用来操作这棵DOM树，完成对DOM数上面内容的更新替换和删除。

document

document是一个综合对象，这个对象在window里面表示就是文档的意思。数据类型为Document。用于表示一个文档，这会对象包含了大量的API方法供我们操作html元素，也可以操作xml元素。

var window = {
	history：{}
	document：{} //document---Object  
}
Object泛指对象对象，document----Document
var arr = new Array()  Object ----- Array

document对象提供的API方法：

*方法名或属性名*	*描述*
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合
getElementsByTagName()	返回带有指定标签名的对象集合
write()	向文档写 HTML 表达式 或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符
body	提供对 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 。
cookie	设置或返回与当前文档有关的所有 cookie。
domain	返回当前文档的域名
lastModified	返回文档被最后修改的日期和时间。
referrer	返回载入当前文档的文档的 URL。
titile	返回当前文档的标题
url	返回当前文档的url

对HTML标签进行动态操作

1. 获取到页面上html标签（元素、节点）

   • getElementById()
   • getElementsByName()
   • getElementsByTagName()
   • getElementsByClassName()
   • document.body
   • document.links
   • documents.forms
   • …
   • querySelect() 这个方法可以获取页面上你指定的元素，如果多个默认返回第一个
   • querySelectAll() 这个方法可以获取到页面上你知道的元素，返回是一个对象包含多个值

   querySelector和querySelectAll()的区别：

   querySelector这个方法默认只返回得到结果的第一个

   querySelectAll()这个方法默认将获取到所有结果封装到NodeList，返回一个对象，你在从对象里面获取。

   且这个两个函数都没有兼容问题。

   使用于DOM解构比较复杂，你要快速定位你要的元素。

2. 创建新的节点（通过js代码新建新html元素动态添加dom树上面）

   先在内存里面产生一个标签

   将这个标签挂载到dom树上面

   • document.createElement() 创建一个元素
   • appendChild() 往指定元素里面添加一个子元素，默认放在所有子元素的末尾

   var newDiv = document.createElement("div")
   var obody = document.getElementsByTagName("body")[0];
   obody.appendChild(newDiv);
   

   • document.createTextNode() 创建一个文本节点（文本也是节点）

3. 修改节点（修改节点的值，也可以修改节点的属性 ，修改节点本身）

   获取到页面上你想要修改的节点，对这个节点进行处理。

   replaceChild()

   var obody = document.body;
   obody.replaceChild(newDiv,odiv)
   

4. 删除节点（通过js你可以删除指定的html元素）

   removeChild(); 根据父元素来删除指定子元素

   var obody = document.body
   var owrapper = document.getElementsByClassName("wrapper")[0]
   obody.removeChild(owrapper);
   

练习：

​ 平时在聊天的时候，你每发送一条信息，我们都要在平时动态展示。这个过程是不是节点的添加。删除聊天记录，节点的删除。节点的内容需要替换。查询所有的元素节点查询.

节点特点

在页面上每个节点都是唯一的节点，对于浏览器来，dom树上面的节点都看成标签，看成一个一个的对象（Node）。你创建了一个节点，相当于，创建了一个对象，你把这个对象放在dom树上面，这个对象只能出现一次。

如果要让一个节点 挂载多次怎么办？

让这个节点（对象)在内存内存产生多个，克隆对象。

innerHTML和innerText

innerHTML和innerText都是属性。节点的属性（不是document）。

innerHTML设计用来获取到指定节点内部的所有内容。可以读可写。

innerText设计用来获取到指定节点内部的文本内容，不包含标签。可读可写

属性操作

属性操作是DOM中非常重要的内容，每个html标签基本上都会涉及到属性，尤其是对Html标签官网标准的属性属性。

1. 标签标准的属性（W3C规范的属性）

   <img src="" title="" alt="" width="">
   

2. 自定义属性，用户开发中自己设置属性

   <img src="" index="0">
   

DOM中提供了两种操作属性的方案

1. 节点.属性 可以完成属性的增删改 要注意，这个属性要是当前这个标签官方定义的属性

   • class属性不能直接使用 ，js给我们提供了一个className来表示这个属性，class是关键字。

2. 通过DOM提供的函数来操作属性

   getAttribute()

   setAttribute()

   removeAttribute()

   属性 的时候要分类，如果是标准的属性直接对象的形式来操作，如果这个属性不是标准，那需要自己使用api来完成属性的增删改查。

节点的概念

DOM树里面的每一个标签、每一个属性、每一个文本都属于节点（Node）。

节点的分类和节点的特性：

在JavaScriptDOM中一共有12种节点，每一种节点都表示Dom树里面的某一个模块。

一般开发中我们常用的就三种：

1. 元素节点（标签）
2. 属性节点（属性）
3. 文本节点（内容）

DOM树是我们虚构出来的一种树形结构，其实在内存里面每一个节点都是一个对象（Node），既然是对象，那对象就会有属性和方法。操作的每一个几点都可以拥有相同属性和方法。

Node 特点

节点的属性和方法：

大家可以参考w3cschool或者MDN文档可以查看当前Node对象的属性和方法。

childNodes属性：获取到的指定元素下面的所有子节点，包含了换行（被解析为文本节点）

整理总结：

Node节点的概念：节点就是对象，里面包含了属性和方法

1. firstChild
2. lastChild
3. ChildNodes
4. children
5. parentNode
6. previousSibling
7. nextSibling
8. attributes
9. cloneNode()
10. insertBefore()
11. appenChild()
12. hasChildNode()

商品的增删改 对DOM节点进行操作

表格：

insertRow()

insertCell()

deleteRow()

deleteCell()

rows 属性—children

表格的操作—针对表格的api

复选框：

checked属性 通过js来控制 设置值为true选中false不选中。