JavaScript DOM编程笔记

最新推荐文章于 2024-06-24 20:35:30 发布

stayalonea

最新推荐文章于 2024-06-24 20:35:30 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/u013291972/article/details/98477336

版权

JavaScript DOM编程笔记

DOM是文档对象模型（DocuMent Object Model），借助DOM模型，可以将一个结构化文档转化为DOM树。程序可以访问、修改树里面的节点，也可以新增、删除树里面的节点。

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>