DOM操作----总结

 

查找方式

一：var obj = document.getElementById(id) ;

var obj = document.getElementById('d1') ;

obj.innerHTML = 'hello kitty' ; --- innerHTML属性：可以读或者写一个节点的html内容。

var obj2 =document.getElementById('username') ;

obj2.value = 'abc' ; ---value属性：可以读或者写一个节点的value值

 

二：var arr = node.getElementsByTagName(tagName);

 

三：使用遍历的方式（遍历的方式浏览器兼容性差，不建议使用可以使用别人写好的框架的方式进行遍历）

 

创建节点

var obj = document.createElement(tagName);

添加节点

node.appendChild(obj);---将 obj 作为 node 的最后一个孩子添加进来

node.insertBefore(obj,refNode);---将 obj 插入到 refNode 前面

node.replaceChild(obj,refNode);---替换 refNode

删除节点

node.removeChild(obj);

样式操作

一：修改节点的 style 属性（要修改的样式必须是内联样式）

二：修改节点的 class 属性

className = class 选择器名称

比如: obj.className = 's2';

 

如何禁止浏览器的默认行为?
在默认情况下，点击链接，浏览器会向 href 所指向的地址发请求。
点击表单提交，浏览器会将表单中的数据进行发送。
如果要禁止，可以使用如下语句:
<a href="" onclick="return false;"></a>
<form onsubmit="return false;">

 

如何使用正则表达式进行字符串的验证?
var reg = /正则表达式/;
boolean reg.test(要验证的字符串);
js 引擎会将"/正则表达式/"转换成一个 RegExp 对象，当字符串满足正则表达式的要求时，返
回 true。
prototype 框架的使用（引入架包：<script  src="prototype-1.6.0.3.js" />）
  $(id):  相当于 document.getElementById(id);
  $F(id):  相当于 document.getElementById(id).value;
  $(id1,id2...): 依次查找 id 为 id1,id2...的节点，返回一个数组。
  strip():  除掉字符串两端的空格

 

下拉列表：

1)  Select 对象
属性
a.  selectedIndex: 用户选择的选项的下标,下标从 0 开始。
b.  length:  获取戒者设置选项的个数。
c.  options: 返回一个数组，数组元素是 Option 对象。
2)  Option 对象
属性
a.  text: 选项的文本内容
b.  value:  选项的值
c.  selected: 当该选项被选上，值为 true,否则为 false。
小知识：创建一个 Option 对象。
var op = new Option(text,value);