01四、BOM與DOM對象的應用

時間  2019-11-11
標籤 bom dom 對象 應用 欄目 HTML 简体版
原文   原文鏈接

Screen屏幕對象

Width：屏幕的寬度javascript

Height：屏幕的高度css

availWidth：屏幕的有效寬度（不含任務欄）html

availHeight：屏幕的有效高度（不含任務欄）java

colorDepth：色深node

<script type="text/javascript">
//實例：測試本身顯示屏幕相關信息
var str = "<h2>本身屏幕的相關信息</h2>";
str += "總寬度："+screen.width;
str += "<br>總高度："+screen.height;
str += "<br>有效寬度："+screen.availWidth;
str += "<br>有效高度："+screen.availHeight;
str += "<br>顏色色深："+screen.colorDepth;
document.write(str);
</script>

navigator瀏覽器對象

appName：瀏覽器軟件的名稱windows

appVersion：版本號數組

platform：操做平臺瀏覽器

systemLanguage：系統語言cookie

userLanguage：用戶語言app

cookieEnabled：cookie是否啓用。Cookie是用來記錄用戶帳號信息

<script type="text/javascript">
//實例：當前瀏覽器的相關信息
var str = "<h2>當前瀏覽器的相關信息</h2>";
str += "瀏覽器名稱："+navigator.appName;
str += "<br>瀏覽器版本："+navigator.appVersion;
str += "<br>操做平臺："+navigator.platform;
str += "<br>系統語言："+navigator.systemLanguage;
str += "<br>用戶語言："+navigator.userLanguage;
str += "<br>cookie是否啓用："+navigator.cookieEnabled;
document.write(str);
//根據不一樣的瀏覽器，輸出窗口的內寬
if(navigator.appName=="Netscape")
{
    //Firefox瀏覽器
    document.write("<hr>Firefox窗口的內寬是："+window.innerWidth);
}else
{
    //IE瀏覽器
    document.write("<hr>IE窗口的內寬是："+document.documentElement.clientWidth);
}
</script>
View Code

location地址欄對象

href：指完整的地址欄中的地址

hash：取出錨點名稱

protocol：取出地址的協議

host：取出主機地址和端口號

hostname：取出主機名稱

pathname：取出文件路徑和文件名

search：取出查詢字符串

location對應的方法

reload()：刷新網頁，至關於單擊瀏覽器的「刷新按鈕」

<script type="text/javascript">
var str = "<h2>location獲取地址的各個部分</h2>";
str += "完整地址："+location.href;
str += "<br>協議："+location.protocol;
str += "<br>主機名稱："+location.hostname;
str += "<br>文件和路徑："+location.pathname;
str += "<br>查詢字符串："+location.search;
str += "<br>錨點名稱："+(location.hash ? location.hash : "不存在");
document.write(str);
</script>
</head>

<body>
<h2>刷新網頁，我就出來了</h2>
<input type="button" value="刷新網頁" onclick="location.reload()" />
<input type="button" value="關閉窗口" onclick="window.close()" />
</body>
View Code

history對象

back()：至關於瀏覽器的「後退」按鈕

forward()：至關於瀏覽器的「前進」按鈕

go(n)：跳轉到哪一個歷史記錄。N表明歷史記錄

       go(1)：至關於「前進」按鈕

       go(0)：至關於「刷新」按鈕

       go(-1)：至關於「後退」按鈕

問題：Firefox沒法正常關閉，怎麼辦？(有待考證)

第一步：在地址欄中輸入：about:config

第二步：將選項「dom.allow_scripts_to_close_windows」的值改成「true」

Firefox經過javascript:window.close()只能關閉點擊連接或新打開的窗口,不能關閉地址欄輸入打開的窗口;
若是隻是本身測試用,能夠在地址欄中輸入about:config，找到dom.allow_scripts_to_close_windows項，將其修改成true，重啓Firefox。

 

DOM簡介

W3C的DOM使用JS程序或腳本，能夠動態的改變網頁中元素的結構、外觀和內容。

網頁對應的標準：結構(XHTML)、表現(css)、行爲(js)

DOM能夠操做結構化的文檔很是方便，結構化的文檔有：html、XML。

HTML文檔：具備必定的層次結構、層次關係。

       HTML文檔只有一個根元素(根標記)，就是<html>。

       HTML文檔中，各元素之間是有必定層級關係。

       DOM操做HTML元素，都是從根元素，一級一級的往下查找，直到找到目標元素爲止。

DOM分類

核心DOM：核心DOM中的屬性和方法，能夠共享於HTML和XML文檔。

