1.访问HTML元素:
为了动态地修改HTML元素,必须能访问HTML元素,DOM提供了两种方式来访问HTML元素:
➢根据ID访问HTML元素由如下方法实现。
document.getElementByld(idVal): 返回文档中id属性值为idVal的HTML元素。
innerHTML属性:代表该元素的内容:document.getElementByld(idVal).innerHTML
value属性:由于<textarea…/>和<input…/>元素所生成的表单控件,包括单行文本框、各种按钮等的可视化文本都由value属性控制,因此由value获取他们的内容document.getElementByld(idVal).value
除此之外的其他HTML元素,包括列表框,下拉菜单的列表框,<label…/>,<button…/>都应通过innerHTML来获取他们的内容
➢根据CSS选择器访问HTML元素由document的如下方法提供支持。
Eelemnt querySelector(selectos):该方法的参数既可是一个CSS选择器,也可是用逗号隔开的多个CSS选择器,该方法返回HTML文档中第一个符合选择器参数的
HTML元素。
**NodeList querySelectorAll(selectors)😗*该方法与前一个方法的用法类似,只是该方法将返回所有符合CSS选择器的HTML元素。
➢利用节点关系访问HTML元素。
<body>
<ol id = "books">
<li id="java">疯狂英语</li>
<li id="ssh">轻量级得得得</li>
<li id="ajax">等卡地擦拭擦拭</li>
<li id="xml">等卡地擦拭擦拭</li>
<li id="ejb">等卡地擦拭擦拭</li>
<li id="android">等卡地擦拭擦拭</li>
</ol>
<input type="button" value="父节点" onclick="change(curTarget.parentNode);"/>
<input type="button" value="第一个" onclick="change(curTarget.parentNode.firstChild.nextSibling);"/>
<input type="button" value="上一个" onclick="change(curTarget.previousSibling.previousSibling);"/>
<input type="button" value="下一个" onclick="change(curTarget.nextSibling.nextSibling);"/>
<input type="button" value="最后一个" onclick="change(curTarget.parentNode.lastChild.previousSibling);"/>
<script>
var curTarget = document.getElementById("ajax");
var change = function(target){
alert(target.innerHTML);
}
</script>
</body>
2.访问表单控件
➢action: 返回该表单的action属性值,该属性用于指定表单的提交地址。读写属性。
➢elements:返回表单内全部表单控件所组成的数组。使用该数组可以访问该表单内的任何表单控件。只读属性。
➢length: 返回表单内表单域的个数,该属性等于elements.length的值。只读属性。
➢method: 返回该表单的method属性,该属性通常有POST和GET两个值,默认采用
GET方式。该属性用于确定表单发送请求的方式。读写属性。
除此之外,HTMLFormElement 对象还有如下两个常用方法。
➢reset(): 重设表单,将所有表单域