DOM

最新推荐文章于 2025-08-22 11:32:18 发布

转载最新推荐文章于 2025-08-22 11:32:18 发布 · 74 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sooper/p/3426205.html

文章标签：

#javascript #xhtml #ViewUI

DOM(Document Object Model)文档对象模型
DOM技术是将文档中出现的所有内容抽象成对象的形式，并根据对象的形式进行操作
文档被抽象为对象后，形成一系列层级概念，最高层级为窗体对象window，其中又包含若干个子对象

BOM:Brower Object Model 浏览器对象模型
浏览器本身是一个窗体,所以它有一个windows对象.windows包含如下对象
navigator ：包含关于 Web 浏览器的信息。
history：包含了用户已浏览的 URL 的信息。
location：包含关于当前 URL 的信息。
document:代表给定浏览器窗口中的 HTML 文档。也就是我们的DOM对象。

DOM结构图

事件及事件激活

事件：描述具体的执行动作
事件源：描述激活事件的对象
事件激活方式：描述激活事件的方式

window对象

window对象描述了整个浏览器的顶层窗口，可以理解为浏览器每次打开后对应的窗体
window对象在执行操作时，可以省略window对象名称

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
</head>  
  
<body>  
  
<!--  
演示浏览器对象window中的内容。  
  
为了演示方便  
在页面上定义一个按钮  
通过点击按钮来显示对window对象内容的操作的结果。  
  
点击按钮就有一些具体的处理方式。  
所以使用了事件监听机制。  
  
按钮就是事件源。  
需要在按钮上注册一个事件动作。  
那么这个动作要有对应的处理方式。  
处理方式其实就是一个函数。这个函数可以是已有的，也可以自定义的。  
  
如果是自定义的函数。就需要javascript来完成。  
  
-->  
  
<script type="text/javascript">  
//定义按钮点击事件的处理方式  
function windowdemo()  
{  
    var name= window.navigator.appName;  
    var version =window.navigator.appVersion;  
    var plat=window.navigator.platform;  
      
    alert(plat);  
    alert(name+"++++++"+version);  
}  
  
function windowlocation()  
{  
    //alert(window.location.href);    
    location.href="http://www.sina.com.cn";//会将地址栏的url设置成http://www.sina.com.cn  并进行该地址的连接。  
}  
</script>  
  
<input type="button" value="演示window事件" onclick="windowlocation()"/>  
  
</body>  
</html>

window对象的子对象

history：封装浏览器的访问记录
location：封装浏览器的URL信息
event：封装了所有触发事件的状态
clipboardDate ：封装了剪贴板的操作
clientInformation ：封装了浏览器信息
screen ：封装屏幕信息
document ：封装页面全部内容信息

document对象

描述当前网页内容信息
常用属性：
url
defaultCharset
lastModified

常用函数：
getElementById：通过该标签的id属性值来获取该标签节点对象.
getElementsByName：通过标签的name属性值来获取对象.而且返回的不是一个节点对象.而是多个节点对象,用数组表示的.
getElementsByName：通过标签名称获取节点对象.但是标签很容易重复.所以返回的是一个节点数组.

节点

任意一个DOM树结构中的单元都可以称为一个节点，例如一个链接，一个按钮，一段文字
根据节点的内容不同，节点可以分为三种
文本节点
表格中td标签中的文字，span标签中的文字，div标签中的文字
元素节点
任意一个标签即为一个元素节点
属性节点
元素所携带的属性值

节点的层次结构

所有节点在文档中存在均存在节点结构层次，有些节点可以包含其他节点，如table，div等容器型标签，有些节点不能包含其他节点，如input，br等
在表格标签中，table包含tr，tr包含td,此时称table为tr的父节点，tr为td的父节点，反之td为tr的子节点，tr为table的子节点

每个节点携带有对应的信息
nodeName:节点名称
节点标签名
属性名
text
nodeType:节点类型
元素节点：1
文本节点：3
nodeValue:节点值
元素节点：null
文本节点：文本值

节点操作

