DOM

時間  2020-09-14
標籤 dom 欄目 HTML 简体版
原文   原文鏈接

DOM(Document Object Model)文檔對象模型
DOM技術是將文檔中出現的全部內容抽象成對象的形式，並根據對象的形式進行操做
文檔被抽象爲對象後，造成一系列層級概念，最高層級爲窗體對象window，其中又包含若干個子對象javascript

BOM:Brower Object Model 瀏覽器對象模型
瀏覽器自己是一個窗體,因此它有一個windows對象.windows包含以下對象
 navigator ：包含關於 Web 瀏覽器的信息。
 history：包含了用戶已瀏覽的 URL 的信息。
 location：包含關於當前 URL 的信息。
 document:表明給定瀏覽器窗口中的 HTML 文檔。也就是咱們的DOM對象。html

DOM結構圖java

事件及事件激活node

事件：描述具體的執行動做
事件源：描述激活事件的對象
事件激活方式：描述激活事件的方式web

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對象的子對象windows

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(),獲取該標籤中標籤節點。  
      
    //一、先獲取指定的td所在的表格對象  
    var tabNode =document.getElementById("tabid");  
    //二、經過表格對象的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這些對象與對象的層次關係稱爲DOMDOM把網頁和腳本以及其餘的編程語言聯繫起來了

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程