国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<track id="0hphr"><b id="0hphr"></b></track>

<tbody id="0hphr"><var id="0hphr"></var></tbody>

<i id="0hphr"></i>

<del id="0hphr"></del>

JavaScript學(xué)習(xí)筆記05

2年前作者：Bald Monkey分類：Toy博客閱讀(19)違法舉報

這篇具有很好參考價值的文章主要介紹了JavaScript學(xué)習(xí)筆記05。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報違法"按鈕提交疑問。

JavaScript筆記05

操作 BOM 對象（重點(diǎn)）

什么是 BOM

BOM（Browser Object Model）是指瀏覽器對象模型，是用于描述這種對象與對象之間層次關(guān)系的模型。
瀏覽器對象模型（BOM）提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動的對象結(jié)構(gòu)。

瀏覽器

主流的瀏覽器分為 IE、Microsoft Edge、Chrome、Firefox、Safari、Opera 等幾大類
瀏覽器的種類很多，但是主流的內(nèi)核只有四種，各種不同的瀏覽器，就是在主流內(nèi)核的基礎(chǔ)上，添加不同的功能構(gòu)成。
- 1. Trident 內(nèi)核：代表產(chǎn)品為 Internet Explorer，又稱其為IE內(nèi)核。
- 1. Gecko 內(nèi)核：代表作品為 Mozilla Firefox。
- 1. WebKit 內(nèi)核：代表作品有Safari、Chrome。
- 1. Presto內(nèi)核：代表作品 Opera。

window

window對象代表瀏覽器窗口。
常用的實(shí)例方法/屬性：

window.alert(1) // 彈窗
window.innerHeight // 獲取瀏覽器窗口的內(nèi)容區(qū)域的高度
window.innerWidth // 獲取瀏覽器窗口的內(nèi)容區(qū)域的寬度
window.outerHeight // 獲取瀏覽器窗口外側(cè)的高度
window.outerWidth // 獲取瀏覽器窗口外側(cè)的寬度

測試：

JavaScript學(xué)習(xí)筆記05,JavaScript學(xué)習(xí)筆記合集,javascript,學(xué)習(xí),筆記

navigator（不建議使用）

navigator封裝了一些瀏覽器信息。
常用的屬性：

navigator.appName // 返回瀏覽器官方名稱。不能保證此屬性返回的值是正確的。
navigator.appVersion // 返回瀏覽器版本。不能保證此屬性返回的值是正確的。
navigator.userAgent // 返回當(dāng)前瀏覽器的用戶代理。
navigator.platform // 返回瀏覽器平臺名，不確定此值是否有效。

測試：

JavaScript學(xué)習(xí)筆記05,JavaScript學(xué)習(xí)筆記合集,javascript,學(xué)習(xí),筆記

大多數(shù)時候，我們不會使用navigator對象，因?yàn)闀蝗藶樾薷摹?/li>
不建議使用這些屬性來判斷和編寫代碼。

screen

screen代表當(dāng)前渲染窗口中和屏幕有關(guān)的屬性。
常用的屬性：

screen.width // 以像素為單位返回屏幕的寬度
screen.height // 以像素為單位返回屏幕的高度

測試：

JavaScript學(xué)習(xí)筆記05,JavaScript學(xué)習(xí)筆記合集,javascript,學(xué)習(xí),筆記

location

location代表當(dāng)前頁面的 URL 信息。
常用的屬性：

location.host // 域名字符串
location.href // URL字符串
location.protocol // URL對應(yīng)協(xié)議的字符串

測試：

JavaScript學(xué)習(xí)筆記05,JavaScript學(xué)習(xí)筆記合集,javascript,學(xué)習(xí),筆記

補(bǔ)充 - 常用的方法：

location.reload() // 重新加載來自當(dāng)前URL的資源(刷新網(wǎng)頁)
location.assign('URL') // 加載給定URL的內(nèi)容資源到這個location對象所關(guān)聯(lián)的對象上

document

document代表當(dāng)前載入的頁面，并作為網(wǎng)頁內(nèi)容的入口，也就是 DOM 樹。
常用的屬性：

document.title // 獲取或設(shè)置當(dāng)前文檔的標(biāo)題
document.cookie // 返回一個使用分號分隔的cookie列表，或設(shè)置(寫入)一個cookie

測試：

JavaScript學(xué)習(xí)筆記05,JavaScript學(xué)習(xí)筆記合集,javascript,學(xué)習(xí),筆記

