js bom和dom

来源:https://www.cnblogs.com/panda-pandeyong/archive/2018/09/10/9601348.html
-Advertisement-
Play Games

一, 前言 到目前為止，我們已經學過了JavaScript的一些簡單的語法。但是這些簡單的語法，並沒有和瀏覽器有任何交互。 也就是我們還不能製作一些我們經常看到的網頁的一些交互，我們需要繼續學習BOM和DOM相關知識。 JavaScript分為 ECMAScript，DOM，BOM。 BOM（Bro ...


 一, 前言

到目前為止，我們已經學過了JavaScript的一些簡單的語法。但是這些簡單的語法，並沒有和瀏覽器有任何交互。

也就是我們還不能製作一些我們經常看到的網頁的一些交互，我們需要繼續學習BOM和DOM相關知識。

JavaScript分為 ECMAScript，DOM，BOM。

 

BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行“對話”。

DOM （Document Object Model）是指文檔對象模型，通過它，可以訪問HTML文檔的所有元素。

 

Window對象是客戶端JavaScript最高層對象之一，由於window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，可以省略window對象的引用。例如：window.document.write()可以簡寫成：document.write()。

二, window對象

　　概述:

所有瀏覽器都支持 window 對象。它表示瀏覽器視窗。

*如果文檔包含框架（frame 或 iframe 標簽），瀏覽器會為 HTML 文檔創建一個 window 對象，併為每個框架創建一個額外的 window 對象。

*沒有應用於 window 對象的公開標準，不過所有瀏覽器都支持該對象。

所有 JavaScript 全局對象、函數以及變數均自動成為 window 對象的成員。

全局變數是 window 對象的屬性。全局函數是 window 對象的方法。

接下來要講的HTML DOM 的 document 也是 window 對象的屬性之一。

一些常用的Window方法：

  • window.innerHeight - 瀏覽器視窗的內部高度
  • window.innerWidth - 瀏覽器視窗的內部寬度
  • window.open() - 打開新視窗
  • window.close() - 關閉當前視窗

　　window的子對象

　　

　　navigator對象(瞭解即可)

　　瀏覽器對象,通過這個對象可以判定用戶所使用的瀏覽器,包含瀏覽器相關信息/

navigator.appName　　// Web瀏覽器全稱
navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字元串
navigator.userAgent　　// 客戶端絕大部分信息
navigator.platform　　　// 瀏覽器運行所在的操作系統

 

　　screen對象(瞭解即可)

　　屏幕對象,不常用.

　　一些屬性: screen.availWidth   可用的屏幕寬度　　screen.availlHeight   可用的屏幕高度

　　

　　history

　　window.history對象(瞭解即可)

　　window.history 對象包含瀏覽器的歷史.

　　瀏覽歷史對象,包含用戶對當前頁面的瀏覽歷史,但我們無法查看具體地址,可以簡單地用來前進或後退一個頁面.

history.forward()//前進一頁
history.back() //後退一頁

 

　　location對象

　　window.location對象用於獲得當前頁面的地址(URL),並把瀏覽器重定向新的頁面.

　　常用方法:

　　

location.href  獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() 重新載入頁面

 

　　彈出框

　　可以在JavaScript中創建三種消息框:警告框 , 確認框 ,提示框.

 　　一旦彈出,瀏覽器就會阻塞.

　　警告框

　　警告框經常用用於用戶可以得到某些信息.

　　當警告框出現後,用戶需要點擊確定按鈕才能繼續進行操作.

　　語法: alert('你看到了嗎?');

　　

　　確認框(瞭解即可)

 

確認框用於使用戶可以驗證或者接受某些信息。

當確認框出現後，用戶需要點擊確定或者取消按鈕才能繼續進行操作。

如果用戶點擊確認，那麼返回值為 true。如果用戶點擊取消，那麼返回值為 false。

　　語法: confirm('你確定嗎?');

 

　　提示框(瞭解即可)

提示框經常用於提示用戶在進入頁面前輸入某個值。

