js基礎之DOM中元素物件的屬性方法詳解-js教程-PHP中文網

首頁

web前端

js教程

js基礎之DOM中元素物件的屬性方法詳解

高洛峰

Jan 21, 2017 am 09:26 AM

在 HTML DOM （文檔物件模型）中，每個部分都是節點。

節點是DOM結構中最基本的組成單元，每個HTML標籤都是DOM結構的節點。

文件是一個文檔節點。

所有的HTML元素都是元素節點

所有 HTML 屬性都是屬性節點

文字插入 HTML 元素是文字節點與註解節點

最基本的節點類型是Node類型，其他所有類型都繼承自Node，DOM操作往往是js中開銷最大的部分，因而NodeList導致的問題最多。要注意：NodeList是‘動態的'，也就是說，每次訪問NodeList對象，都會運行一次查詢，雖然這樣增加了開銷，但可以保證我們新添加的節點都能在NodeList中訪問的到。

所有的元素節點都有共用的屬性和方法，讓我們來詳細看看：

先來看較為常用的通用屬性

1 element.id 設定或返回元素的 id。

2 element.innerHTML 設定或傳回元素的內容，可包含節點中的子標籤以及內容

3 element.innerText 設定或傳回元素的內容，不包含節點中的子標籤以及內容

ement設定或傳回元素的類別名稱

5 element.nodeName 傳回該節點的大寫字母標籤名稱

6 element.nodeType 傳回該結點的節點類型，1表示元素節點… 2表示屬性節點… nodeValue 傳回該節點的value值，元素節點的值為null

8 element.childNodes 傳回元素的子節點的nodeslist對象，nodelist類似於數組，有length屬性，可以使用方括號[index] 存取指定索引的值(也可以使用item(index)方法)。但nodelist並不是數組。

9 element.firstChild/element.lastChild 傳回元素的第一個/最後一個子節點(包含註解節點與文字節點)

10 element.parentNode 傳回該結點的父節點與目前節點同級的上一個節點(包含註解節點和文字節點)

12 element.nextSibling 傳回與目前節點同級的下一個節點(包含註解節點與文字節點)

13 element.chileElementCount : 返回子元素: 返回子元素(不包括文字節點以及註解節點)的個數

14 element.firstElementChild /lastElementChild 傳回第一個/最後一個子元素(不包括文字節點以及註解節點)

15 element.previousElementSibling/nextElementSibling 後一個兄弟元素(不包括文本節點以及註釋節點)

16 element.clientHeight/clientWidth 返回內容的可視高度/寬度（不包括邊框，邊距或滾動條）

17 element.offsetHeight/offsetWidth /offsetLeoff /offset/Top 傳回元素的高度/寬度/相對於父元素的左偏移/右偏移(包括邊框和填充,不包括邊距)

18 element.style 設定或傳回元素的樣式屬性,。例：element.style.backgroundColor 注意，與CSS不同，style的屬性要去掉橫槓，第二個字首字母要大寫

19 element.tagName 返回元素的標籤名稱(大寫)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .form_style{
      color: #5b5b5b;
      font-size: large;
      border: 5px solid rebeccapurple;
      background-color: antiquewhite;
      width: 440px;
      height: 120px;
      position: relative;
      left: 20px;
      top:20px;
      margin:10px;
    }
    p {
      color: #5b5b5b;
      font-size: larger;
      text-indent: 40px;
    }
  </style>
 