HTML DOM：針對HTML文檔的專用接口，也就是一些專用的屬性和方法。

XML DOM：針對XML文檔的專用接口，也就是一些專用的屬性和方法。

CSS DOM ：針對CSS定義的專用接口，用於JS給HTML元素增長樣式或外觀。

事件DOM：針對不一樣的瀏覽器，定義不一樣的事件模型對象。IE有本身的事件模型、Firefox也有本身的事件模型。

HTML節點樹

根節點：每個HTML文檔都有肯只能一個根節點，就是<html>

子節點：某一個節點的下級節點。

父節點：某一個節點的上級節點。

兄弟節點：平級關係的兩個節點，同屬於同一個父節點

DOM節點類型

DOM中定義了12種節點類型，針對HTML文檔的節點類型只有5個。

Document節點：文檔節點。對應整個HTML文檔。訪問其它節點都是從Document節點開始的。

       其它節點都包含在Document節點之下。

Element節點：元素節點。對應於網頁中的各類標記。好比：<img>、<table>

Attribute節點：屬性節點。對應於網頁中各標記的屬性。好比：<img src=「」 />

Text節點：文本節點。對應於標記中的內容。Text節點必須是最底層節點。

Comment節點：註釋節點（做個瞭解）

示例代碼：

<!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>document文檔</title>
<script language="javascript">
    function get_node_table(){
        //由於有文檔標題，因此此處應該是第二個節點
        var html = document.childNodes[1];
        var bodyNode = html.lastChild;
        var tableNode = bodyNode.firstChild;
        alert(tableNode.nodeName);
    }
    function get_node_tr(){
        var bodyNode = document.body;
        var tableNode = bodyNode.firstChild;
        var tbodyNode = tableNode.firstChild;
        alert(tbodyNode.childNodes[1].nodeName);
    }
    function edit_node_text(){
        var bodyNode = document.body;
        var tableNode = bodyNode.firstChild;
        var tbodyNode = tableNode.firstChild;
        var trNode = tbodyNode.childNodes[1];
        var tdNode = trNode.childNodes[1];
        tdNode.innerHTML = "<font color='red'>Demo</font>";
    }
</script>
</head>

<body><table width="500" border="1"><tr><th>編號</th><th>新聞標題</th></tr><tr><td>1001</td><td>DEMO</td></tr></table>
<input type="button" value="取得table節點的名稱" onClick="get_node_table()" />
<input type="button" value="取得第二個tr節點名稱" onClick="get_node_tr()" />
<input type="button" value="更改'DEMO'內容" onClick="edit_node_text()" />
</body>
</html>
View Code

 

 

核心DOM節點屬性

核心DOM中的屬性是公共屬性，能夠應用於HTML DOM，每個HTML標記都繼承核心DOM中的屬性。

1、訪問節點

nodeName：節點的名稱

nodeValue：節點的值，只有Text節點纔有nodeValue屬性。

       提示：nodeValue中內容不能增長任何的標記。nodeValue和innerHTML不同。

                     innerHTML中能夠加各類其它的標記

                     nodeValue只能輸入普通文本；

firstChild：第一個子節點。

lastChild：最後一個子節點。

childNodes：子節點的列表，是一個數組。只有一個子節點，也返回一個數組。

parentNode：父節點

2、給節點增長屬性、刪除屬性、取得某一個屬性的值

setAttribute(name,value)：給某一個HTML元素增長一個屬性。

       例如：setAttribute(「style」,」width:400;height:200px;」)  //給某個標記增長行內樣式

                setAttribute(「src」,」images/bg.gif」)  //給圖片標記增長一個src屬性，屬性值爲「images/bg.gif」

                setAttribute(「id」,」result」);  //給某個標記增長一個id屬性，屬性值爲「result」

getAttribute(name)：取得某個屬性的值

       例如： var style = document.getAttribute(「style」)

removeAttribute(name)：刪除指定的一個屬性

       例如：obj.removeAttribute(「style」);

 

若是訪問某一個節點呢？

訪問每個節點的起始點都是Document節點對應的document對象。

<html>節點：document.firstChild

                     document.documentElement

<body>節點：document.body

                     document.firstChild.lastChild

 

 

爲何XHTML經過document.firstChil.lastChild取不到<body>節點？

核心DOM最初是給HTML4.0文檔用的。

XHTML和HTML的主要區別：DTD定義。

所以，在XHTML文檔中沒法使用document.firstChild.lastChild這種方式訪問節點。

解決辦法：將DTD定義刪除，恢復HTML4.0的結構。

 

爲何Firefox瀏覽器下，常常會出現，取得某一個節點，反而返回文本節點？

