Document Object Model 文档对象模型

===DOM====
Document Object Model 文档对象模型
一组API.
作用:
1.修改标签属性
2.增加删除html文本中的标签
操作:
1.查找
方式1:使用id或者标签名,查找节点
document.getElementById("id值");
document.getElementsByTagName("标签名");

方式2:遍历
parentNode:父节点
previousSibling:前一个兄弟节点
nextSibling:后一个兄弟节点
childNodes:孩子节点,返回数组
firstChild:第一个孩子节点
lastChild:最后一个孩子节点

--样式的操作:
a.通过设置className属性 
obj.className="";
b.通过修改style属性  
      obj.style.width=""
  css属性名如果有"-",则去掉"-",之后的一个字母大写
   如: obj.style.backgroundColor="";
   
2.创建
var newNode = document.createElement(tagName);
var txt = document.createTextNode("文本内容");


3.添加
appendChild(newNode):添加新节点到末尾
insertBefore(newNode,refNode):添加newNode到refNode节点之前
replaceChild(newNode,refNode):将refNode节点替换成newNode
  
 4.删除
 removeChild(node):删除节点node
 
 --动态表格---
--table对象---
属性:
rows属性:返回表格中的所有行的一个数组
该数组包括<thead>,<tfoot>,<tbody>中定义的所有行
tBodies属性:放回表格中所有tbody的一个数组
tFoot属性:返回表格中tFoot对象
tHead属性:返回表格中tHead对象
方法:
insertRow(index):(index从0开始)在表格中的指定位置插入一个新行,返回一个TableRow对象(表示新插入的行,即tr)
deleteRow(index):从表格中删除指定位置的行.


--TableRow对象--
属性:
cells:返回行中的所有单元格的一个数组
rowIndex:返回该行在表中的位置
方法:
insertCell(index):(index从0开始)在指定位置插入一个新的单元格,返回一个TableCell对象(表示新插入的单元格,即td)
deleteCell(index):删除指定位置的单元格. 
  
  ---select对象--- 
<select>
<option value="">xxx</option>
</select>
属性:
selectedIndex:用户选中的下标的序号
options:是一个数组,表示所有的选项,每一个元素都是一个option对象
length:表示选项的个数


s.options.length == s.length :true


--option对象
value:option的value属性的值
text:option标记之间的文本
selected:true|false 表示该选项是否被选中
创建新的option对象:
var op = new Option(text,value)
  
  


--form对象
属性:
action:form标签中的action属性
method:get|post form标签中的method属性
elements:返回form表单中所有的节点,是一个数组


方法:
submit():提交,会绕过表单验证(onsubmit)
reset():重置表单  
  
  
  
  
  
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值