获取父节点：
parentElement:获取父级元素
parentNode：获取父级节点
获取子节点：
childNodes:获取全部子节点(数组)
children:获取全部子元素
获取同级节点
nextSibling:获取下一个兄弟节点
previousSibling:获取上一个兄弟节点

创建节点元素
createElement
createTextNode
添加子节点：
appendChild
删除子节点：
removeChild
removeNode

修改子节点：
replaceChild
replaceNode
复制子节点：
cloneNode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<script type="text/javascript">  
  
function document_demo()  
{  
    /*  
        当一个html文档被dom解析后，加载进内存，就是一个dom树。  
        每一个标签都是一个节点。为了操作某一个节点。前提就是要先获取该节点对象。  
        最常见的操作无非就是获取页面中的节点。  
          
        document对象作为html文档的对象，可以获取到页面中任意一个节点。  
        获取方法如下：  
        getElementById();通过标签的id属性值来获取该标签的节点对象。该方法返回的是一个节点对象。因为一般情况下，id是唯一性的。  
                        不是所有的标签都要定义id属性，这样做太麻烦。  
                        只有大的区域，获取特殊区域，为了方便于获取和操作，才定义id属性。  
          
        getElementsByName();通过标签的name属性值来获取节点对象。返回的是一个节点数组。  
          
        getElementsByTagName();通过标签名称获取节点对象，返回的是一个节点数组。  
          
    */    
      
//  var tabNode =document.getElementById("tabid");  
    //alert(tabNode.nodeName);  
    //tabNode.border="1";  
    //tabNode.borderColor="blue";//不起作用  
    //tabNode.setAttribute("border","3");  
      
    var textNode=document.getElementsByName("user")[0];//值唯一时，可以这么写  
    //alert(textNode.value);  
    //var textNode=document.getElementsByName("user");  
    //alert(textNode[0].type);//nodeName显示undefined，直接textNode，是一个对象,length显示1，  
      
    var nodes=document.getElementsByName("sex");  
    for(var x=0;x<nodes.length;x++)  
    {  
        //alert(nodes[x].value);      
    }  
      
    //获取div对象  
    var divNode =document.getElementsByTagName("div")[0];  
    //alert(divNode.innerText);//innerText代表标签内封装的文本数据  
      
    //divNode.innerText="哈哈，将数据改掉！";  
      
    //想要获取到页面中所有的单元格中的数据。  
    var tdArr=document.getElementsByTagName("td");  
      
    for(var x=0;x<tdArr.length;x++)  
    {  
        alert(tdArr[x].innerText);    
    }  
      
}  
  
function documentdemo2()  
{  
    //只想获取表格id为tabid中的单元格数据。凡是容器型标签对象，都具备一个共性的方法getElementsByTagName(),获取该标签中标签节点。  
      
    //1、先获取指定的td所在的表格对象  
    var tabNode =document.getElementById("tabid");  
    //2、通过表格对象的getElementsByTagName()方法获取该表格内容指定的标签节点对象数组。  
    var tdNodes=tabNode.getElementsByTagName("td");  
    for(var x=0;x<tdNodes.length;x++)  
    {  
        alert(tdNodes[x].innerText);      
    }     
      
    alert(tabid.nodeName);  
}  
  
window.onload=function()  
{  
    var arr=document.links;//获取页面中所有的带有href属性的a标签对象  
    for(var x=0;x<arr.length;x++)  
    {  
        arr[x].target="_blank";   
    }  
}  
  
</script>  
  
</head>  
  
<body>  
  
<div>这是一个div区域</div>  
  
  
用户名：<input type="text" name="user" /><br />  
性别：<input type="radio" name="sex" value="nan" />男  
    <input type="radio" name="sex" value="nv" />女<br />  
      
<input type="button" value="document对象演示" onclick="document_demo()" />  
<input type="button" value="document" onclick="documentdemo2()" />  
  
  
<table id="tabid">  
    <tr>  
        <td>A</td>  
        <td>B</td>  
    </tr>  
      
    <tr>  
        <td>C</td>  
        <td>D</td>  
    </tr>  
</table>  
  
<a href="openAttach.html">广告弹窗</a>  
  
<span>这是span区域</span>  
  
