成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

原生JS操作DOM

anRui / 2926人閱讀

摘要：能夠改變頁面中的所有元素能夠改變頁面中的所有屬性能夠改變頁面中的所有樣式能夠?qū)撁嬷械乃惺录龀龇磻?yīng)我們需要通過操作元素，查找這些元素有三種方法通過查找通過標(biāo)簽名查找通過類名查找允許改變元素的內(nèi)容。，如使有能力對事件做出反應(yīng)。

通過html dom可以訪問javascript html文檔的所有元素。
當(dāng)網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model）。

通過可編程的對象模型，JavaScript 獲得了足夠的能力來創(chuàng)建動態(tài)的 HTML。
JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠?qū)撁嬷械乃惺录龀龇磻?yīng)

我們需要通過javascript操作html元素，查找這些html元素有三種方法：
1.通過id查找：
var doc=document.getElementById("idName");
2.通過標(biāo)簽名查找：
var doc=document.getElementsByTagName("tagName");
3.通過類名查找：
var doc = document.getElementsByClassName("className");

html dom允許javascript改變html元素的內(nèi)容。
1.改變html輸出流
在javascript中，document.write()可用于直接向html輸出流直接寫內(nèi)容。
tip:絕不要使用在文檔加載之后使用 document.write()。這會覆蓋該文檔。
2.改變html內(nèi)容
修改html內(nèi)容的最簡單的方法是使用innerHTML屬性。如：
document.getElementById(idName).innerHTML="文本內(nèi)容"
3.改變html屬性
document.getElementById(id).attribute="new value"，如：
document.getElementById(idName).src = "location.png"

html dom允許javascript改變html元素樣式。
document.getElementById(id).style.property=new style，如：
document.getElementById(idName).style.color="red";

html dom使javascript有能力對html事件做出反應(yīng)。
你可以使用事件屬性，比如：

你也可以使用javascript來向html元素分配事件，比如：
document.getElementById("idName").onclick=function(){...};

添加和刪除節(jié)點（HTML 元素）。（重點溫習(xí)的內(nèi)容）
如需向html dom添加新元素，必須先添加元素節(jié)點，然后向該元素追加元素節(jié)點。
var para=document.createElement("p");
var node=document.createTextNode("這是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
上述操作有三個步驟：
1.創(chuàng)建新的

元素
2.創(chuàng)建文本節(jié)點
3.向已有的元素追加新元素
當(dāng)然上面也可以不創(chuàng)建新的元素，直接添加到已有的元素中，比如：
var eleNode = document.createTextNode("這是新段落");
document.getElementById("div1").appendChild(eleNode);
常用的dom對象方法：

在html dom（文檔對象模型）中，每個部分都是節(jié)點：
文檔本身是文檔節(jié)點
所有 HTML 元素是元素節(jié)點
所有 HTML 屬性是屬性節(jié)點
HTML 元素內(nèi)的文本是文本節(jié)點
注釋是注釋節(jié)點
在html dom中，element對象表示html元素，下面這些屬性和方法可用于所有HTML元素上。


文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81943.html

相關(guān)文章

  • 你不需要 jQuery，但你需要一個 DOM 庫

    摘要：對于復(fù)雜的業(yè)務(wù)需求仍然需要一些操作。使用方式很簡單，但是你需要創(chuàng)建一個獨立文件，重新掛載需要的方法到命名空間上，這在編寫插件時非常有用。正如前文所說，的操作在我看來依然是最好用的，所以，你不需要，但你需要一個庫。 showImg(https://segmentfault.com/img/bVbuPEH?w=750&h=375); 寫這篇文章的目的，一方面是介紹一下自己編寫的模塊化 DO...

    HitenDev 評論0 收藏0

  • 用WEB技術(shù)棧開發(fā)NATIVE應(yīng)用（二）：WEEX 前端SDK原理詳解

    摘要：依舊采取傳統(tǒng)的開發(fā)技術(shù)棧進行開發(fā)，同時在終端的運行體驗不輸。首先來看下前端開發(fā)框架目前與構(gòu)成了三大最流行的前端開發(fā)框架，具有組件化以及三大特性，還學(xué)習(xí)的，引入了狀態(tài)管理模塊。 摘要： WEEX依舊采取傳統(tǒng)的web開發(fā)技術(shù)棧進行開發(fā)，同時app在終端的運行體驗不輸native app。其同時解決了開發(fā)效率、發(fā)版速度以及用戶體驗三個核心問題。那么WEEX是如何實現(xiàn)的？目前WEEX已經(jīng)完全開...

    ls0609 評論0 收藏0

  • 原生js實現(xiàn)簡單的鏈?zhǔn)?em>操作

    摘要：對象存儲在中，如果想直接在對象上操作，可以正確總結(jié)一下，這里我們也只是用原生簡單的實現(xiàn)了下鏈?zhǔn)讲僮?，更?fù)雜的功能，比如對象緩存，異常處理等等，都需要后續(xù)再完善處理。 在jQuery中，一個jq對象能一直連續(xù)調(diào)用各種方法，因為jQuery把這些方法掛載他自定義的一個對象中，但是使用原生的js獲取的DOM對象，只能使用一次addEventLisenter方法添加事件，如果要接著添加事件，還...

    Vixb 評論0 收藏0

  • 原生js之DOM事件相關(guān)

    摘要：而由于級標(biāo)準(zhǔn)中并沒有定義事件相關(guān)的內(nèi)容，所以事件級別只包括級，級和級三種。此屬性返回當(dāng)前事件所綁定的對象。自定義事件可以綁定到任意元素上，此處選擇只是為了演示方便。 前端學(xué)習(xí)的東西有很多，現(xiàn)代前端開發(fā)，前端工程化的東西要懂，基礎(chǔ)的原生js也要懂，畢竟，框架都是有生命周期的，更替非常快，然而卻有這么一個框架，它是最輕量的前端框架，每個瀏覽器都內(nèi)置，它叫vanilla.js。好吧，其實va...

    learning 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<