當提示框出現後，用戶需要輸入某個值，然後點擊確認或取消按鈕才能繼續操縱。

如果用戶點擊確認，那麼返回值為輸入的值。如果用戶點擊取消，那麼返回值為 null。

語法:  prompt('請在下方輸入','你的答案')

 　　

　　計時相關

　　通過使用JavaScript,我們可以在一定時間間隔之後來執行代碼,而不是在函數被調用後立即執行.我們稱之為計時時間.

　　setTimeout()

語法:

var t=setTimeout('JS語句',毫秒)

　　

　　setTimeout() 方法會返回某個值. 在上面的語句中,值被存儲在名為 t 的變數中. 假如你希望取消這個setTimeout(), 你可以使用這個變數名來指定他.

　  setTimeout() 的第一參數是含有JavaScript 語句的字元串.這個語句可能諸如 'alert('5 second!')',或者對函數的調用,諸如 'alertMsg()' .

　　第二個參數指示從當前起多少毫秒後執行第一個參數(1000 毫秒等於一秒).

 

　　clearTimeout()

　　語法:

clearTimeout(setTimeout_variable)
var timer = setTimeout(function() {alert(123);},1000)
//在指定時間後執行一次相應函數

clearTimeout(timer);
//取消setTimeout設置

 

　　setinterval()

　　setinterval() 方法可按照指定的周期(以毫秒計) 來調整用函數或計算表達式.

　　setlnterval()方法會不停地調用函數,直到 clearlnterval() 被調用或視窗被關閉.由setlnterval()返回

　　的ID值可用作 clearlnterval() 方法的參數.

　　語法:

　　

setInterval('js語句',時間間隔)

　　