JavaScript學(xué)習(xí)筆記05,JavaScript學(xué)習(xí)筆記合集,javascript,學(xué)習(xí),筆記

拓展 - 劫持 cookie 的原理：參考 - 說說劫持 Cookie 的原理 - 掘金 (juejin.cn)
- 服務(wù)器端可以通過設(shè)置cookie:httpOnly來保障 cookie 的安全（后面再詳細(xì)學(xué)習(xí)）
常用的方法：

// 獲取具體的DOM文檔樹節(jié)點(diǎn)
document.getElementById() // 返回具有給定id標(biāo)識元素的引用對象。
document.getElementsByClassName() // 返回具有給定類名的元素列表。
document.getElementsByTagName() // 返回具有給定標(biāo)簽名的元素列表。

測試：先準(zhǔn)備一個網(wǎng)頁，它包含一個自定義列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 自定義一個列表 -->
    <dl id="app">
        <dt>Java</dt>
        <dd>JavaSE</dd>
        <dd>JavaEE</dd>
    </dl>
</body>
</html>

在瀏覽器控制臺中輸入document.getElementById("app")來獲取指定的文檔樹節(jié)點(diǎn)：

JavaScript學(xué)習(xí)筆記05,JavaScript學(xué)習(xí)筆記合集,javascript,學(xué)習(xí),筆記

history（不建議使用）

history允許操作瀏覽器的曾經(jīng)在標(biāo)簽頁或者框架里訪問的會話歷史記錄。
常用的方法：

history.back() // 轉(zhuǎn)到瀏覽器會話歷史的上一頁，等同于點(diǎn)擊瀏覽器的回退按鈕
history.forward() // 轉(zhuǎn)到瀏覽器會話歷史的下一頁，等同于點(diǎn)擊瀏覽器的前進(jìn)按鈕

測試：

JavaScript學(xué)習(xí)筆記05,JavaScript學(xué)習(xí)筆記合集,javascript,學(xué)習(xí),筆記

操作 DOM 節(jié)點(diǎn)（重點(diǎn)）

什么是 DOM

DOM（Document Object Model）是指文檔對象模型，是用來呈現(xiàn)與任意 HTML 或 XML 文檔交互的 API。
DOM 是載入到瀏覽器中的文檔模型，以節(jié)點(diǎn)樹的形式來表現(xiàn)文檔，每個節(jié)點(diǎn)代表文檔的構(gòu)成部分（例如：頁面元素、字符串或注釋等等）。

核心

瀏覽器網(wǎng)頁就是一個 DOM 數(shù)型結(jié)構(gòu)。
- 更新：更新 DOM 節(jié)點(diǎn)
- 遍歷：得到 DOM 節(jié)點(diǎn)
- 刪除：刪除一個 DOM 節(jié)點(diǎn)
- 添加：添加一個新的 DOM 節(jié)點(diǎn)
要操作一個 DOM 節(jié)點(diǎn)，就必須先獲得這個 DOM 節(jié)點(diǎn)

JavaScript學(xué)習(xí)筆記05,JavaScript學(xué)習(xí)筆記合集,javascript,學(xué)習(xí),筆記

獲得 DOM 節(jié)點(diǎn)

屬性：

document.getElementById() // 返回具有給定id標(biāo)識元素的引用對象。
document.getElementsByClassName() // 返回具有給定類名的元素列表。
document.getElementsByTagName() // 返回具有給定標(biāo)簽名的元素列表。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="father">
    <h1>標(biāo)題一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    // 獲取 DOM 節(jié)點(diǎn)，對應(yīng) CSS 選擇器
    let h1 = document.getElementsByTagName("h1"); // 標(biāo)簽
    let p1 = document.getElementById("p1"); // id
    let p2 = document.getElementsByClassName("p2"); // class
    let father = document.getElementsByTagName("father");

    let children = father.children; // 獲取父節(jié)點(diǎn)下的所有子節(jié)點(diǎn)
    // father.firstChild
    // father.lastChild
</script>

</body>
</html>

測試：

JavaScript學(xué)習(xí)筆記05,JavaScript學(xué)習(xí)筆記合集,javascript,學(xué)習(xí),筆記

以上是使用原生代碼獲得 DOM 節(jié)點(diǎn)的方式，之后我們主要是使用jQuery();來獲得 DOM 節(jié)點(diǎn)；

更新 DOM 節(jié)點(diǎn)

屬性：

// 操作文本
element.innerText // 修改文本的值
element.innerHTML // 可以解析 HTML 標(biāo)簽

