當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

014、BOM与DOM对象的应用

發布時間：2023/12/19 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 014、BOM与DOM对象的应用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Screen屏幕對象

Width：屏幕的寬度

Height：屏幕的高度

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

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

colorDepth：色深

navigator瀏覽器對象

appName：瀏覽器軟件的名稱

appVersion：版本號

platform：操作平臺

systemLanguage：系統語言

userLanguage：用戶語言

cookieEnabled：cookie是否啟用。Cookie是用來記錄用戶賬號信息

location地址欄對象

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

hash：取出錨點名稱

protocol：取出地址的協議

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

hostname：取出主機名稱

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

search：取出查詢字符串

location對應的方法

reload()：刷新網頁，相當于單擊瀏覽器的“刷新按鈕”

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節點：注釋節點（作個了解）

示例代碼：

核心DOM節點屬性

核心DOM中的屬性是公共屬性，可以應用于HTML DOM，每一個HTML標記都繼承核心DOM中的屬性。

一、訪問節點

nodeName：節點的名稱

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

?????? 提示：nodeValue中內容不能增加任何的標記。nodeValue和innerHTML不一樣。

???????????????????? innerHTML中可以加各種其它的標記

???????????????????? nodeValue只能輸入普通文本；

firstChild：第一個子節點。

lastChild：最后一個子節點。

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

parentNode：父節點

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

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

三、節點的增刪

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 οnlοad="init()"> </body> </html> View Code

轉載于:https://www.cnblogs.com/chun-jiang-chao-de-gu-shi/p/5581531.html

總結

以上是生活随笔為你收集整理的014、BOM与DOM对象的应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： phpcms无法打开手机端怎么办
下一篇：虎年除夕寄语文案168个