HTML DOM 屬性

2022-07-09 12:24 更新

HTML DOM 屬性


上一節(jié)我們學(xué)習(xí)了HTML DOM方法,現(xiàn)在我們一起來學(xué)習(xí)一下HTML DOM 屬性。

屬性是節(jié)點(diǎn)(HTML 元素)的值,您能夠獲取或設(shè)置。


編程接口

可通過 JavaScript (以及其他編程語言)對(duì) HTML DOM 進(jìn)行訪問。

所有 HTML 元素被定義為對(duì)象,而編程接口則是對(duì)象方法和對(duì)象屬性。

方法是您能夠執(zhí)行的動(dòng)作(比如添加或修改元素)。

屬性是您能夠獲取或設(shè)置的值(比如節(jié)點(diǎn)的名稱或內(nèi)容)。


innerHTML 屬性

獲取元素內(nèi)容的最簡(jiǎn)單方法是使用 innerHTML 屬性。

innerHTML 屬性對(duì)于獲取或替換 HTML 元素的內(nèi)容很有用。

實(shí)例

下面的代碼獲取 id="intro" 的 <p> 元素的 innerHTML:

實(shí)例

<html>
<body>

<p id="intro">Hello World!</p>

<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>

</body>
</html>

嘗試一下 ?

在上面的例子中,getElementById 是一個(gè)方法,而 innerHTML 是屬性。

lamp

innerHTML 屬性可用于獲取或改變?nèi)我?HTML 元素,包括 <html> 和 <body>。



nodeName 屬性規(guī)定節(jié)點(diǎn)的名稱。

  • nodeName 是只讀的
  • 元素節(jié)點(diǎn)的 nodeName 與標(biāo)簽名相同
  • 屬性節(jié)點(diǎn)的 nodeName 與屬性名相同
  • 文本節(jié)點(diǎn)的 nodeName 始終是 #text
  • 文檔節(jié)點(diǎn)的 nodeName 始終是 #document

注意事項(xiàng): nodeName 始終包含 HTML 元素的大寫字母標(biāo)簽名。


nodeValue 屬性

nodeValue 屬性規(guī)定節(jié)點(diǎn)的值。

  • 元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null
  • 文本節(jié)點(diǎn)的 nodeValue 是文本本身
  • 屬性節(jié)點(diǎn)的 nodeValue 是屬性值

獲取元素的值

下面的例子會(huì)取回 <p id="intro"> 標(biāo)簽的文本節(jié)點(diǎn)值:

實(shí)例

<html>
<body>

<p id="intro">Hello World!</p>

<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

</body>
</html>

嘗試一下 ?


nodeType 屬性

nodeType 屬性返回節(jié)點(diǎn)的類型,nodeType 是只讀的。

下表是比較重要的節(jié)點(diǎn)類型:

元素類型 NodeType
元素 1
屬性 2
文本 3
注釋 8
文檔 9


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)