JavaScript讲义

Posted 2020-08-16 鎃鎃

DOM:拥有用JS脚本动态修改html

DOM模型
---------------------------------------------------------
HTML文档只有一个根节点，其他都是子节点，最终形成一个结构化文档。DOM提供了访问结构化文档的一种方式，但DOM不是一种技术，它只是访问结构化文档的一种思想。基于这种思想，各种语言都有自己的DOM解析器。

DOM模型和HTML文档
---------------------------------------------------------
虽然JS不是一门纯粹的面向对象语言，但是DOM为常用HTML元素找到了一套完整的继承体系。
HTML元素之间常见的包含关系。有些HTML元素之间可以互相嵌套，有些不可。

访问HTML元素
---------------------------------------------------------
两种方式：根据ID访问HTML元素（document.getElementById()），利用节点关系访问HTML元素(利用父子，兄弟关系来访问)

访问表单控件
访问列表框、下拉菜单的选项

修改HTML元素
---------------------------------------------------------
修改节点（内容，属性，CSS样式）。修改HTML元素通常通过修改如下几个常用属性：
innerHTML: 如xx.innerHTML=document.getElementById("celVal").value;
value:
className:
style:
options[index]:

增加HTML元素
---------------------------------------------------------
两步：1）创建/复制节点；2）添加节点
var a=document.createElement("divxxx");
var ajax=ul.firstChild.nextSibling.cloneNode(false)
ul.insertBefore(ajax,ul.firstChild);

动态添加表格内容

删除HTML元素
---------------------------------------------------------
删除节点：removeChild

传统DHTML模型
---------------------------------------------------------
通过DOM不仅能访问和更新页面内容及结构，还能操纵文档的风格样式。在DOM出现前，JS采用传统DHTML模型访问和更新HTML页面。相比DHTML，DOM功能更强大，提供了对整个HTML文档的访问模型，其将文档转换为Tree结构，树上每个节点对应HTML元素。

使用window对象
---------------------------------------------------------
window对象是整个JS脚本运行的顶层对象。
访问历史：history属性。
访问页面URL：
客户机屏幕信息：screen属性
弹出新窗口：window.open()
用定时器：
navigator和地理位置：比如
for(var propname in window.navigator)
{
window.navigator[propname];
}
HTML5新增的geolocation属性：getCurrentPosition,watchCurrentPosition

使用document对象
---------------------------------------------------------
document对象既是HTMLDocument类的一个实例，也是DHTML模型中的一个对象。