javascript基本知识整理四

DOM操作

使用getelement系列方法实现dom元素的查找和定位

使用core dom标准操作实现节点的增删该查

dom？

通过dom可以动态改变文档内容

解析文档并生成dom树

通过标准接口+编程语言改变文档内容

访问指定节点的方法

getelementbyid()

getelementsbyname()

getelementsbytagname()

getelementsbyclassname()

function changebg(){
     var d1=document.getElementById('d1');
     d1.style.backgroundColor='red';
}

var b1=document.getElementById('b1');
var b2=document.getElementById('b2');
var img1=document.getElementById('img1');
b1.οnclick=function(){
     alert(img1.getAttribute('src'));
}
b2.οnclick=function(){
     img1.setAttribute('src','img/QQ截图20170314112944.png');
}

通过标签调用

var div = document.getElementsByTagName('div');
div[0].οnclick=function(){
   a[0].href='sizhangti.html';
   a[0].innerText='点击跳转';
}

更改样式的方法：

1、classsName 用于为dom元素直接添加一个样式类

2、style 用于为dom元素添加某一个样式值，注意驼峰写法

3、cssText 用于为dom 元素一次添加多个样式

获取标签名称

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

alert(d1.tagName);

获取内容

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

alert(d1.innerHTML);

修改内容

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

d1.innerHTML+='<p>第三段内容</p>'

如果编程时希望访问某个元素的父元素，但又不知道父元素的id、name、tag等可以根据父节点等找到

父节点

var h1=document.getElementById('h1');

var parent=h1.parentNode.parentNode;

alert(parent.tagName);

子节点

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

var child=d1.childNodes;

alert(child[0].tagName);

练习：

增加一行的内容

//var tr3=document.getElementById('tr3');
/*var clone=tr3.cloneNode(false);
clone.id='';
var parent=tr3.parentNode;
parent.appendChild(clone);*/

删除第二行的内容

var tr3=document.getElementById('tr3');
var parent=tr3.parentNode;
parent.removeChild(parent.childNodes[2]);

更改标题样式

var tr3=document.getElementById('tr3');
var parent=tr3.parentNode;
var child=parent.childNodes[0];
child.style.color='red';
child.style.fontSize='40px';

复制最后一行的内容

var tr3=document.getElementById('tr3');
var clone=tr3.cloneNode(true);
clone.id='';
var parent=tr3.parentNode;
parent.appendChild(clone);

什么需要表单验证

1、表单元素是否为空

2、用户名和密码

3、email地址验证

4、身份证等是否是数字

当输入表单数据不符合要求时，如何编写脚本来进行验证？

正则表达式是一个描述字符模式的对象

1、定义正则表达式

2、表达式的模式

普通方式

var reg=/表达式/附加参数

var reg=/white/;

构造函数

var reg=new RegExp(”表达式“，”附加参数“)

RegExp对象的方法

---test:检索字符串中指定的值，返回true或false

---exec：在字符串中执行匹配搜索，返回结果数组

RegExp对象的属性

----i：执行对大小写不敏感的匹配

----g:执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）

----m:执行多行匹配

正则表达式：

var reg=/a/;
var content=prompt('请输入内容');
alert( reg.test(content,reg)?'验证通过':'验证失败');//验证是否与给定的正则是否匹配。(若 var reg=/a/i;表明大小写不明感)

string对象的方法

----match：找到一个或多个正则表达式的匹配

----search:检索与正则表达式相匹配的值

----replace:替换与正则表达式匹配的字符串

----split:把字符串分割为字符串数组

1、split

var reg='a';
var content='123a123a123a';
var list=content.split(reg);
for(var i=0;i<list.length;i++){
   document.write(list[i]+'<br />');
} 

2、replace

var reg=/a/g;
var content='hanchengxuan is a good girl';
alert(content.replace(reg,'b'));

3、match//匹配

var reg=/a/g;
var content='afffdsafdsfdsafasfdvcxjkfdlsjg';
var arr= content.match(reg);
for(var i=0;i<arr.length;i++){
   alert(arr[i]);
}

4、search

var reg=/a/;
var content='jianghao is not a cute boy';
alert(content.search(reg));