Document Object Model 文档对象模型

时间：2014-07-21 23:27:29 阅读：272 评论：0 收藏：0 [点我收藏+]

===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():重置表单

Document Object Model 文档对象模型,布布扣,bubuko.com

标签：des style color 使用 os width

原文地址：http://blog.csdn.net/liang5630/article/details/38023129

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行