var timer = setinterval(function({console.log(123);},1000)
//每隔一段時間就執行一次相應函數

clearInterval(timer);
//取消setInterval設置

 

　　例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>定時器</title>
  <script>
    var intervalId;

    function f() {
      var timeStr = (new Date()).toLocaleString();
      var inputEle = document.getElementById("i1");
      inputEle.value = timeStr;
    }

    function start() {
      f();
      if (intervalId === undefined) {
        intervalId = setInterval(f, 1000);
      }
    }
    function end() {
      clearInterval(intervalId);
      intervalId = undefined;
    }

  </script>
</head>
<body>

<input type="text" id="i1">
<input type="button" value="開始" id="start" onclick="start();">
<input type="button" value="結束" id="end" onclick="end();">
</body>
</html>

 

三 , DOM

DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。 

當網頁被載入時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構造為對象的樹。

　   JavaScript能夠對頁面中的所有事件作出反應

　　

　　查找標簽

document.getElementById  根據ID獲取一個標簽
document.getElementsByclassName  根據class屬性獲取
document.getElementsByTagName   根據標簽名獲取標簽集合

　註意:　　涉 及到DOM操作的js代碼應該放在文檔的哪個位置.

　　

　　間接查找

parentElement            父節點標簽元素
children                 所有子標簽
firstElementChild        第一個子標簽元素
lastElementChild         最後一個子標簽元素
nextElementSibling       下一個兄弟標簽元素
previousElementSibling   上一個兄弟標簽元素
找前後兄弟標簽元素

var d2e = document.getElementById('i2');
//先找到標簽
d2e.parentElement
//再找出該子標簽所在父標簽,即該標簽所在的的位置
d2e.nextElementSibling
//找下一個兄弟標簽
d2e.previousElementSibling
//找上一個兄弟標簽

 

　　結點操作

　　創建結點

　　語法　　createElement(標簽名)

　　示例:

　　

var divE =  document.creatElemnt('div');

 

　　添加節點

　　語法:

　　 追加一個結點(作為最後的子節點) 

　　somenode.appendChild(newnode);

　　把增加的結點放在某個節點的前面.

　　somenode.insertBefore(newnode,某個節點);

　　

var imgEle=document.createElement("img");　
　//首先需要先創建一個要添加的節點

imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");　
　//需要把父標簽賦值給一個變數

d1Ele.appendChild(imgEle); //最後把創建的節點添加到父節點


把增加的結點放在某個節點前時:
首先聲明一個要操作的父節點,即把父節點賦值給一個變數;
接著聲明這個父節點下的一個子節點;
創建一個要添加的子節點,(創建節點的順序可以不做明確要求)
最後把創建的結點添加在子節點的前面. (父節點.insertChild(新節點,子節點) ).

 

　　刪除節點　　

　　語法: 獲得要刪除的元素,通過父元素調用刪除.

　　removeChild(要刪除的結點)

　　

　　替換節點

　　語法 : somenode.replaceChild(newnode,某個節點);

 

　　替換節點

　　語法: somenode.replaceChild(newnode,某個節點);

　　

　　屬性節點

　　獲取文本節點的值:

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

 

　　設置文本節點的值:

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

 

　　attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")　　//修改屬性
divEle.getAttribute("age")　　//獲取屬性
divEle.removeAttribute("age")　　//刪除屬性

// 自帶的屬性還可以直接.屬性名來獲取和設置
imgEle.src　　(imgEle.setAttribute('src','地址')) //表示修改對象中的src屬性的地址.
imgEle.src="..."

 

　　　獲取值操作

　　語法: elementNote.value  (標簽名.value)

　　適用於以下標簽:

　　input　　select　　textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

 

　　class的操作

className  獲取所有樣式類名(字元串)

classList.remove(cls)  刪除指定類
classList.add(cls)  添加類
classList.contains(cls)  存在返回true，否則返回false
classList.toggle(cls)  存在就刪除，否則添加
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <title>class操作</title>
  <style>
    .d3 {
      background-color:green;
  </style>
</head>
<body>
<div id="d1" class="di d3">
  <p id="p1" class="p">我是老大</p>
</div>
</body>
</html>

　　瀏覽器上 console 操作代碼

 

 

　　指定css操作

　　直接修改css屬性

obj.style.backgroundColor='red'　　//註意:此處中橫線去除,C大寫
obj.style.borderRadius='3px'

　　

　　JS操作CSS屬性的規律:

　　對於沒有中橫線的css屬性一般直接使用style.屬性名即可.如:

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

　　對含有中橫線的css屬性,將中橫線後面的第一個字母換成大寫即可.如:

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

 

　　事件

　　HTML 4.0的新特性之一是有能力使HTML事件觸發瀏覽器中的動作(action),比如當用戶點擊某個HTML

　　元素時啟動一段JavaScript.下麵是一個屬性列表,這些屬性可插入HTML標簽來定義時間動作.

　　

　　常用事件

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素獲得焦點。               // 練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange       域的內容被改變。             應用場景：通常用於表單元素,當元素內容被改變時觸發.（select聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。
onload         一張頁面或一幅圖像完成載入。
onmousedown    滑鼠按鈕被按下。
onmousemove    滑鼠被移動。
onmouseout     滑鼠從某元素移開。
onmouseover    滑鼠移到某元素之上。

onselect      在文本框中的文本被選中時發生。
onsubmit      確認按鈕被點擊，使用的對象是form。

 

　　綁定方式:

　　方式一:

<div id="d1" onclick="changeColor(this);">點我</div> //需要在標簽中提前寫入函數名,當執行該標簽時可以觸發函數
<script>
  function changeColor(this) {
    this.style.backgroundColor="green";
  }
</script>

　　註意; this是實參,表示觸發事件的當前元素.  函數定義過程中的this為形參.

　　方式二:

<div id="d2">點我</div>
<script>
  var divEle2 = document.getElementById("d2");  //獲取要綁定事件的標簽
  divEle2.onclick=function () {　　//獲取的標簽變數.事件 = 要進行的操作(函數)
    this.innerText="呵呵";  //表示觸發事件的當前元素  所以不用在標簽中提前觸發.
  }
</script>

 

　　事件實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

</head>
<body>
    <input id="d1" type="text" value="請輸入關鍵字" onblur="blur()" onfocus="focus()">
    
<script>
function focus(){
    var inputEle=document.getElementById("d1");
    if (inputEle.value==="請輸入關鍵字"){
        inputEle.value="";
    }
}

function blur(){
    var inputEle=document.getElementById("d1");
    var val=inputEle.value;
    if(!val.trim()){
        inputEle.value="請輸入關鍵字";
    }
}
</script>
</body>

</html>

搜索框示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select聯動</title>
</head>
<body>
<select id="province">
  <option>請選擇省:</option>
</select>

<select id="city">
  <option>請選擇市:</option>
</select>

<script>
  data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區", "海澱區"], "山東": ["威海市", "煙臺市"]};

  var p = document.getElementById("province");
  var c = document.getElementById("city");

  for (var i in data) {
    var optionP = document.createElement("option");
    optionP.innerHTML = i;
    p.appendChild(optionP);
  }
  p.onchange = function () {
    var pro = (this.options[this.selectedIndex]).innerHTML;
    var citys = data[pro];
    // 清空option
    c.innerHTML = "";

    for (var i=0;i<citys.length;i++) {
      var option_city = document.createElement("option");
      option_city.innerHTML = citys[i];
      c.appendChild(option_city);
    }
  }
</script>
</body>
</html>

select聯動

 

　　補充: 

　　頁面標簽載入完後執行,  window.onload=function() {...}

　　頁面載入完後會觸發onload事件,

　　但是通常會把標簽綁定事件的JS代碼都放在body標簽的最後面


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • CSS未知寬高元素水平垂直居中
    方法一 ：table、cell-table 思路：顯示設置父元素為：table，子元素為：cell-table，這樣就可以使用vertical-align: center，實現水平居中優點：父元素（parent）可以動態的改變高度（table元素的特性）缺點：IE8以下不支持 <!DOCTYPE h ...
  • JS繼承方法
    1、原型鏈： 每個構造函數都有一個原型對象,且有一個指針指向該原型對象(prototype)，原型對象都包含一個指向構造函數的指針（constructor），而實例都包含一個指向原型對象的內部指針(proto)。若實例的原型是另一個構造函數的實例，該實例的原型有一個指向另一個原型的指針，層層遞進，構 ...
  • Ruby（或cmd中）輸入命令行編譯sass
    Ruby（或cmd中）輸入命令行編譯sass步驟如下： 舉例： 1、在F盤中新建一個總文件夾，比如test文件夾，其中在該文件夾下麵建立html、images、js、sass等文件夾。 2、在sass文件夾中創建要使用到的sass文件，或者scss文件。common.scss、reset.scss、 ...
  • sass的安裝
    sass的安裝 1、當ruby安裝完成後，在自己電腦開始菜單下麵找到ruby的控制台"cmd"; 2、然後直接在命令行中輸入 gem install sass 3.在安裝過程中 可能會遇到報錯： 解決方法： 更換rubygems路徑 在命令行內輸入以下命令： $ gem sources --remo ...
  • html的初瞭解（更新中···）
    html是萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言。 網頁的拓展名為html 網頁由三大部分構成，分別為title（主題），url（網址）和body（網站內容）。 它的基本結構是<標簽名> 它的基本結構骨架為 <html> <head> <meta charset="utf-8" ...
  • 如何在vue項目中使用md5加密
    npm安裝： npm install --save js-md5 1.在需要使用的項目文件中引入： import md5 from 'js-md5'; 使用： 2.或者在main.js文件中將md5轉換成vue原型： 使用： ...
  • axios常見傳參方式
    1:get請求 一般發送請求是這麼寫 但是為了方便全局統一調用封裝的axios 2.post/put/patch請求 (1) 傳參格式為 formData （全局請求頭:'Content-Type'= 'application/x-www-form-urlencoded'） （request的Hea ...
  • ios手機處理keyup事件時的相容性問題
    在安卓手機中沒有任何問題,但在ios手機中出現當輸入法中輸入內容時,事件keyup沒有效果 解決辦法： //keyup的相容性處理 var bind_name = 'input'; if (navigator.userAgent.indexOf("MSIE") != -1) { bind_name ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類