<table>  
    <tr>  
        <td>哈哈</td>  
  
    </tr>  
      
    <tr>  
        <td>嘿嘿</td>  
    </tr>  
</table>  
  
  
</body>  
</html>

正则表达式校验

校验方式一：常用
格式：
var reg = new RegExp(“正则表达式”, “匹配模式”);
reg.test(待校验字符串);
返回值：
true/false
作用：
存在性检查

校验方式二：不常用
格式：
var reg = new RegExp(“正则表达式”, “匹配模式”);
reg.exec(待校验字符串);
返回值：
数组(仅有一个值)/null
作用：
返回匹配位置，封装有匹配的开始索引index与结束索引lastIndex;匹配模式g可以控制下一次继续匹配

校验方式三：不常用
格式：
var reg = new RegExp(“正则表达式”, “匹配模式”);
待校验字符串.match(reg);
返回值：
数组(多个值)/null
作用：
返回匹配位置;匹配模式g可以一次得到所有匹配结果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<script type="text/javascript">  
function checkUser(userNode){  
    var name=userNode.value;  
      
    //var namereg=new RegExp("^[a-z]{5}$");//正则表达式方式一,^表示头，$表示尾  
      
    var namereg=/^[a-z]{5}$/i;//正则表达式第二种方式,i表示忽略大小写  
      
    var spanNode=document.getElementById("userspan");  
    if(name.match(namereg))//match方法返回的是一个数组，如果没有找到就返回null  
    {  
        //alert("yes");  
        spanNode.innerHTML="用户名正确".fontcolor("green");  
    }  
    else  
    {  
        //alert("no");  
        spanNode.innerHTML="用户名错误".fontcolor("red");  
          
    }  
          
}  
  
function checkPsw(pswNode)  
{  
    var pass=pswNode.value;  
      
    //var passreg=new RegExp("^[0-9]{5}$");  
      
    var passreg=/^\d{5}$/;//正则表达式第二种方式  
    var spanNode=document.getElementById("pswspan");  
      
    if(pass.match(passreg))  
        spanNode.innerHTML="密码正确".fontcolor("green");  
    else  
        spanNode.innerHTML="密码错误".fontcolor("red");  
}  
  
function checkMail(mailNode)  
{  
    var mail=mailNode.value;  
      
    var mailreg=/^\w+@\w+(\.\w+)+$/;  
      
    var spanNode=document.getElementById("mailspan");  
      
    if(mailreg.test(mail))  
        spanNode.innerHTML="邮箱地址正确".fontcolor("green");  
    else  
        spanNode.innerHTML="邮箱地址错误".fontcolor("red");  
}  
  
function checkForm()  
{  
    //return true;//为true则允许提交，否则不允许提交  
      
    //event.returnValue=false;//这和上面的写法是一样的效果，只是这样写就不要在样式中写return  
      
    //alert(document.forms[0].user.value);  
      
    var form=document.forms[0];  
    if(checkUser(form.user)&& checkPsw(form.psw))  
    {  
        event.returnValue=false;      
    }  
      
}  
  
</script>  
  
  
</head>  
  
<body>  
<!-- 
<form action="http://127.0.0.1" onsubmit="return checkForm()">  对应方法中有return 
-->  
<form action="http://127.0.0.1" onsubmit="checkForm()">  
用户名称：<input type="text" name="user" onblur="checkUser(this)" />  
<span id="userspan"></span><br />  
输入密码：<input type="password" name="psw" onblur="checkPsw(this)"/>  
<span id="pswspan" ></span><br />  
确认密码：<input type="password" name="repsw" /><br />  
邮箱地址：<input type="text" name="mail" onblur="checkMail(this)" />  
<span id="mailspan" ></span><br />  
<input type="submit" value="提交数据" />  
</form>  
  
</body>  
</html>

总结：

JavaScript将浏览器及网页文档、HTML元素都使用相应的对象表示
如：window、document、body、forms
这些对象与对象的层次关系称为DOM
DOM把网页和脚本以及其他的编程语言联系起来了

转载于:https://www.cnblogs.com/sooper/p/3426205.html