JS實現(xiàn)訪問DOM對象指定節(jié)點的方法示例
本文實例講述了JS實現(xiàn)訪問DOM對象指定節(jié)點的方法。分享給大家供大家參考,具體如下:
一 介紹
使用getElementById()方法來訪問指定id的節(jié)點,并用nodeName屬性、nodeType屬性和nodeValue屬性來顯示出該節(jié)點名稱、節(jié)點類型和節(jié)點值。
1、nodeName屬性
該屬性用來獲取某一個節(jié)點的名稱。
[sName=]obj.nodeName
sName:字符串變量用來存儲節(jié)點的名稱。
2、nodeType屬性
該屬性用來獲取某一個節(jié)點的類型。
[sType=]obj.nodeType
sType:字符串變量,用來存儲節(jié)點的類型,該類型值為數(shù)值型。該參數(shù)的類型如下表所示。
| 類 型 | 數(shù) 值 | 節(jié) 點 名 | 說 明 |
| 元素(element) | 1 | 標記 | 任何HTML或XML的標記 |
| 屬性(attribute) | 2 | 屬性 | 標記中的屬性 |
| 文本(text) | 3 | #text | 包含標記中的文本 |
| 注釋(comment) | 8 | #comment | HTML的注釋 |
| 文檔(document) | 9 | #document | 文檔對象 |
| 文檔類型(documentType) | 10 | DOCTYPE | DTD規(guī)范 |
3、nodeValue屬性
該屬性將返回節(jié)點的值。
[txt=]obj.nodeValue
txt:字符串變量用來存儲節(jié)點的值,除文本節(jié)點類型外,其他類型的節(jié)點值都為“null”。
二 應用
訪問指定節(jié)點,本示例在頁面彈出的提示框中,顯示了指定節(jié)點的名稱、節(jié)點的類型和節(jié)點的值。
三 代碼
<!DOCTYPE html>
<html>
<head>
<title>m.fzitv.net 訪問指定節(jié)點</title>
</head>
<body id="b1">
<h3 >三號標題</h3>
<b>加粗內容</b>
<script language="javascript">
<!--
var by=document.getElementById("b1");
var str;
str="節(jié)點名稱:"+by.nodeName+"\n";
str+="節(jié)點類型:"+by.nodeType+"\n";
str+="節(jié)點值:"+by.nodeValue+"\n";
alert(str);
-->
</script>
</body>
</html>
四 運行彈出如下提示框:

更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript操作DOM技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
- JavaScript文檔對象模型DOM
- JavaScript Dom對象的操作
- JavaScript 中的文檔對象模型 DOM
- JavaScript變量Dom對象的所有屬性
- 淺談JS讀取DOM對象(標簽)的自定義屬性
- js基礎之DOM中document對象的常用屬性方法詳解
- js基礎之DOM中元素對象的屬性方法詳解
- JavaScript實現(xiàn)DOM對象選擇器
- JavaScript DOM 對象深入了解
- JavaScript——DOM操作——Window.document對象詳解
- jquery對象和javascript對象即DOM對象相互轉換
- js對象關系圖 方便dom操作
- javascript DOM對象的學習實例代碼
- JavaScript操作DOM對象詳解
相關文章
Js Jquery創(chuàng)建一個彈出層可加載一個頁面
Js Jquery創(chuàng)建一個彈出層,當加載一個頁面進彈出層時出現(xiàn)亂碼,示例代碼如下,大家可以參考參考2014-05-05
JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能及使用探索
這篇文章主要介紹了JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能使用探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
javascript修改瀏覽器title方法 JS動態(tài)修改瀏覽器標題
給大家講一個用javascript修改瀏覽器title方法和技巧,需要的朋友把代碼測試吧。2017-11-11
JS鮮為人知的問題之[] == ![]結果為true、而{} == !{}卻為false
這篇文章主要給大家介紹了關于JS鮮為人知的問題之[] == ![]結果為true、而{} == !{}卻為false的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-05-05