// 操作 CSS
// element.style - 設(shè)置 CSS 樣式
element.style.color // 字體顏色
element.style.fontSize // 字體大小(注意是駝峰命名)
element.style.padding // 內(nèi)邊距...

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="id1"></div>
<div id="id2"></div>
<div id="id3">abc</div>

<script>
    // 獲取 DOM 節(jié)點(diǎn)
    let id1 = document.getElementById("id1");
    let id2 = document.getElementById("id2");
    let id3 = document.getElementById("id3");

    // 操作文本
    // innerText - 修改文本的值
    id1.innerText = "hello";
    // innerHTML - 可以解析 HTML 標(biāo)簽
    id2.innerHTML = "<strong>world</strong>";

    // 操作 CSS
    // style - 設(shè)置 CSS 樣式
    id3.style.color = "red";
    id3.style.fontSize = "50px";
    id3.style.padding = "2em";
</script>

</body>
</html>

查看網(wǎng)頁效果：

JavaScript學(xué)習(xí)筆記05,JavaScript學(xué)習(xí)筆記合集,javascript,學(xué)習(xí),筆記

刪除 DOM 節(jié)點(diǎn)

刪除 DOM 節(jié)點(diǎn)的步驟：先獲取父節(jié)點(diǎn)，再通過父節(jié)點(diǎn)來刪除自身。
屬性/方法：

element.parentElement // 獲取當(dāng)前節(jié)點(diǎn)的父元素節(jié)點(diǎn)。如果該元素沒有父節(jié)點(diǎn)，或者父節(jié)點(diǎn)不是一個 DOM 元素，則返回 null。
element.removeChild(child) // 從 DOM 中刪除一個子節(jié)點(diǎn)。返回刪除的節(jié)點(diǎn)。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    <h1>標(biāo)題一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    // 獲取 DOM 節(jié)點(diǎn)
    let self = document.getElementById("p1");

    // 獲取父節(jié)點(diǎn)
    let father = self.parentElement;

    // 刪除 DOM 節(jié)點(diǎn)
    father.removeChild(self); // 方式一
    father.removeChild(father.children[0]); // 方式二
</script>

</body>
</html>

查看刪除元素后的網(wǎng)頁效果：

JavaScript學(xué)習(xí)筆記05,JavaScript學(xué)習(xí)筆記合集,javascript,學(xué)習(xí),筆記

需要注意的是：刪除節(jié)點(diǎn)是一個動態(tài)的過程，每進(jìn)行一次刪除操作，父元素的children都會發(fā)生變化，因此我們在使用father.children[index]刪除多個節(jié)點(diǎn)時一定要注意！

插入 DOM 節(jié)點(diǎn)

我們在獲得了某個 DOM 節(jié)點(diǎn)后，假設(shè)這個 DOM 節(jié)點(diǎn)是空的，我們通過使用innerHTML屬性就可以增加一個元素了。但是當(dāng)這個 DOM 節(jié)點(diǎn)已經(jīng)存在元素了時，我們就不能通過此方法添加元素了，因?yàn)檫@樣會產(chǎn)生覆蓋。

將已存在的標(biāo)簽追加到末尾，實(shí)現(xiàn)插入節(jié)點(diǎn)

方法：

element.appendChild(aChild) // 將一個節(jié)點(diǎn)追加到指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾處。如果將被插入的節(jié)點(diǎn)已經(jīng)存在于當(dāng)前文檔的文檔樹中，那么 appendChild() 只會將它從原先的位置移動到新的位置（不需要事先移除要移動的節(jié)點(diǎn)）。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    let js = document.getElementById("js");
    let list = document.getElementById("list");

    list.appendChild(js); // 追加到末尾
</script>

</body>
</html>

查看插入節(jié)點(diǎn)后的網(wǎng)頁效果：

JavaScript學(xué)習(xí)筆記05,JavaScript學(xué)習(xí)筆記合集,javascript,學(xué)習(xí),筆記

創(chuàng)建一個新的標(biāo)簽，實(shí)現(xiàn)插入節(jié)點(diǎn)

方法：

