當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

014、BOM与DOM对象的应用

發(fā)布時間：2023/12/19 编程问答 37 豆豆

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

Screen屏幕對象

Width：屏幕的寬度

Height：屏幕的高度

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

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

colorDepth：色深

navigator瀏覽器對象

appName：瀏覽器軟件的名稱

appVersion：版本號

platform：操作平臺

systemLanguage：系統(tǒng)語言

userLanguage：用戶語言

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

location地址欄對象

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

hash：取出錨點名稱

protocol：取出地址的協(xié)議

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

hostname：取出主機名稱

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

search：取出查詢字符串

location對應(yīng)的方法

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

history對象

back()：相當(dāng)于瀏覽器的“后退”按鈕

forward()：相當(dāng)于瀏覽器的“前進”按鈕

go(n)：跳轉(zhuǎn)到哪個歷史記錄。N代表歷史記錄

?????? go(1)：相當(dāng)于“前進”按鈕

?????? go(0)：相當(dāng)于“刷新”按鈕

?????? go(-1)：相當(dāng)于“后退”按鈕

問題：Firefox無法正常關(guān)閉，怎么辦？(有待考證)

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

第二步：將選項“dom.allow_scripts_to_close_windows”的值改為“true”

Firefox通過javascript:window.close()只能關(guān)閉點擊鏈接或新打開的窗口,不能關(guān)閉地址欄輸入打開的窗口;
如果只是自己測試用,可以在地址欄中輸入about:config，找到dom.allow_scripts_to_close_windows項，將其修改為true，重啟Firefox。

DOM簡介

W3C的DOM使用JS程序或腳本，可以動態(tài)的改變網(wǎng)頁中元素的結(jié)構(gòu)、外觀和內(nèi)容。

網(wǎng)頁對應(yīng)的標準：結(jié)構(gòu)(XHTML)、表現(xiàn)(css)、行為(js)

DOM可以操作結(jié)構(gòu)化的文檔非常方便，結(jié)構(gòu)化的文檔有：html、XML。

HTML文檔：具有一定的層次結(jié)構(gòu)、層次關(guān)系。

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

?????? HTML文檔中，各元素之間是有一定層級關(guān)系。

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

DOM分類

核心DOM：核心DOM中的屬性和方法，可以共享于HTML和XML文檔。

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

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

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

事件DOM：針對不同的瀏覽器，定義不同的事件模型對象。IE有自己的事件模型、Firefox也有自己的事件模型。

HTML節(jié)點樹

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

子節(jié)點：某一個節(jié)點的下級節(jié)點。

父節(jié)點：某一個節(jié)點的上級節(jié)點。

兄弟節(jié)點：平級關(guān)系的兩個節(jié)點，同屬于同一個父節(jié)點

DOM節(jié)點類型

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

Document節(jié)點：文檔節(jié)點。對應(yīng)整個HTML文檔。訪問其它節(jié)點都是從Document節(jié)點開始的。

?????? 其它節(jié)點都包含在Document節(jié)點之下。

Element節(jié)點：元素節(jié)點。對應(yīng)于網(wǎng)頁中的各種標記。比如：<img>、<table>

Attribute節(jié)點：屬性節(jié)點。對應(yīng)于網(wǎng)頁中各標記的屬性。比如：<img src=“” />

Text節(jié)點：文本節(jié)點。對應(yīng)于標記中的內(nèi)容。Text節(jié)點必須是最底層節(jié)點。

Comment節(jié)點：注釋節(jié)點（作個了解）

示例代碼：

核心DOM節(jié)點屬性

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

一、訪問節(jié)點

nodeName：節(jié)點的名稱

nodeValue：節(jié)點的值，只有Text節(jié)點才有nodeValue屬性。

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

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

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

firstChild：第一個子節(jié)點。

lastChild：最后一個子節(jié)點。

childNodes：子節(jié)點的列表，是一個數(shù)組。只有一個子節(jié)點，也返回一個數(shù)組。

parentNode：父節(jié)點

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

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

?????? 例如：setAttribute(“style”,”width:400;height:200px;”)? //給某個標記增加行內(nèi)樣式

????????????? ? 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”);

如果訪問某一個節(jié)點呢？

訪問每一個節(jié)點的起始點都是Document節(jié)點對應(yīng)的document對象。

<html>節(jié)點：document.firstChild

???????????????????? document.documentElement

<body>節(jié)點：document.body

???????????????????? document.firstChild.lastChild

為什么XHTML通過document.firstChil.lastChild取不到<body>節(jié)點？

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

XHTML和HTML的主要區(qū)別：DTD定義。

因此，在XHTML文檔中無法使用document.firstChild.lastChild這種方式訪問節(jié)點。

解決辦法：將DTD定義刪除，恢復(fù)HTML4.0的結(jié)構(gòu)。

為什么Firefox瀏覽器下，經(jīng)常會出現(xiàn)，取得某一個節(jié)點，反而返回文本節(jié)點？

Firefox會把空格、換行都當(dāng)成一個節(jié)點，當(dāng)成一個文本節(jié)點。

解決辦法：<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="改變內(nèi)容外觀" onclick="change_p_style()" /> <input type="button" value="移除內(nèi)容外觀" onclick="remove_p_style()" /> </div> </body> </html> View Code

三、節(jié)點的增刪

createElement(tagName)：創(chuàng)建一個HTML元素。注意：tagName不加尖括號，如：createElement(“h2”)

createTextNode(text)：創(chuàng)建文本節(jié)點

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

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

示例代碼：（隨機顯示星星的數(shù)量）

<!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"> //實例：隨機顯示小星星 /* 分析結(jié)果：（1）網(wǎng)頁背景色為黑色（2）圖片大小不一樣（3）圖片的坐標不一樣：上下左右四個邊界（4）圖片大小和坐標是隨機產(chǎn)生的（5）網(wǎng)頁加載完成，開始顯示星星（6）創(chuàng)建星星的圖片，并追加到body節(jié)點（7）當(dāng)點擊某個星星時，該星星消失（8）定時器的應(yīng)用 */ //變量初始化 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() {//更改網(wǎng)頁背景色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);//創(chuàng)建圖片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事件屬性，去調(diào)用一個函數(shù)removeImg()node_img.setAttribute("onclick","removeImg(this)");//將圖片追加到body節(jié)點 document.body.appendChild(node_img); } //刪除圖片節(jié)點 function removeImg(obj) {document.body.removeChild(obj) } //隨機數(shù)的函數(shù) function getRandom(min,max) {return Math.floor(Math.random()*(max-min)+min); } </script> </head><body οnlοad="init()"> </body> </html> View Code

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： phpcms无法打开手机端怎么办
下一篇：表单中的只读和禁用属性