JavaScript是如何操作節點的(包括增、刪、改、查)

不吃素的唐三藏 發布于 2018/12/29 11:51
查看︰673|回復︰3

之前面的介紹,我們知道XML文檔中,主要是元素節點、屬性節點和文本節點。

下面詳細介紹JavaScript是如何操作它們的。

元素節點︰

查找︰上一篇已介紹。主要是通過方法getElementsByTagName來查找定位。

例子︰

//輸出所有的titles

8c89685075889b7278e5fd42de8a11be002.png

添加︰主要是用createElement創建元素,然後用appendChild附加子節點的形式實現。

例子︰

8169eeaf00a9d1f3ec4b14db4a698510002.png

也就是說,要追加節點,必須先找到父節點。

另外,還可以通過克隆的方式添加節點。

cloneNode()?方法有一個參數(true?或?false)。該參數指示被復制的節點是否包括原節點的所有屬性和子節點。

例子︰

c36d599d7b1c035f9525588f4ae70f94002.png

刪除︰父節點調用removeChild實現。

例如︰

dfc27c43810ab5708cac5e20c0b70f50002.png

注意︰刪除某個節點,它下面的子節點也會被同時刪除。

?

修改︰不允許直接修改元素。若真要修改可以用replaceChild間接完成。

語法是: parentNode. replaceChild(newNode,oldNode)

?

另外,元素沒有nodeValue。若要修改元素內的文本,如修改<title>hello</title>里的hello,可參考下面的操作文本節點。

?

文本節點︰

查找︰查找文本節點不能直接用getElementsByTagName,而是先用它找到元素節點,然後再用childNodes[0]或firstChild來定位文本節點(因為它是以元素節點的第一個子節點的形式存在的),接著再用nodeValue即可得到文本內容。

例子︰

b515fcb9ee04867e70edee3e59bf7fd3002.png

添加︰類似于元素的添加方式,但文本的添加是通過createTextNode創建的(note:在XHTML也可以用innerHTML的方式添加)。

例子︰

9532bcf5703f6ea3f27401262384fd48002.png

刪除︰父節點調用removeChild實現。當然也可以用清空nodeValue的方式實現。

如textNode.nodeValue=’’。

?

修改︰textNode.nodeValue=’修改成你想要的文本內容’。

另外,文本節點的修改也可以用replaceData()替換文本節點中的數據。

replaceData()?方法有三個參數︰

offset -?在何處開始替換字符。Offset?值以?0?開始。?

length -?要替換多少字符。,

string -?要插入的字符串。

例子︰

37a5169c4792e1360a9c4b8725b3609a002.png

屬性節點︰

查找︰與元素節點不同,屬性節點擁有文本值。獲取屬性的值的方法,就是獲取它的文本值。可以通過使用?getAttribute()?方法或屬性節點的?nodeValue?屬性來完成這個任務。

例子︰

343ec10cb67964976350f6705268d7de002.png

添加︰用setAttribute或者setAttributeNode實現。

例子︰

1ec85e0876f3afd77d034ff103d15f2c002.png

刪除︰可用removeAttribute(name)或者removeAttributeNode(node)

例子︰

f11ced4f3d64573031d3c38b4aec30d5002.png

修改︰通過使用?setAttribute()?方法或屬性節點的?nodeValue?屬性來完成。

例子︰

b706bffa65acea99e21e437cfe98a223002.png

全部點贊
總計︰ --

共有3條評論

  • 瞅瞅你的臉瞎了我的眼 瞅瞅你的臉瞎了我的眼

    B_10.gif

    沙發 2018/12/29 17:48
  • 卸不掉的素裝 卸不掉的素裝

    B_09.gif

    板凳 2018/12/29 17:54
  • 永遠的拼笑 永遠的拼笑

    表示一點也看不懂 大神求帶

    地板 2018/12/29 19:23
招版主啦

版主

  • 楊_宇 楊_宇
  • 曹容銘 曹容銘

注冊有禮

完善以下信息,為你推薦奧門娛樂網址

  • 學生
  • 白領
  • 高管
  • 自由職業
  • 其他
  • 工作需要
  • 自我提升
  • 興趣愛好
  • 創業/轉型
  • 其他
  • 小白
  • 了解
  • 熟悉
  • 精通
  • 其他
  • 高中/中專
  • 專科
  • 本科
  • 碩士
  • 其他
  • 影視槍戰大片特效解析
  • PS視覺驚悚課堂
  • 45天7千平方大廈變形記
  • 原畫學習痛點技法全解析
  • 影視動畫奇幻課堂
  • AI高端商業設計全攻略
  • UG職場生存必備指南
  • 日賺千元之新媒體行業揭秘
出現異常