element.setAttribute(name, value) // 設(shè)置指定元素上的某個屬性值。如果屬性已經(jīng)存在，則更新該值；否則，使用指定的名稱和值添加一個新的屬性。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    let body = document.getElementsByTagName("body");
    let list = document.getElementById("list");

    // 創(chuàng)建一個新的節(jié)點(diǎn)，實(shí)現(xiàn)插入
    // 方式一
    let newP = document.createElement("p"); // 創(chuàng)建一個 p 標(biāo)簽
    newP.id = "newP"; // 設(shè)置 id
    newP.innerText = "hello,world"; // 添加文本
    list.appendChild(newP); // 追加到 list 的子節(jié)點(diǎn)的末尾
    // 方式二
    let myScript = document.createElement("script"); // 創(chuàng)建一個 script 標(biāo)簽
    myScript.setAttribute("type", "text/javascript"); // 設(shè)置 type 屬性為 text/javascript
    list.appendChild(myScript); // 追加到 list 的子節(jié)點(diǎn)的末尾

    // 應(yīng)用案例: 修改 body 的 CSS 樣式
    // 方式一
    let bd = document.getElementsByTagName("body")[0]; // 注意: getElementsByTagName()獲得的是一個列表，所以要加索引
    bd.style.backgroundColor = "skyblue"; // 設(shè)置 body 的背景顏色為天藍(lán)色
    // 方式二
    let myStyle = document.createElement("style");  // 創(chuàng)建一個空的 style 標(biāo)簽
    myStyle.setAttribute("type", "text/css"); // 設(shè)置 type 屬性
    myStyle.innerHTML = "body{color: red}"; // 設(shè)置 body 的字體顏色為紅色
    document.getElementsByTagName("head")[0].appendChild(myStyle); // 追加到 head 的子節(jié)點(diǎn)的末尾
</script>

</body>
</html>

查看插入節(jié)點(diǎn)后的網(wǎng)頁效果：

JavaScript學(xué)習(xí)筆記05,JavaScript學(xué)習(xí)筆記合集,javascript,學(xué)習(xí),筆記

補(bǔ)充：根據(jù)參考節(jié)點(diǎn)的位置插入新節(jié)點(diǎn)

方法：

parentNode.insertBefore(newNode, referenceNode) // 在參考節(jié)點(diǎn)之前插入一個擁有指定父節(jié)點(diǎn)的子節(jié)點(diǎn)。如果給定的子節(jié)點(diǎn)是對文檔中現(xiàn)有節(jié)點(diǎn)的引用，insertBefore() 會將其從當(dāng)前位置移動到新位置（在將節(jié)點(diǎn)附加到其他節(jié)點(diǎn)之前，不需要從其父節(jié)點(diǎn)刪除該節(jié)點(diǎn)）。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    let ee = document.getElementById("ee");
    let js = document.getElementById("js");
    let list = document.getElementById("list");

    list.insertBefore(js, ee); // 將新節(jié)點(diǎn) js 插入到參考節(jié)點(diǎn) ee 之前

</script>

</body>
</html>

查看插入節(jié)點(diǎn)后的網(wǎng)頁效果：

JavaScript學(xué)習(xí)筆記05,JavaScript學(xué)習(xí)筆記合集,javascript,學(xué)習(xí),筆記文章來源地址http://www.zghlxwxcb.cn/news/detail-731523.html

到了這里，關(guān)于JavaScript學(xué)習(xí)筆記05的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請點(diǎn)擊違法舉報進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