Firefox會把空格、換行都當成一個節點，當成一個文本節點。

解決辦法：<body>和<table>之間不能有任何的空白。

實例代碼：

<!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>
<style type="text/css">
    .set{border:1px solid #660066;
    position:fixed;
    top:50px;
    right:100px;
    
    }
</style>
<script language="javascript">
    function change_div_style(){
        var divNode = document.getElementsByTagName('div')[0];
        var style = "width:600px;margin:50px auto;border:1px solid #e7e7e7;background-color:#e2e2e2";
        divNode.setAttribute("style",style);
    }
    function remove_div_style(){
        var divNode = document.getElementsByTagName('div')[0];
        divNode.removeAttribute('style');
    }
    function change_h2_style(){
        var h2Node = document.getElementsByTagName('h2')[0];
        var style = "text-align:center;color:#FF0000";
        h2Node.setAttribute('style',style);
    }
    function remove_h2_style(){
        var h2Node = document.getElementsByTagName('h2')[0];
        h2Node.removeAttribute('style');
    }
    function change_p_style(){
        var divNode = document.getElementsByTagName('div')[0];
        var pNodes = divNode.childNodes;
        var style = "color:#00F;";
        for(var i=1;i<pNodes.length;i++){
            pNodes[i].setAttribute('style',style);
        }
    }
    function remove_p_style(){
        var divNode = document.getElementsByTagName('div')[0];
        var pNodes = divNode.childNodes;
        for(var i=1;i<pNodes.length;i++){
            pNodes[i].removeAttribute('style');
        }
    }
</script>
</head>

<body>
<div><h2>新聞標題</h2><p>段落一</p><p>段落二</p></div>
<div class="set">
<input type="button" value="改變層的外觀" onclick="change_div_style()" />
<input type="button" value="移除層的外觀" onclick="remove_div_style()" /><br />
<input type="button" value="改變標題外觀" onclick="change_h2_style()" />
<input type="button" value="移除標題外觀" onclick="remove_h2_style()" /><br />
<input type="button" value="改變內容外觀" onclick="change_p_style()" />
<input type="button" value="移除內容外觀" onclick="remove_p_style()" />
</div>
</body>
</html>
View Code

3、節點的增刪

createElement(tagName)：建立一個HTML元素。注意：tagName不加尖括號，如：createElement(「h2」)

createTextNode(text)：建立文本節點

appendChild(node)：將某一個子節點追加到父節點

removeChild(node)：移取某一個子節點

示例代碼：（隨機顯示星星的數量）

<!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">
//實例：隨機顯示小星星
/*
分析結果：
    （1）網頁背景色爲黑色
    （2）圖片大小不同
    （3）圖片的座標不同：上下左右四個邊界
    （4）圖片大小和座標是隨機產生的
    （5）網頁加載完成，開始顯示星星
    （6）建立星星的圖片，並追加到body節點
    （7）當點擊某個星星時，該星星消失
    （8）定時器的應用
*/
//變量初始化
var x_left = 0;   //窗口的左邊界
var x_right = 0;  //窗口的右邊界
var y_top = 0;    //窗口的頂邊界
var y_bottom = 0;  //窗口的底邊界
var img_width_max = 80;  //圖片的最大寬
var img_width_min = 15;  //圖片的最小寬
//初始化
function init()
{
    //更改網頁背景色
    document.body.bgColor = "#000";
    //計算右邊界和底邊界
    x_right = window.innerWidth - img_width_max;
    y_bottom = window.innerHeight - img_width_max;
    //定時器
    setInterval("start()",1000);
}
function start()
{
    //求圖片大小的隨機值
    var width = getRandom(img_width_min,img_width_max);
    //求圖片座標的隨機值
    var x = getRandom(x_left,x_right);
    var y = getRandom(y_top,y_bottom);
    //建立圖片
    var node_img = document.createElement("img");
    //給圖片增長src屬性
    node_img.setAttribute("src","images/xingxing.gif");
    //給圖片增長style屬性
    node_img.setAttribute("style","position:absolute;top:"+y+"px;left:"+x+"px;width:"+width+"px;");
    //給圖片增長onclick事件屬性，去調用一個函數removeImg()
    node_img.setAttribute("onclick","removeImg(this)");
    //將圖片追加到body節點
    document.body.appendChild(node_img);
}
//刪除圖片節點
function removeImg(obj)
{
    document.body.removeChild(obj)
}
//隨機數的函數
function getRandom(min,max)
{
    return Math.floor(Math.random()*(max-min)+min);
}
</script>
</head>

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