javascript如何讀取dom物件的屬性實作程式碼詳解
DOM物件對於js來說，是個很基礎的元素，我們寫js一般來說，都一定會對它進行操作。我們可以很方便地為它加上自訂的屬性，例如：
<p id="test" class="hello"></p>
var test = document.getElementById("test");
test.adang = "adang";
alert(test.adang);我們會發現，已經為這個id為test的DOM元素加入了一個叫做adang的屬性了，然後在js中，可以呼叫這個屬性。在寫js的時候常用到這種方法，可以很方便地對某個dom物件添加一些特殊的數據，感覺DOM物件就像一個很好用的容器，可以放一堆數據進去。
像id啊，title，src此類html中支援的屬性，可以在標籤中設置，然後js存取。那麼，如果是像上面例子中的adang這樣自訂的屬性呢？ DOM可以訪問嗎？做了一個實驗，如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<script type="text/javascript">
window.onload=function(){
var test = document.getElementById("test");
test.adang = "adang";
alert(test.adang);
}
</script>
<body>
<p id="test"></p>
</body>
</html>用js來擴展自訂屬性，結果很正常地輸出了我們想要的結果，IE和FF下都正常。
然後又寫了第二段程式碼，如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<script type="text/javascript">
window.onload=function(){
var test = document.getElementById("test");
alert(test.adang);
}
</script>
<body>
<p id="test" adang="adang"></p>
</body>
</html>這次把擴充功能的屬性寫到了html標籤上。 IE下正常輸出adang,FF下輸出的是undefined。
但是很奇怪的，如果使用DOM提供的方法getAttribute(""),無論是在IE下，還是FF下，都可以得到我們寫在標籤中的自訂屬性。
所以，為了相容，我們要使用getAttribute("")來取得自訂的標籤屬性的值。
以上是javascript如何讀取dom物件的屬性實作程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱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)
建議：優秀JS開源人臉偵測辨識項目
Apr 03, 2024 am 11:55 AM
人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計
PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法
Dec 18, 2023 pm 03:39 PM
隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
js和vue的關係
Mar 11, 2024 pm 05:21 PM
js和vue的關係：1、JS作為Web開發基石；2、Vue.js作為前端框架的崛起；3、JS與Vue的互補關係；4、JS與Vue的實踐應用。
如何在JavaScript中取得HTTP狀態碼的簡單方法
Jan 05, 2024 pm 01:37 PM
JavaScript中的HTTP狀態碼取得方法簡介：在進行前端開發中，我們常常需要處理與後端介面的交互，而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法，並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時，服務
爐石戰記絕望線縷屬性介紹
Mar 20, 2024 pm 10:36 PM
絕望線縷是暴雪娛樂旗下佳作《爐石戰記》中的一張稀有卡牌，在「威茲班的工坊」卡包中有機會獲得。可消耗100/400點奧術之塵合成普通/金色版本。爐石戰記絕望線縷屬性介紹答：在威茲班的工坊卡包中有幾率獲得，也可以透過奧術之塵合成。稀有度：稀有類型：法術職業：死亡騎士法力值：1效果：使所有隨從獲得亡語：對所有隨從造成1點傷害
CSS中bottom屬性語法
Feb 21, 2024 pm 03:30 PM
CSS中bottom屬性語法及程式碼範例在CSS中，bottom屬性用於指定一個元素與容器底部之間的距離。它可以控制一個元素相對於其父元素底部的位置。 bottom屬性的語法如下：element{bottom:value;}其中，element表示要套用該樣式的元素，value表示要設定的bottom值。 value可以是一個具體的長度值，例如像素
使用jQuery快速取代網頁標籤屬性的實用指南
Feb 23, 2024 am 09:54 AM
使用jQuery快速替換網頁標籤屬性的實用指南在網頁開發中，經常會遇到需要替換網頁標籤屬性的情況，例如將一個按鈕的文字內容從“點擊我”改為“提交”，或者將一個圖片的連結位址從“image.jpg”改為“new_image.jpg”等。而使用jQuery可以讓這些替換操作變得簡單又快速。本文將為您介紹如何使用jQuery快速取代網頁標籤屬性，提供具體的程式碼範例。
