国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js溫故而知新9(操作DOM)——學(xué)習(xí)廖雪峰的js教程

Alfred / 1984人閱讀

摘要:根節(jié)點(diǎn)已經(jīng)自動(dòng)綁定為全局變量。如果寫入的字符串是通過網(wǎng)絡(luò)拿到了,要注意對(duì)字符編碼來避免攻擊。修改也是經(jīng)常需要的操作。當(dāng)你遍歷一個(gè)父節(jié)點(diǎn)的子節(jié)點(diǎn)并進(jìn)行刪除操作時(shí),要注意,屬性是一個(gè)只讀屬性,并且它在子節(jié)點(diǎn)變化時(shí)會(huì)實(shí)時(shí)更新。

1.操作DOM

操作一個(gè)DOM節(jié)點(diǎn)實(shí)際上就是這么幾個(gè)操作:更新、遍歷、添加、刪除。

由于ID在HTML文檔中是唯一的,所以document.getElementById()可以直接定位唯一的一個(gè)DOM節(jié)點(diǎn)。document.getElementsByTagName()和document.getElementsByClassName()總是返回一組DOM節(jié)點(diǎn)。要精確地選擇DOM,可以先定位父節(jié)點(diǎn),再?gòu)母腹?jié)點(diǎn)開始選擇,以縮小范圍。

// 返回ID為"test"的節(jié)點(diǎn):
var test = document.getElementById("test");

// 先定位ID為"test-table"的節(jié)點(diǎn),再返回其內(nèi)部所有tr節(jié)點(diǎn):
var trs = document.getElementById("test-table").getElementsByTagName("tr");

// 先定位ID為"test-div"的節(jié)點(diǎn),再返回其內(nèi)部所有class包含red的節(jié)點(diǎn):
var reds = document.getElementById("test-div").getElementsByClassName("red");

// 獲取節(jié)點(diǎn)test下的所有直屬子節(jié)點(diǎn):
var cs = test.children;

// 獲取節(jié)點(diǎn)test下第一個(gè)、最后一個(gè)子節(jié)點(diǎn):
var first = test.firstElementChild;
var last = test.lastElementChild;

第二種方法是使用querySelector()和querySelectorAll(),需要了解selector語(yǔ)法,然后使用條件來獲取節(jié)點(diǎn),更加方便:

// 通過querySelector獲取ID為q1的節(jié)點(diǎn):
var q1 = document.querySelector("#q1");

// 通過querySelectorAll獲取q1節(jié)點(diǎn)內(nèi)的符合條件的所有節(jié)點(diǎn):
var ps = q1.querySelectorAll("div.highlighted > p");  

注意:低版本的IE<8不支持querySelector和querySelectorAll。IE8僅有限支持。

嚴(yán)格地講,我們這里的DOM節(jié)點(diǎn)是指Element,但是DOM節(jié)點(diǎn)實(shí)際上是Node,在HTML中,Node包括Element、Comment、CDATA_SECTION等很多種,以及根節(jié)點(diǎn)Document類型,但是,絕大多數(shù)時(shí)候我們只關(guān)心Element,也就是實(shí)際控制頁(yè)面結(jié)構(gòu)的Node,其他類型的Node忽略即可。根節(jié)點(diǎn)Document已經(jīng)自動(dòng)綁定為全局變量document。

## 2.更新DOM ##
可以直接修改節(jié)點(diǎn)的文本,方法有兩種:

一種是修改innerHTML屬性,這個(gè)方式非常強(qiáng)大,不但可以修改一個(gè)DOM節(jié)點(diǎn)的文本內(nèi)容,還可以直接通過HTML片段修改DOM節(jié)點(diǎn)內(nèi)部的子樹:

// 獲取

...

var p = document.getElementById("p-id"); // 設(shè)置文本為abc: p.innerHTML = "ABC"; //

ABC

// 設(shè)置HTML: p.innerHTML = "ABC RED XYZ"; //

...

的內(nèi)部結(jié)構(gòu)已修改

用innerHTML時(shí)要注意,是否需要寫入HTML。如果寫入的字符串是通過網(wǎng)絡(luò)拿到了,要注意對(duì)字符編碼來避免XSS攻擊。

第二種是修改innerText或textContent屬性,這樣可以自動(dòng)對(duì)字符串進(jìn)行HTML編碼,保證無(wú)法設(shè)置任何HTML標(biāo)簽:

// 獲取

...

var p = document.getElementById("p-id"); // 設(shè)置文本: p.innerText = ""; // HTML被自動(dòng)編碼,無(wú)法設(shè)置一個(gè)

兩者的區(qū)別在于讀取屬性時(shí),innerText不返回隱藏元素的文本,而textContent返回所有文本。另外注意IE<9不支持textContent。

修改CSS也是經(jīng)常需要的操作。DOM節(jié)點(diǎn)的style屬性對(duì)應(yīng)所有的CSS,可以直接獲取或設(shè)置。因?yàn)镃SS允許font-size這樣的名稱,但它并非JavaScript有效的屬性名,所以需要在JavaScript中改寫為駝峰式命名fontSize:

// 獲取

...

var p = document.getElementById("p-id"); // 設(shè)置CSS: p.style.color = "#ff0000"; p.style.fontSize = "20px"; p.style.paddingTop = "2em";
3.插入DOM

當(dāng)我們獲得了某個(gè)DOM節(jié)點(diǎn),想在這個(gè)DOM節(jié)點(diǎn)內(nèi)插入新的DOM,應(yīng)該如何做?

如果這個(gè)DOM節(jié)點(diǎn)是空的,例如,

,那么,直接使用innerHTML = "child"就可以修改DOM節(jié)點(diǎn)的內(nèi)容,相當(dāng)于“插入”了新的DOM節(jié)點(diǎn)。

如果這個(gè)DOM節(jié)點(diǎn)不是空的,那就不能這么做,因?yàn)閕nnerHTML會(huì)直接替換掉原來的所有子節(jié)點(diǎn)。

有兩個(gè)辦法可以插入新的節(jié)點(diǎn)。一個(gè)是使用appendChild,把一個(gè)子節(jié)點(diǎn)添加到父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)。例如:


JavaScript

Java

Python

Scheme

JavaScript

添加到
的最后一項(xiàng):

var
    js = document.getElementById("js"),
    list = document.getElementById("list");
    list.appendChild(js);

現(xiàn)在,HTML結(jié)構(gòu)變成了這樣:


Java

Python

Scheme

JavaScript

因?yàn)槲覀儾迦氲膉s節(jié)點(diǎn)已經(jīng)存在于當(dāng)前的文檔樹,因此這個(gè)節(jié)點(diǎn)首先會(huì)從原先的位置刪除,再插入到新的位置。

更多的時(shí)候我們會(huì)從零創(chuàng)建一個(gè)新的節(jié)點(diǎn),然后插入到指定位置:

var
    list = document.getElementById("list"),
    haskell = document.createElement("p");
    haskell.id = "haskell";
    haskell.innerText = "Haskell";
    list.appendChild(haskell);

這樣我們就動(dòng)態(tài)添加了一個(gè)新的節(jié)點(diǎn):


Java

Python

Scheme

Haskell

動(dòng)態(tài)創(chuàng)建一個(gè)節(jié)點(diǎn)然后添加到DOM樹中,可以實(shí)現(xiàn)很多功能。舉個(gè)例子,下面的代碼動(dòng)態(tài)創(chuàng)建了一個(gè)

      <