DOM
文档对象模型
* Document Object Model
* 文档：标记型文档 （HTML/XML）
* 对象：封装属性和行为（方法）
* 模型：共性特征的体现
* DOM解析HTML
* 通过DOM的方法，把HTML全部（元素（标签）、文本、属性）都封装成了对象。
<span id="spanId">文本</span>
* DOM想要操作标记型文档先解析。（解析器）
* DOM解析HTML（浏览器就可以HTML）
* 浏览器DOM解析HTML？
* DOM的三个级别：
* DHTML不是一种编程语言。
* html ：封装数据。 <span>展示给用户的数据</span>
* css ：设置样式（显示效果）
* dom ：操作HTML（解析HTML）
* js ：提供逻辑（判断语句，循环语句）
* Document：代表整个文档。
* 方法：
getElementById("id的值"); 通过元素的id的属性获取元素（标签）对象。
getElementsByName("name属性值"); 通过名称获取元素对象的集合（返回数组）
getElementsByTagName("标签名称"); 通过标签名称获取元素对象的集合（返回数组）
* write("文本的内容（html的标签）") 把文本内容写到浏览器上。
* createElement("元素名称"); 创建元素对象
* createTextNode("文本内容") 创建文本对象
* appendChild("子节点") 添加子节点
<span id=""></span>
* Element对象
* 获取元素对象
* getAttribute("属性名称"); 获取属性的值
* setAttribute("属性名称","属性的值"); 设置或者修改属性的值
* removeAttribute("属性名称"); 删除属性
* 获取元素下的所有子节点（*****）
* ul.getElementsByTagName();
* Node：节点对象
* nodeName ：节点名称
* nodeType ：节点类型
* nodeValue ：节点的值
* parentNode 获取父节点（永远是一个元素节点）
IE6-8 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? IE9-11 Chrome FireFox
firstChild 第一个节点 ? ? ? ? ? ? ? ? firstElementChild?第一个节点
lastChild最后一个节点、 ? ? ? ? ? ? ? lastElementChild 最后一个节点
nextSibling 下一同级节点 ? ? ? ? ? ? ?nextElementSibling?下一同级节点
previousSibling 上一同级节点 ? ? ? ? ?previousElementSibling?上一同级节点
<ul>
<li>北京</li>
</ul>
* 如果通过ul获取北京的子节点，使用是 ul.firstElementChild; 获取北京的子节点（IE9-11 Chrome FireFox）
* 但是如果IE6-8，需要使用firstChild;
<span id="spanId">
文本内容
</span>
* 使用span的标签获取span中间的文本内容（也是对象）,需要使用firstChild;（不管是什么浏览器）
* 方法
* hasChildNodes() 检查是否包含子节点
* hasAttributes() 检查是否包含属性
* appendChild(node) 父节点调用，在末尾添加子节点
* insertBefore(new,old) 父节点调用，在指定节点之前添加子节点
* replaceChild(new,old) 父节点调用，替换节点
* removeChild(node) 父节点调用,删除节点
* cloneNode(boolean) 不是父节点调用,复制节点
* boolean ：如果是true，复制子节点
：如果是false，不复制子节点，默认是false
* innerHTML ：获取和设置文本内容。
* innerHTML属性：
* 获取文本内容
* 设置文本内容
* 事件：
onclick 点击事件
onload 加载事件
onfocus 获取焦点事件
onblur 失去焦点事件
* 全选/全不选/反选的练习
<input type="checkbox" />
* 指定默认值：checked 只要出现在<input type="checkbox" />,对号就勾上了。
* 鼠标移动的事件
onmousemove
onmouseout
onmouseover
* 鼠标点击事件（*****）
onclick 单击
ondblclick 双击
* 加载和卸载
* onload（*****） 加载
* onunload 卸载
* 获取焦点和失去焦点（*****）
* onfocus 获取焦点
* onblur 失去焦点
* 键盘
* onkeyup 按下抬起
* 改变事件（*****）
* onchange
* 控制表单的提交（*****）
onsubmit
* Document Object Model
* 文档：标记型文档 （HTML/XML）
* 对象：封装属性和行为（方法）
* 模型：共性特征的体现
* DOM解析HTML
* 通过DOM的方法，把HTML全部（元素（标签）、文本、属性）都封装成了对象。
<span id="spanId">文本</span>
* DOM想要操作标记型文档先解析。（解析器）
* DOM解析HTML（浏览器就可以HTML）
* 浏览器DOM解析HTML？
* DOM的三个级别：
* DHTML不是一种编程语言。
* html ：封装数据。 <span>展示给用户的数据</span>
* css ：设置样式（显示效果）
* dom ：操作HTML（解析HTML）
* js ：提供逻辑（判断语句，循环语句）
* Document：代表整个文档。
* 方法：
getElementById("id的值"); 通过元素的id的属性获取元素（标签）对象。
getElementsByName("name属性值"); 通过名称获取元素对象的集合（返回数组）
getElementsByTagName("标签名称"); 通过标签名称获取元素对象的集合（返回数组）
* write("文本的内容（html的标签）") 把文本内容写到浏览器上。
* createElement("元素名称"); 创建元素对象
* createTextNode("文本内容") 创建文本对象
* appendChild("子节点") 添加子节点
<span id=""></span>
* Element对象
* 获取元素对象
* getAttribute("属性名称"); 获取属性的值
* setAttribute("属性名称","属性的值"); 设置或者修改属性的值
* removeAttribute("属性名称"); 删除属性
* 获取元素下的所有子节点（*****）
* ul.getElementsByTagName();
* Node：节点对象
* nodeName ：节点名称
* nodeType ：节点类型
* nodeValue ：节点的值
* parentNode 获取父节点（永远是一个元素节点）
IE6-8 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? IE9-11 Chrome FireFox
firstChild 第一个节点 ? ? ? ? ? ? ? ? firstElementChild?第一个节点
lastChild最后一个节点、 ? ? ? ? ? ? ? lastElementChild 最后一个节点
nextSibling 下一同级节点 ? ? ? ? ? ? ?nextElementSibling?下一同级节点
previousSibling 上一同级节点 ? ? ? ? ?previousElementSibling?上一同级节点
<ul>
<li>北京</li>
</ul>
* 如果通过ul获取北京的子节点，使用是 ul.firstElementChild; 获取北京的子节点（IE9-11 Chrome FireFox）
* 但是如果IE6-8，需要使用firstChild;
<span id="spanId">
文本内容
</span>
* 使用span的标签获取span中间的文本内容（也是对象）,需要使用firstChild;（不管是什么浏览器）
* 方法
* hasChildNodes() 检查是否包含子节点
* hasAttributes() 检查是否包含属性
* appendChild(node) 父节点调用，在末尾添加子节点
* insertBefore(new,old) 父节点调用，在指定节点之前添加子节点
* replaceChild(new,old) 父节点调用，替换节点
* removeChild(node) 父节点调用,删除节点
* cloneNode(boolean) 不是父节点调用,复制节点
* boolean ：如果是true，复制子节点
：如果是false，不复制子节点，默认是false
* innerHTML ：获取和设置文本内容。
* innerHTML属性：
* 获取文本内容
* 设置文本内容
* 事件：
onclick 点击事件
onload 加载事件
onfocus 获取焦点事件
onblur 失去焦点事件
* 全选/全不选/反选的练习
<input type="checkbox" />
* 指定默认值：checked 只要出现在<input type="checkbox" />,对号就勾上了。
* 鼠标移动的事件
onmousemove
onmouseout
onmouseover
* 鼠标点击事件（*****）
onclick 单击
ondblclick 双击
* 加载和卸载
* onload（*****） 加载
* onunload 卸载
* 获取焦点和失去焦点（*****）
* onfocus 获取焦点
* onblur 失去焦点
* 键盘
* onkeyup 按下抬起
* 改变事件（*****）
* onchange
* 控制表单的提交（*****）
onsubmit