1. 程式人生 > >HTML DOM屬性

HTML DOM屬性

此文章轉載至極客學院

DOM屬性

屬性是節點(HTML 元素)的值,您能夠獲取或設定。

1.程式設計介面

  • 可通過 JavaScript (以及其他程式語言)對 HTML DOM 進行訪問。
  • 所有 HTML 元素被定義為物件,而程式設計介面則是物件方法和物件屬性。
  • 方法是您能夠執行的動作(比如新增或修改元素)。
  • 屬性是您能夠獲取或設定的值(比如節點的名稱或內容)。

2.innerHTML 屬性

  • 獲取元素內容的最簡單方法是使用 innerHTML 屬性。
  • innerHTML 屬性對於獲取或替換 HTML 元素的內容很有用。

例項:

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

<html>
<body>
<p id="intro">你好,極客學院!</p>
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
</body>
</html>

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

innerHTML 屬性可用於獲取或改變任意 HTML 元素,包括 <html> 和 <body>。

3.nodeName 屬性

nodeName 屬性規定節點的名稱。

  • nodeName 是隻讀的
  • 元素節點的 nodeName 與標籤名相同
  • 屬性節點的 nodeName 與屬性名相同
  • 文字節點的 nodeName 始終是 #text
  • 文件節點的 nodeName 始終是 #document

註釋:nodeName 始終包含 HTML 元素的大寫字母標籤名。

4.nodeValue 屬性

nodeValue 屬性規定節點的值。

  • 元素節點的 nodeValue 是 undefined 或 null
  • 文字節點的 nodeValue 是文字本身
  • 屬性節點的 nodeValue 是屬性值

5.獲取元素的值

下面的例子會取回 <p id="intro"> 標籤的文字節點值:

例項:

<html>
<body>
<p id="intro">你好,極客學院!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>

6.nodeType 屬性

nodeType 屬性返回節點的型別。nodeType 是隻讀的。

比較重要的節點型別有: