dom文档对象模型
文档对象模型编程
在浏览器加载完HTML页面的时候,JavaScript引擎把整个HTML页面得所有的HTML标签封装成对象,
通过这些标签对象来操作(控制)HTML页面的效果,这种操作就是dom编程
JavaScript引擎加载二胺HTML页面后,会把每个标签封装成对象,这些标签对象形成了一个树状的结构
document:对象,这个对象代表了整个HTML文档
如果要找对应的标签对象,就需要从document开始查询。
DOM步骤
1)找到需要控制的标签对象
2)通过标签对象的属性和方法改变标签
文档:
超文本文档(超文本标记文档)HTML ,xml
对象
提供了属性和方法
模型
使用属性和方法操作超文本标记类型文档
可以使用JS里面的dom里面提供的对象,使用这些对象的属性和方法,对标记文档进行操作
想要对标记型文档进行操作,首先需要,对标记型文档里面的所有内容封装成对象
需要把HTML里面的标签,属性,文本内容转都封装成对象
要想对标记型文本进行操作,解析标记型文档
解析过程
根据HTML的层级结构,在内存中分配一个树形结构,需要把HTML中的每个部分封装成对象
document对象 整个文档
element对象 标签对象
属性对象
文本对象
Node结点对象,这个对象是这些对象的父对象
如果在对象里面找不到想要的方法,这个时候到Node对象里面取找
DOM模型有三种
DOM level 1: 将HTML文档封装成对象
DOM level 2:在java 1的基础上添加了新功能,
DOM level 3:支持xml1.0的一些新特性
DHTML 是很多技术的简称
html:封装数据
css:使用属性和属性的设置样式
dom;操作HTML文档(标记型文档)
JavaScript 专门指的是技术语法语句(ECMAScript)
1)查询标签对象
--------
通过document对象获取,document代表一个HTML页面
通过document对象集合,
作用:获取多个后者同类的标签对象
all:获取所有的标签对象
属性
nodeName 获取标签名称
var nodeList=document.all://返回标签对象数组
for(var i=0;i<nodeList.length;i++){
alert(nodeList[i].nodeName);
}
forms:获取form标签对象
var nodeList=document.forms://返回标签对象数组
for(var i=0;i<nodeList.length;i++){
alert(nodeList[i].nodeName);
}
images:获取img标签对象
var nodeList=document.imagesl://返回标签对象数组
for(var i=0;i<nodeList.length;i++){
alert(nodeList[i].nodeName);
}
links:获取a标签对象
var nodeList=document.links://返回标签对象数组
for(var i=0;i<nodeList.length;i++){
alert(nodeList[i].nodeName);
}
通过关系来查找标签对象
节点(Node)
节点之间的关系
1)父节点: parentNode 属性
2)子节点:childNodes firstNode lastNode 属性
注意:获取的子节点包含了以下的元素
1)标签 1
2)空格换行 3
3)HTML注释 8
在子节点中刷选出标签出来呢? 可以使用 nodeType属性:节点类型
取出nodeType值为1的节点对象
第一个子节点 firstChild 属性
最后一个子节点 lastChild属性
3)兄弟关系 sibling
下一个兄弟节点 nextSibling 属性
上一个兄弟节点 previousSibling 属性
通过document方法查找标签对象
document.getElementById(“ID属性值”):常用
注意:
1)使用该方法获取的标签一定要有一个ID属性
2)在同一个HTML页面中不要出现俩个同名的ID
document.getElementsByName(“name属性值”);获取同name属性名的标签
注意
1)使用该方法获取标签一定要有name属性
//返回数组
document.getElementsByName(“user“)[0];//获取第一个
document.getElementsByTagName(“标签名”);获取相同标签名的标签列表
2)修改标签对象
常用的需要修改的属性
innerHTML属性 :修改标签体内容 <span><div><select>
innerHTML=“xxxx”;设置的标签内的HTML
innertext="xxxx"; 设置标签内容的文本 在IE可以在火狐不可以
text属性:
value属性:修改value属性值。input type=“text”
userNam.value=“”; //一定是字符串类型
src 属性 :修改图片的src位置:<img src=""/>
var img=document.getElementsByTagName("img");
img.src="";
checked属性:修改单选或多项的默认值。<input type="radio/checked" checked=""/>
这个选项的状态
false 表示没有选中
true 表示已经被选中
var iq=document.getElementsByName("");
iq.checked=true;
3)标签对象的方法
添加相关
document.createElement("标签名");创建节点对象
setAttribute("name","value");设置节点的属性
插入相关:
appendChild(标签对象);添加子节点对象
insertBefore(新标签对象,指定对象);在指定的对象前面添加子节点对象
删除
removeChild(标签对象);删除子节点
练习代码
动态生成表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态生成表格</title>
<script type="text/javascript">
var count=2;
function add(){
//创建tr标签
var tr=document.createElement("tr");
//创建三个td标签
var td1=document.createElement("td");
td1.innerHTML=count;
var td2=document.createElement("td");
var input1=document.createElement("input");
input1.setAttribute("type", "text");
//把input放入到td中
td2.appendChild(input1);
var td3=document.createElement("td");
var input3=document.createElement("input");
input3.setAttribute("type", "password");
td3.appendChild(input3);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
var tbody=document.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
count++;
}
function delect(){
if(count>2){
var tbody=document.getElementsByTagName("tbody")[0];
var lastChild=tbody.lastChild;
tbody.removeChild(lastChild);
count--;
}
}
</script>
</head>
<body>
<table border="1px " align="center" width="400px" cellspacing="0px">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" value="李四" />
</td>
<td>
<input type="password" value="123456"/>
</td>>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<input type="button" value="增加一个学生的信息" onclick="add()" />
<input type="button" value="删除一个学生的记录" onclick="delect()" />
</td>
</tr>
</tfoot>
</table>
</body>
</html>
正则表达式
创建正则表达式“ var 变量=/正则规则/;
/*
[a-z]:表示匹配字母
* “0或多个元素
+ :1个或者多个元素
? :0或者1个元素
{n,m} :大于N,小于M的个数
*/
正则方法:
test() :用于匹配指定的一个字符串 true 表示成功 ;false表示匹配失败
注意:
在JS正则表达式中:匹配规则:如果遇到了符合规则的内容,就代表匹配成功!
如果需要和java一样完全匹配,需要添加边界符号
开始标记: ^
结束标记: $
var str="12"
var reg=/^[0-9]{2}$/;
var str="abcabc";
var reg=/[0-9]{3}/;
if(reg.test(str)){
}
练习代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用正在校队表单输入</title>
<script type="text/javascript">
function testOnfocus(){
var userName=document.getElementById("userName");
userName.value="";
}
function uesrOnBulr(){
var userName=document.getElementById("userName").value;
var reg=/^[a-zA-Z0-9]{4,16}$/;
var span=document.getElementById("userSpan");
if(userName!=""){
if(reg.test(userName)){
span.innerHTML="用户名正确".fontcolor("green");
return true;
}
else{
span.innerHTML="该用户名错误".fontcolor("red");
return false;
}
}
else{
span.innerHTML="该用户名不能为空".fontcolor("red");
return false;
}
}
function passOnBulr(){
var userPwd=document.getElementById("userPwd").value;
var reg=/^[a-zA-Z0-9]{4,16}$/;
var span=document.getElementById("userTip");
if(userPwd!=""){
if(reg.test(userPwd)){
span.innerHTML="密码正确".fontcolor("green");
return true;
}
else{
span.innerHTML="密码名错误".fontcolor("red");
return false;
}
}
else{
span.innerHTML="密码不能为空".fontcolor("red");
return false;
}
}
function twiceOnbulr(){
var userPwd=document.getElementById("userPwd").value;
var userPwds=document.getElementById("userPwds").value;
var span=document.getElementById("userTips");
if(userPwd!=""){
if(userPwd==userPwds){
span.innerHTML="密码正确".fontcolor("green");
return true;
}
else{
span.innerHTML="密码错误".fontcolor("red");
return false;
}
}
else{
span.innerHTML="密码不能为空".fontcolor("red");
return false;
}
}
function idCardOnbulr(){
var idCard=document.getElementById("idCardOnbul").value;
var span=document.getElementById("idCardTips");
var reg=/^[0-9]{17}[a-zA-Z0-9]{1}$/;
if(idCard!=""){
if (reg.test(idCard)) {
span.innerHTML="身份证输入格式正确".fontcolor("green");
return true;
}else{
span.innerHTML="身份证输入格式不正确".fontcolor("red");
return false;
}
}
else{
span.innerHTML="身份证不能为空".fontcolor("red");
return false;
}
}
function emailOnbuler(){
var email=document.getElementById("emailOnbul").value;
var span=document.getElementById("emailTips");
var reg=/^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.[a-zA-Z]{2,3}){1,2}$/;
if(email!=""){
if (reg.test(email)) {
span.innerHTML="邮箱输入格式正确".fontcolor("green");
return true;
}
else{
span.innerHTML="邮箱证输入格式不正确".fontcolor("red");
return false;
}
}
else{
span.innerHTML="邮箱不能为空".fontcolor("red");
return false;
}
}
function checkAll(){
if(uesrOnBulr() && passOnBulr() && twiceOnbulr() && idCardOnbulr() && emailOnbuler()){
return true;
}
else{
return false;
}
}
</script>
</head>
<body>
<!-- form 表单有一个onsubmit事件,返回为真则提交表单,假则不提交表单 -->
<form action="后台处理.html" method="post" onsubmit="return checkAll()" >
用户名:<input type="text" value="4~16位数字或字母" id="userName" onfocus="testOnfocus()" onblur="uesrOnBulr()" />
<span id="userSpan"></span>
<br/>
密码:<input type="password" onblur ="passOnBulr()" id="userPwd" />
<span id="userTip"></span>
<br/>
再次输入密码:<input type="password" onblur ="twiceOnbulr()" id="userPwds" />
<span id="userTips"></span>
<br/>
省份证:<input type="text" onblur="idCardOnbulr()" id="idCardOnbul" />
<span id="idCardTips"></span>
<br/>
邮箱:<input type="text" onblur="emailOnbuler()" id="emailOnbul" />
<span id="emailTips"></span>
<br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>