【2020Python修煉記】前端開發之 JavaScript 的 BOM 和 DOM 操作

来源:https://www.cnblogs.com/bigorangecc/archive/2020/05/18/12909053.html
-Advertisement-
Play Games

【目錄】 一、BOM操作 1、window 對象 2、window 子對象 3、history 對象 4、location 對象(掌握) 5、彈出框 6、計時器相關 二、DOM操作 1、DOM相關概念 2、查找標簽 3、節點操作 4、獲取值操作 5、class、css操作 （以下是使用mac筆記本中 ...


【目錄】

一、BOM操作

1、window 對象

2、window 子對象

3、history 對象

4、location 對象(掌握)

5、彈出框

6、計時器相關

二、DOM操作

1、DOM相關概念

2、查找標簽

3、節點操作

4、獲取值操作

5、class、css操作 

 

（以下是使用mac筆記本中的瀏覽器（檢查元素的 console 界面）進行的操作）

一、BOM操作

 瀏覽器對象模型 Browser Object Model

js代碼操作 瀏覽器

1、window對象

# window對象
window對象指代的就是瀏覽器視窗

window.innerHeight  瀏覽器視窗的高度
900
window.innerWidth   瀏覽器視窗的寬度
1680

# 新建視窗打開頁面 第二個參數寫空即可 第三個參數寫新建的視窗的大小和位置
window.open(url,target,features)
eg:window.open('https://www.baidu.com/','','height=400px,width=400px,top=400px,left=400px')

# 擴展父子頁面通信 window.opener()  瞭解

window.close()  關閉當前頁面

2、window子對象

window.navigator.appName
"Netscape"


window.navigator.appVersion
"5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"

window.navigator.userAgent      # 用來表示當前是否是一個瀏覽器
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"

 

"""

擴展:防爬措施
1.最簡單最常用的一個就是 校驗當前請求的發起者是否是一個瀏覽器

（有以下配置信息，說明是瀏覽器）
userAgent
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36

2、如何破解該措施
在你的代碼中加上上面的user-agent配置即可
"""

window.navigator.platform
"MacIntel"

# 如果是window的子對象 那麼window可以省略不寫

3、history對象

window.history.back()  回退到上一頁
window.history.forward()  前進到下一頁

# 對應的就是你使用的瀏覽器左上方的兩個的箭頭

4、location對象(掌握)

window.location.href   # 獲取當前頁面的url
window.location.href = url   # 跳轉到指定的url
window.location.reload()   # 屬性頁面 瀏覽器左上方的小圓圈

5、彈出框

警告框

alert('請謹慎訪問此網站')

 

確認框

confirm('你確定加入游戲嗎?')

false

confirm('你確定進入下一輪游戲嗎？')

true

 

提示框

prompt('歡迎光臨','請先登入')

"歡迎加入"  

 

6、計時器相關

 1、過一段時間之後觸發(一次)

setTimeout(func1,3000)

clearTimeout(t)

2、每隔一段時間觸發一次(迴圈)

setInterval(func2,3000)

clearInterval(t)

<script>

 // 1、過一段時間之後觸發(一次)
    function func1() {
        alert(123)
    }
    let t = setTimeout(func1,3000);  
    // 毫秒為單位 3秒之後自動執行func1函數

    clearTimeout(t)      // 取消定時任務  如果你想要清除定時任務 需要日前用變數指代定時任務



//2、每隔一段時間觸發一次(迴圈)
    function func2() {
        alert(123)
    }
    function show(){
        let t = setInterval(func2,3000);  // 每隔3秒執行一次
        function inner(){
            clearInterval(t)  // 清除定時器
        }
        setTimeout(inner,9000)  // 9秒中之後觸發
    }
    show()
</script>

 

二、DOM操作

 文檔對象模型 Document Object Model

js代碼操作 標簽

1、DOM相關概念

# DOM樹的概念

所有的標簽都可以稱之為是節點

# JavaScript 可以通過DOM創建動態的 HTML：

JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應

# DOM操作

操作的是標簽 而一個html頁面上的標簽有很多 

1.先學如何查找標簽
2.再學DOM操作標簽

# DOM操作需要用關鍵字 document 起首