前端學(xué)習(xí)筆記：JavaScript基礎(chǔ)語法（ECMAScript）
此博客參考b站：【黑馬程序員前端JavaScript入門到精通全套視頻教程，javascript核心進(jìn)階ES6語法、API、js高級等基礎(chǔ)知識和實(shí)戰(zhàn)教程】https://www.bilibili.com/video/BV1Y84y1L7Nn?p=76vd_source=06e5549bf018e111f4275c259292d0da 這份筆記適用于已經(jīng)學(xué)過一門編程語言（最好是C語言）的同學(xué)，如果你沒有
2024年02月16日
瀏覽(67)
前端學(xué)習(xí)心得筆記之三（JavaScript篇）
JavaScript一種運(yùn)行在客戶端（瀏覽器）上的解釋性弱語言，是前端的重中之重，在計算機(jī)剛剛興起的那個時代，這個由十天倉促編成的語言發(fā)展到現(xiàn)在也是令人吹噓。文件引用在一個單獨(dú)的js文件中也可以編寫JavaScript代碼，然后在HTML文件使用script標(biāo)簽進(jìn)行引用以下為演示 m
2024年04月23日
瀏覽(26)
【JavaScript】面向后端快速學(xué)習(xí) 筆記
制作動態(tài)頁面腳本語言弱類型 TS 強(qiáng)類型 1.HTML內(nèi)部包裹但是只能單頁面使用引入外部JS文件 2.1 數(shù)據(jù)類型數(shù)值類型統(tǒng)一為 number , 不區(qū)分整數(shù)和浮點(diǎn)數(shù) 字符串類型為 string 和JAVA中的String相似,JS中不嚴(yán)格區(qū)分單雙引號 ,都可以用于表示字符串布爾類型為 boolean 和Java中的boolea
2024年01月21日
瀏覽(19)
JavaScript-Web學(xué)習(xí)筆記01
1、Web API Web API 是瀏覽器提供的一套操作瀏覽器功能和頁面元素的 API （BOM 和 DOM）。 2、總結(jié) API 是為我們提供的一個接口，幫助我們實(shí)現(xiàn)某種功能 Web API 主要是針對瀏覽器提供的接口，主要針對瀏覽器做交互效果。 Web API 一般都有輸入和輸出（函數(shù)的傳參和返回值），
2024年04月09日
瀏覽(22)
Web05--JavaScript基礎(chǔ)1
一門客戶端腳本語言，運(yùn)行在客戶端瀏覽器中的。每一個瀏覽器都有JavaScript的解析引擎，不需要編譯，直接就可以被瀏覽器解析執(zhí)行了起源：上世紀(jì)末1995年時，Netscape（網(wǎng)景）公司推出Navigator瀏覽器。發(fā)布后用的人不多，這咋整??？這家公司就想了一個好方案，不僅在瀏覽
2024年01月25日
瀏覽(11)
藍(lán)旭前端05：JavaScript進(jìn)階
數(shù)據(jù)類型基本數(shù)據(jù)類型：Number、String、Boolean、Null、Undefined等。引用數(shù)據(jù)類型：Object、Array、Function等。 typeof操作符：返回數(shù)據(jù)類型的字符串形式。變量變量聲明：var、let、const。區(qū)別：var沒有塊級作用域，let和const有塊級作用域，const聲明的變量不能修改。什么是塊級作用
2024年04月26日
瀏覽(26)
前端JavaScript入門-day05
(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動力，如果看完對你有幫助，請留下您的足跡）對象（object）：JavaScript里的一種數(shù)據(jù)類型可以理解為是一種無序的數(shù)據(jù)集合，注意數(shù)組是有序的數(shù)據(jù)集合用來描述某個事物，例如描述一個人人有姓名、年齡、性別等信息
2024年02月11日
瀏覽(24)
JavaScript最新面試題合集（2023年）
閉包：就是能夠讀取外層函數(shù)內(nèi)部變量的函數(shù)。閉包需要滿足三個條件：訪問所在作用域；函數(shù)嵌套；在所在作用域外被調(diào)用。優(yōu)點(diǎn)：可以重復(fù)使用變量，并且不會造成變量污染。缺點(diǎn)：會引起內(nèi)存泄漏使用閉包的注意點(diǎn)：由于閉包會使得函數(shù)中的變量都被保存在內(nèi)
2024年02月07日
瀏覽(24)
【學(xué)習(xí)筆記46】JavaScript購物車的實(shí)現(xiàn)
1、將通過數(shù)據(jù)重構(gòu)頁面查詢數(shù)據(jù), 渲染頁面 2、全選選中全選按鈕后, 根據(jù)全選按鈕的選中狀態(tài), 修改所有商品的選中狀態(tài) 重新渲染視圖 3、清空購物車清空商品數(shù)據(jù) 重新渲染視圖 4、結(jié)算找到所有選中的商品計算所有選中商品各自的總價計算所有選中商品的總價之和 5、
2024年02月08日
瀏覽(22)
JavaScript學(xué)習(xí)筆記01（包含ES6語法）
Js 最初被創(chuàng)建的目的是“使網(wǎng)頁更生動”。 Js 寫出來的程序被稱為腳本，Js 是一門腳本語言。被直接寫在網(wǎng)頁的 HTML 中，在頁面加載的時候自動執(zhí)行腳本被以純文本的形式提供和執(zhí)行，不需要特殊的準(zhǔn)備或編譯即可運(yùn)行（JIN compiler） Js 不僅可以在瀏覽器中執(zhí)行，也可以在
2024年02月16日
瀏覽(31)

<tfoot id="v2yar"></tfoot>

<track id="v2yar"><b id="v2yar"></b></track>

<tfoot id="v2yar"><s id="v2yar"><small id="v2yar"></small></s></tfoot>

<track id="v2yar"><b id="v2yar"></b></track>