学习总结

1.DOM(Document Object Model）
（1）DHTML(Dynamic HTML)： DHTML 指动态 HTML （ Dynamic HTML ）

2.浏览器工作原理：浏览器将载入的 html 变为 dom 树，但是此时没有任何显示样式。所以显示的样式，都是 css 定义的，浏览器只会通过 css 来渲染视图样式。那么浏览器会在分别加载好 dom 树和计算形成 css 最终样式之后，在一起渲染成一个完整的页面呈现出来。

3.DOM介绍：
（1）DOM 树：览器将网页加载到内存时，首先在内存中为整个文档创建一个 Document 对象，然后从文档中出现的第一个标记开始，按照 XHTML 的层次结构，一个一个的加载。每加载一个标签、注释、文本或属性，就将其当做节点 (node) 。当网页被装载到内存后，实际上在内存中按照 XHTML 层次结构，形成了一个倒挂的节点对象树结构。这个树状结构，在 DOM 属于中被称为 DOM 树。

（2）DOM 节点类型：
· 文档节点 Document - 根节点。
· 文档类型节点 DocumentType - DTD 引用即 <!DOCTYPE> 。
· 元素节点 Element - 标签。
· 文本节点 Text - 标签中的文本或 CDataSection 内包含的普通文本。
· 属性节点 Attr - 元素的属性。
· CDataSection - 通常是文本节点和注释节点的父类。
· 注释节点 Comment - 注释

（3） 节点的属性和方法：
·nodeName 节点的名字 ·nodeType 节点的类型常量之一 ·firstChild childNodes 列表中的第一个节点 ·lastChild childNodes 列表中的最后一个节点
·childNodes 节点的列表 ·previousSibling 前一个兄弟节点 ·nextSibling 后一个兄弟节点 ·appendChild(node) 将 node 添加到 childNodes 的末尾
·insertBefore(newnode, refnode) Node 在 childNodes 中的 refnode 之前插入 newnode
·removeChild(node) Node 从 childNodes 中删除 node
·replaceChild(newnode, oldnode) Node 将 childNodes 中的 oldnode 替换成 newnode

（4）DOM 节点类型的常量和值：·素节点 Node.ELEMENT_NODE 值1
·属性节点 Node.ATTRBUTE_NODE 值2
·文本节点 Node.TEXT_NODE 值3
·CDATA 节点 Node.CDATA_SECTION_NODE 值4
·注释节点 Node.COMMENT_NODE 值8
·文档节点 Node.DOCUMENT_NODE 值9
·文档类型节点 Node.DOCUMENT_TYPE_NODE 值10

一.DOM 操作 HTML
1. 所有类型节点的通用操作:
(1). 获取节点:
① 利用节点关系获取节点:
·childNodes - 获取所有子节点。
·firstChild - 获取第一个子节点。
·lastChild - 获取最后一个子节点。
·previousSibling - 获取上一个兄弟节点。
·nextSibling - 获取下一个兄弟节点。
·parentNode - 获取父节点。
②直接获取节点：
·document.getElementById("id") - 根据 id 获取节点。
·document.getElementsByTagName("div") - 根据标签名称获取节点。
·document.getElementsByClassName("class") - 根据类名获取节点。
·document.getElementsByName("name") - 根据名称获取节点。
(2). 创建的节点:
·createElement("div") - 创建 div 的元素节点。
·createTextNode("text") - 创建包含 “text” 的文本节点。
eg:document.createElement("p");
document.createTextNode(" 哈哈 ");
(3). 通用操作: innerHTML - 某元素节点所包含的所有 HTML ，包括所有 元素节点 、 文本节点 以及 属性节点。

2. 表格操作:
(1).新增:
tableElement.insertRow(position) - 新增一行，返回值为一个 tr 节点即一个 rowElement ， position 位置从 0 开始计数。
rowElement.insertCell(position) - 新增一个单元格，返回值为一个 td 节点即一个 cellElement ， position 位置从 0 开始计数。
(2).删除
tableElement.deleteRow(position) - 删除某行， position 从 0 开始计数。
rowElement.deleteCell(position) - 删除某行， position 从 0 开始计数。
(3).访问
tableElement.rows - 获取表格所包含的的所有 tr 元素节点所组成的集合数组。
rowElement.cells - 获取行元素节点所包含的所有 td 元素节点所组成的集合数组。
3.表单控件操作:
(1).表单控件通用属性:
通用属性包括 value 和 text ，即对于所有的 input 节点或 select 节点以及 select 下的 option 节点都是通用的。
value - 值。
text - 文本内容。
(2).select 下拉框:
①.访问 option 节点:
selectElement.options - 返回该 select 节点内子节点 option 节点所组成的数组。
②.删除 option 节点:
selectElement.remove(position) - 基于 select 节点的 remove 方法，删除指定位置的 option 节点，从 0 开始计数。
③.select 节点直接取值:
value - 使用通用属性 value 来取值，来获取选中的值。
selectedIndex - 获取被选中的 option 节点的位置。
④.option 节点取值:
value - 使用通用属性来获取值。
text - 使用通用属性来获取文本。
selected - 是否被选中。
defaultSelected - 是否默认被选中。
(3).radio 单选框和 checkbox 复选框:
value - 使用通用属性获取值。
checked - 是否被选中。
4.input 输入框:
value - 使用通用的属性来取值。
text - 使用通用属性来获取文本。

转载于:https://www.cnblogs.com/tiansi/p/5440433.html