2、查找標簽

（1）直接查找

"""
id查找
類查找
標簽查找
"""
# 註意三個方法的返回值是不一樣的
document.getElementById('d1')
<div id=​"d1">​…​</div>​

document.getElementsByClassName('c1')    # 註意 類查找和標簽查找  getElementsBy… —— Element 寫的是複數 Elements 
HTMLCollection [p.c1]0: p.c1length: 1__proto__: HTMLCollection 

document.getElementsByTagName('div') 
HTMLCollection(3) [div#d1, div, div, d1: div#d1]  let divEle = document.getElementsByTagName('div')[1] divEle <div>​ div>div​ </div>​

"""
當你用變數名指代標簽對象的時候 一般情況下都推薦你書寫成
xxxEle
divEle
aEle
pEle
"""

 

（2）間接查找

let pEle = document.getElementsByClassName('c1')[0]  # 註意是否需要索引取值

pEle.parentElement  # 拿父節點
<div id=​"d1">​"div
    "<div>​div>div​</div>​<p class=​"c1">​…​</p>​<p>​div>p​</p>​</div>​

pEle.parentElement.parentElement
<body>​…​</body>​

pEle.parentElement.parentElement.parentElement
<html lang=​"en">​<head>​…​</head>​<body>​…​</body>​</html>​

pEle.parentElement.parentElement.parentElement.parentElement
null

let divEle = document.getElementById('d1')
divEle.children  # 獲取所有的子標簽
divEle.children[0]
<div>​div>div​</div>​

divEle.firstElementChild
<div>​div>div​</div>​

divEle.lastElementChild
<p>​div>p​</p>​

divEle.nextElementSibling  # 同級別下麵第一個
<div>​div下麵div​</div>​

divEle.previousElementSibling  # 同級別上面第一個
<div>​div上面的div​</div>​

 

3、節點操作

（1） 

document.createElement('img')  # 創建標簽
"""
通過DOM操作動態的創建img標簽
並且給標簽加屬性
最後將標簽添加到文本中
"""
let imgEle = document.createElement('img')  # 創建標簽

imgEle.src = '111.png'  # 給標簽設置預設的屬性
"111.png"
imgEle

imgEle.username = 'jason'  # 自定義的屬性沒辦法點的方式直接設置
"jason"
imgEle
<img src=​"111.png">​


imgEle.setAttribute('username','jason')   # 既可以設置自定義的屬性也可以設置預設的書寫
undefined
imgEle
<img src=​"111.png" username=​"jason">​
imgEle.setAttribute('title','一張圖片')
imgEle
<img src=​"111.png" username=​"jason" title=​"一張圖片">​

let divEle = document.getElementById('d1')
undefined
divEle.appendChild(imgEle)  # 標簽內部添加元素(尾部追加)
<img src=​"111.png" username=​"jason" title=​"一張圖片">​

(2)

"""
創建a標簽
設置屬性
設置文本
添加到標簽內部
    添加到指定的標簽的上面
"""
let aEle = document.createElement('a')

aEle
<a>​</a>​
aEle.href = 'https://www.mzitu.com/'
"https://www.mzitu.com/"
aEle
<a href=​"https:​/​/​www.mzitu.com/​">​</a>​

aEle.innerText = '點我有你好看!'  # 給標簽設置文本內容
"點我有你好看!"
aEle
<a href=​"https:​/​/​www.mzitu.com/​">​點我有你好看!​</a>​
let divEle = document.getElementById('d1')
undefined
let pEle = document.getElementById('d2')
undefined
divEle.insertBefore(aEle,pEle)  # 添加標簽內容指定位置添加
<a href=​"https:​/​/​www.mzitu.com/​">​點我有你好看!​</a>​

(3)

"""
額外補充
    appendChild()
        removeChild()
        replaceChild()
    
    
    setAttribute()  設置屬性
        getAttribute()  獲取屬性
        removeAttribute()  移除屬性
"""

# innerText與innerHTML
divEle.innerText  # 獲取標簽內部所有的文本
"div 點我有你好看!
div>p
div>span"

divEle.innerHTML  # 內部文本和標簽都拿到
"div
        <a href="https://www.mzitu.com/">點我有你好看!</a><p id="d2">div&gt;p</p>
        <span>div&gt;span</span>
    "
    
divEle.innerText = 'heiheihei'
"heiheihei"
divEle.innerHTML = 'hahahaha'
"hahahaha"

divEle.innerText = '<h1>heiheihei</h1>'  # 不識別html標簽
"<h1>heiheihei</h1>"
divEle.innerHTML = '<h1>hahahaha</h1>'  # 識別html標簽
"<h1>hahahaha</h1>"

 

4、獲取值操作

# 獲取用戶數據標簽內部的數據
let seEle = document.getElementById('d2')
seEle.value
"111"
seEle.value
"333"

let inputEle = document.getElementById('d1')
inputEle.value
# 如何獲取用戶上傳的文件數據
let fileEle = document.getElementById('d3')
fileEle.value  # 無法獲取到文件數據
"C:\fakepath\02_測試路由.png"

fileEle.files
FileList {0: File, length: 1}0: File {name: "02_測試路由.png", lastModified: 1557043082000, 
lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中國標準時間),
 webkitRelativePath: "", size: 29580, …}length: 1__proto__: FileList
      
