===DOM====
一组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