疯狂H5笔记 - DOM编程详解

1.通过节点关系来访问HTML元素：

Node parentNode：返回当前节点的父节点Node previousSibling：返回当前结点的前一个兄弟节点Node nextSibling：返回当前节点的下一个兄弟结点Node[] childNodes：返回当前节点的所有子节点Node[] getElementByTagName(tagName)：返回当前节点的具有指定标签名的所有子节点Node firstChild：返回当前节点的第一个子节点Node lastChild：返回当前节点的最后一个子节点

2.访问表单控件：

action：返回表单的action值elements：返回表单内的全部表单控件所组成的数组，只读属性length：返回表单内表单控件的个数，只读属性method：返回表单的method属性，通常为post和get两个属性值target：确定提交表单时的结果窗口reset()：重设表单submit()：提交表单

3.访问列表框、下拉菜单的选项

HTMLSelectElement：    form：返回列表框、下拉菜单所在的表单对象，只读属性    length：返回列表框、下拉菜单的选项个数，只读属性    options：返回列表框、下拉菜单里所有选项组成的数组，只读属性    selectedIndex：返回下拉列表中被选中的选项的第一个列表索引    type：返回下拉列表的类型，即是否允许多选HTMLOptionElement：    form：返回包含该选项所处的列表框、下拉列表的表单对象    defaultSelected：返回该选项是否默认被选中，只读属性    index：返回该选项在列表框、下拉列表中的索引位置，只读属性    selected：返回选项是否被选中    text：返回该选项呈现的文本内容    value：返回选项的value属性值

4.访问表格中的元素

HTMLTableElement：    caption：返回该表格的标题对象    HTMLCollection rows：返回该表格的所有表格行，只读属性    HTMLCollection tBodies：返回该表格的所有<tbody>元素组成的数组    tFoot：返回该表格的<tfoot>元素    tHead：返回表格的所有<thead>元素HTMLTableRowElement：    cells：返回表格行内所有的单元格组成的数组，只读属性    rowIndex：返回该表格行在表格内的索引值，只读属性    sectionRowIndex：返回该表格行在其所在元素如<tbody>/<thead>元素里的索引位置，只读属性HTMLTaeblCellElement：    cellIndex：返回该单元格在该表格行内的索引值，只读属性

5.修改HTML元素：

innerHTML：用于修改有结束标签的元素的内容value：用于修改没有结束标签的元素的内容，如<input />等style：用于修改目标元素的内敛CSS样式options[index]：直接对<select />元素的指定列表项进行赋值，可用于改变列表框、下拉菜单的指定列表项

6.新增HTML元素：

1.创建结点: document.createElement(tagName);2.复制结点：Node cloneNode(boolean)；克隆当前节点，传入一个boolean类型的参数指定是否复制该节点的全部后代结点

7.添加结点：

appendChild(newNode)：将指定结点添加到当前节点的最后一个子节点位置insertBefore(newNode,refNode)：将指定结点插入到refNode结点的前面replaceChild(newNode,oldNode)：将oldNode结点替换成功newNode结点

8.使用window对象：

1.访问历史使用window.history对象，该对象包含如下三个方法：    back()：后退到上一个浏览页面，如果没有则没有forward过任何效果    forward()：前进到下一个浏览页面，如果没有back过则没有任何效果    go(intvalue)：指定前进（正数）或者后退（负数）多少个页面2.访问页面的URL使用window.location属性，该属性包含如下几个常用属性:    hostname：制定个文档所在地址的URL地址    href：文档所在地址的主机地址    port：文档所在地址的服务端口    pathname：文档所在地址的文件地址    protocol：装载该文档所使用的协议，如http:...3.想要获取客户端的屏幕信息可以使用window.screen属性，该属性包含如下三个属性：    width：屏幕的横向分辨率    height：屏幕的纵向分辨率    colorDepth：当前屏幕的色深4.弹出新的窗口使用window.open()，该方法有三个参数：打开的页面url、target、style：比如：    window.open("text.html","_blank","left=0,top=0");5.window提供了三种对话框：警告对话框、确认对话框和输入对话框，分别使用alert()/confirm()/prompt()实现。例子：    alert("easy alert");//无返回值    confirm("确认关闭");//返回boolean值，表示用户点击确认还是取消    prompt("输入密码:","placeholder");//返回String值，表示用户输入的信息6.window提供了一个定时器，用于设置多久执行指定代码:    timer setInterval("code",interval)/void clearInterval(timer);设置、删除定时器，这类定时器指定每隔interval毫秒重复执行一次code    timer setTimeout("code",interval)/void clearInterval(timmer):也是设置定时器，不过它不会重复执行，而是只执行一次，interval指定delay延迟执行时间7.window.navigator属性对应于Navigator对象俺那个，代表浏览该页面时所使用的浏览器，该对象包含如下几个常用的属性：    appName：返回浏览器的内核名称    appVersion：返回浏览器当前的版本    platform：返回当前浏览器所在的操作系统    使用for循环进行迭代输出所有的属性及属性值：    <code>        <script>            for(var propName in window.navigator){                document.writeln(propName+"-->"+window.navigator[propName]);            }        </script>    </code>其中navigator对象包含了一个geolocation属性，它是一个Geolocation对象，可以用来获取浏览者的地理位置:    getCurrentPosition(onSuccess,onError,options)：请求获取地理位置，第一个参数指定成功获取地理位置时的回调函数；第二个参数指定获取失败后的回调函数；第三个参数指定一些额外的参数    int watchCurrentPosition(onSuccess,onError,options)：用于持续监听地理位置，相当于周期性调用getCurrentPosition（），该方法返回一个int值，是这个监听器的唯一ID标识，可以允许程序根据该ID来关闭指定监听器    void clearWatch(watchID)：停止持续监听地理位置的监听器    其中：onSuccesss成功回调函数的形式如:function(position){}，position表示浏览器所获取的地理信息，包含如下属性：        timestamp：返回获取地理位置时间的时间戳        coords：返回一个Coordinates对象，该对象包含了详细的地理信息：            longitude：返回经度值            latitude：返回维度值            altitude：返回高度值            accuracy：返回经度和维度的精度值            altitudeAccuracy：返回高度的精度值            speed：返回浏览器所在设备的移动速度，不能获取时返回null            heading：返回浏览器所在设备移动的方向，不能获取时返回null            timestamp：返回获取地理位置时间的时间戳    失败的回调函数形如:function(error){},error表示的是错误信息，包含如下属性：        code：返回错误代码，123，分别表示:            1.用户拒绝了位置服务            2.无法获取地址位置服务            3.获取地理位置信息超时        message：返回错误描述信息    额外的参数包括下面几个:        enableHighAccuracy：指定是否要求高精度的地理位置信息        timeout：指定获取地理位置信息时的超时时长        maximunAge：指定地理信息的缓存时间，以毫秒为单位