fileEle.files[0]  # 獲取文件數據
File {name: "02_測試路由.png", lastModified: 1557043082000, 
lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中國標準時間), webkitRelativePath: "", size: 29580, …}

 

5、class、css操作  

let divEle = document.getElementById('d1')
undefined
divEle.classList  # 獲取標簽所有的類屬性
DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]


divEle.classList.remove('bg_red')  # 移除某個類屬性
undefined

divEle.classList.add('bg_red')  # 添加類屬性
undefined
divEle.classList.contains('c1')  # 驗證是否包含某個類屬性
true
divEle.classList.contains('c2')
false

divEle.classList.toggle('bg_red')  # 有則刪除無則添加
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false
divEle.classList.toggle('bg_red')
true



# DOM操作操作標簽樣式 統一先用style起首
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
"red"
pEle.style.fontSize = '28px'
"28px"
pEle.style.backgroundColor = 'yellow'
"yellow"
pEle.style.border = '3px solid red'
"3px solid red"

 

 

參考閱讀：

https://www.cnblogs.com/xiaoyuanqujing/articles/11670078.html

 


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

-Advertisement-
Play Games
更多相關文章
一周排行
    -Advertisement-
    Play Games
  • UOS 開啟 VisualStudio 遠程調試 .NET 應用之旅
    前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據，比如SQL伺服器的連接串或者是OAuth2的Secret等，這些敏感數據在代碼中是不太安全的，我們不應該在源代碼中存儲密碼和其他的敏感數據，一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • C# - 能否讓 SortedSet.RemoveWhere 內傳入的委托非同步執行
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式
    順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型，用戶可以根據需要進行修改 ...
  • mORMot2 獲取數據集1
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • 萬字長文總結與剖析C語言關鍵字 -- <<C語言深度解剖>>
    C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 【Flink入門修煉】2-3 Flink Checkpoint 原理機制
    如果讓你來做一個有狀態流式應用的故障恢復，你會如何來做呢？ 單機和多機會遇到什麼不同的問題？ Flink Checkpoint 是做什麼用的？原理是什麼？ ...
  • C++ 多級繼承與多重繼承：代碼組織與靈活性的平衡
    C++ 多級繼承 多級繼承是一種面向對象編程（OOP）特性，允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護，並促進代碼重用。 多級繼承的語法 在 C++ 中，使用 : 符號來指定繼承關係。多級繼承的語法如下： class DerivedClass : public BaseClass1 ...
  • 圖文結合手把手教你創建SpringCloud項目
    前言 什麼是SpringCloud？ Spring Cloud 是一系列框架的有序集合，它利用 Spring Boot 的開發便利性簡化了分散式系統的開發，比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子，而是將市面上開發得比較好的模塊集成進去，進行封裝，從 ...
  • 類模板的常見用法
    class_template 類模板和函數模板的定義和使用類似，我們已經進行了介紹。有時，有兩個或多個類，其功能是相同的，僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • system-v IPC共用記憶體通信
    目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制)，V是羅馬數字5，是UNI ...
所有分類