本文主要是介绍JavaScript DOM编程笔记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
JavaScript DOM编程笔记
DOM是文档对象模型（DocuMent Object Model），借助DOM模型，可以将一个结构化文档转化为DOM树。程序可以访问、修改树里面的节点，也可以新增、删除树里面的节点。
目录
JavaScript DOM编程笔记
1、HTML元素之间的继承关系
2、访问HTML元素的2中方法
3、访问表单控件
1、HTML元素之间的继承关系
Node、Document、Element、HTMLElement是普通HTML元素的超类。不直接对应于HTML页面控件。但他们所包含的方法可被其他元素调用。
| 元素 | 说明 |
| HTMLDcument | HTML本身 |
| HTMLBodyElement | <body>控件 |
| HTMLDivElement | <div>控件 div:定义了文档的区域，块级 |
| HTMLFormElement | 表单控件 |
| HTMLSelectElement | |
| HTMLOptionElement | |
| HTMLIFrame | |
| HTMLInputElement | |
| HTMLTableElement | |
| HTMLTableRowElement | 表格行控件 |
| HTMLTableColElement | 表格列控件 |
| HTMLTableCellElement | 单元格控件 |
| HTMLTextAreaElement | 多行文本域控件 |
| HTMLOLElement | 有序列表控件 |
| HTMLULElement | 无序列表控件 |
| HTMLLIElement | 列表项控件 |
2、访问HTML元素的2中方法
1、根据ID访问HTML元素。
document.getElementById("xxx");
2、利用节点关系访问HTML元素。
.innerHTML属性，该属性代表该元素的内容，
如果元素的开始标签和结束标签之间都是字符串内容时（不包含其他子元素），可以用.innerHTML拿到这些字符串内容。
但<testarea> <input> 标签需要用 .value 来获取内容。
3、访问表单控件
HTMLFormElement 常用的属性和方法：
- action 返回表单的提交地址。
- elements 返回表单内全部控件所组成的数组。使用该数组可以访问该表单内任何表单控件。
- length 返回表单内表单域的个数，该属性等于elements.length的值
- method 返回该表单method属性，post或get
- target 用于确定提交表单时的结果窗口。_self,_parent,_top,_blank(新窗口)
- reset()，重置表单
- submit() 提交表单
elements能够得到一个HTMLCollection对象，该对象即能当数组又能通过关联数组来访问。
document.getElementById("from").element[0].value; 获取表单第一个控件的值
document.getElementById("from").element["name/id"].value; 获取表单id或name为id/name的控件的值
document.getElementById("from").xxname/xxid.value; 获取表单id或name为xxid/xxname的控件的值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTMLFormElement</title>
</head>
<body><form id="d" action="" method="get"><input type="text" name="user" /><br/><input type="text" name="pass" /><br/><select name="color" id="color"><option value="red">红色</option><option value="blue">蓝色</option></select><br/><input type="button" value="第1个" onclick="alert(document.getElementById('d').elements[0].value);"/><input type="button" value="第2个" onclick="document.getElementById('d').elements['pass'].value = 'text';"/><!--获取select标签 选中的 value 例如：red--><input type="button" value="第3个" onclick="alert(document.getElementById('d').color.value);"/><!--获取select标签 option 中的text 例如：红色--><input type="button" value="第3个标签内容" onclick="alert(document.getElementById('d').color.options[0].text);"/></form></body>
</html>
这篇关于JavaScript DOM编程笔记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