</head>
 
 
<body>
  <form id=&#39;first_form&#39; name="cangjingge" >
    请选择功法：<br/>
    <input type="radio" name="gongfa" value="jysg">九阳神功<br/>
    <input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
    <input type="radio" name="gongfa" value="khbd">葵花宝典<br/>
    <input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
  </form>
  <p>少侠请三思！！！</p><!--注释标签-->
  <p>推荐功法-->葵花宝典</p>
 
  <script>
    //js演示代码请添加至此
    var a=document.getElementById(&#39;first_form&#39;),
      b = document.getElementsByTagName(&#39;p&#39;)[0];
 
    console.log(a.id);
    console.log(a.innerHTML);
    console.log(a.className);
    console.log(a.childNodes);
    console.log(a.firstChild);
    console.log(a.lastChild);
    console.log(a.nodeName);
    console.log(a.nodeType);
    console.log(a.nodeValue);
    console.log(a.parentNode);
    console.log(a.clientHeight);
    console.log(a.offsetHeight);
    console.log(b.nextSibling);
    console.log(b.nextElementSibling);
 
  </script>
 
</body>
 
 
</html>

登入後複製

瀏覽器顯示結果：

還有某些專屬屬性

專屬屬性指那些專屬於某種標籤的屬性。例如標籤，有href和target屬性。

有src屬性;

有entype以及action屬性…

js基礎之DOM中元素物件的屬性方法詳解 a_element.href 傳回目前節點指向的超連結

再來看看較為常用的通用方法：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .form_style{
      color: #5b5b5b;
      font-size: large;
    }
    p {
      color: #5b5b5b;
      font-size: larger;
    }
  </style>
 
</head>
 
 
<body>
  <form id=&#39;first_form&#39; name="cangjingge" >
    请选择功法：<br/>
    <input type="radio" name="gongfa" value="jysg">九阳神功<br/>
    <input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
    <input type="radio" name="gongfa" value="khbd">葵花宝典<br/>
    <input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
  </form>
  <p>少侠请三思！！！</p>
 
  <script>
    //js演示代码请添加至此
     
  </script>
 
</body>
 
 
</html>

登入後複製

(以下所有js示範程式碼都是以本文檔中的範例html程式為實驗對象)

1 element.appendChild(nodeName) 新增新的子節點，作為最後一個子節點，並傳回該子節點。如需在 HTML DOM 中新增元素，您首先必須建立該元素，然後將它追加到現有的元素上。

js示範程式碼：

var a=document.getElementById(&#39;first_form&#39;);  
var textnode=document.createTextNode("慎重选择"); 
a.appendChild(textnode)

登入後複製

2 element.getAttribute(para) 傳回元素節點的指定屬性值。

js示範程式碼：

var a=document.getElementById(&#39;first_form&#39;);
console.log(a.getAttribute(&#39;name&#39;))      //控制台输出name的值

登入後複製

3 element.getAttributeNode(para) 傳回指定的屬性節點。

js示範程式碼：

var a=document.getElementById(&#39;first_form&#39;);
console.log(a.getAttributeNode(&#39;name&#39;))      //控制台输出name属性节点

登入後複製

4 element.getElementsByTagName(para) 傳回擁有指定標籤名稱的所有子元素的集合。

js示範程式碼：

var a=document.getElementById(&#39;first_form&#39;);
console.log(a.getElementsByTagName(&#39;input&#39;))      //控制台输出

登入後複製

5 element.hasAttribute(para) 如果元素拥有指定属性，则返回true，否则返回 false。

js演示代码：

var a=document.getElementById(&#39;first_form&#39;);
console.log(a.hasAttribute(&#39;name&#39;))      //控制台输出

登入後複製

6 element.insertBefore(insertNode,appointedNode) 在指定的已有的子节点之前插入新节点。

js演示代码：

var a=document.getElementById(&#39;first_form&#39;);
    var inputList=document.getElementsByTagName(&#39;input&#39;);
    var newNode=document.createElement(&#39;input&#39;);
    var newNode2=document.createTextNode(&#39;天马流星拳&#39;);
    var br=document.createElement(&#39;br&#39;);
    newNode.type=&#39;radio&#39;;
    newNode.name=&#39;gongfa&#39;;
    newNode.value=&#39;tmlxq&#39;;
    a.insertBefore(newNode,inputList[2]);
    a.insertBefore(newNode2,inputList[3]);
    a.insertBefore(br,inputList[3]);

登入後複製

7 element.removeAttribute() 从元素中移除指定属性。

js示例代码：

var a=document.getElementById(&#39;first_form&#39;);
a.removeAttribute(&#39;name&#39;);
console.log(a.hasAttribute(&#39;name&#39;))

登入後複製

8 element.removeChild() 从元素中移除子节点。移除的节点虽然不在文档树中了，但其实还在内存中，可以随时被引用。

js示例代码：

var a=document.getElementById(&#39;first_form&#39;);
    a.removeChild(a.childNodes[3]);

登入後複製

9 element.replaceChild(newNode,replaceNode) 把指定节点替换为新节点。

10 element.setAttribute(attrName,attrValue) 把指定属性设置或更改为指定值。

js示例代码：

var a=document.getElementById(&#39;first_form&#39;);
    a.setAttribute(&#39;name&#39;,&#39;shaolinsi&#39;);
    console.log(a.name)

登入後複製

11 element.setAttributeNode() 修改指定属性节点

js示例代码：

var a=document.getElementById(&#39;first_form&#39;);
    var attr = document.createAttribute(&#39;id&#39;);
    attr.value=&#39;the_first&#39;;
    a.setAttributeNode(attr);
　　　　 console.log(a.id)

登入後複製

12 nodelist.item() 返回 NodeList 中位于指定下标的节点。

js示例代码：

var a=document.getElementsByTagName(&#39;input&#39;)
console.log(a.item(2))

登入後複製

以上就是小编为大家带来的js基礎之DOM中元素物件的屬性方法詳解全部内容了，希望大家多多支持PHP中文网~

更多js基礎之DOM中元素物件的屬性方法詳解相关文章请关注PHP中文网！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7825

Java教學

1648

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1239

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。