document物件+獲取節點三種方法演示：

阿新 • • 發佈：2019-01-14

document物件的演示。
該物件將標記型文件進行封裝。
該物件的作用，是可以對標記型文件進行操作。
最常見的操作就是，想要實現動態效果，需要對節點操作，那麼要先獲取到這個節點。
要想獲取節點，必須要先獲取到節點所屬的文件物件document。
所以document物件最常見的操作就是獲取頁面中的節點。
獲取節點的方法體現：
1，getElementById:通過標籤的id屬性值獲取該標籤節點。返回該標籤節點。
2，getElementsByName(): 通過標籤的name屬性獲取節點，因為name有相同，所以返回的一個數
組。
3， getElementsByTagName(): 通過標籤名獲取節點。因為標籤名會重複，所以返回的是一個數組。
凡是帶s返回的都是陣列。

getElementById()方法

<html>
    <head></head>
    <body>
    <input type="button" value=" 演示 document 物件獲取節點 " onclick="getNodeDemo()"/>
    <div id="divid">這是一個div區域</div>
    </body>
    <script type="text/javascript">
        function getNodeDemo(){
/*
* 需求：獲取頁面中的div節點。
* 思路：
* 通過docment物件完成。因為div節點有id屬性。 所以可以通過id屬性來完成獲取。
*/ 

        var divNode = document.getElementById("divid");
        //節點都有三個必備的屬性。節點名稱，節點型別，節點值。
    alert(divNode.nodeName+":"+divNode.nodeType+":"+divNode.nodeValue);//結果為div:1:null
/* 常見節點有三種：
* 1，標籤型節點：型別  代表數字:1
* 2，屬性節點： 型別   代表數字:2
* 3，文字節點。 型別   代表數字:3
*
* 標籤型節點是沒有值的，屬性和文字節點是可以有值的。*/

 var text = divNode.innerHTML;
 alert(text);//結果為:這是一個div區域 

//如果是html語言也會顯示出來。比如:在div下面包裹的是<input type="text">。那麼上面顯示的結果就是<input type="text">

//改變div中的文字。
divNode.innerHTML = "哈哈，文字被我改掉了";//這樣就會改變文字的內容
        }
    </script>
</html>

getElementsByName()方法

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title>Untitled Document</title>
    </head>
    <body>
    <input type="button" value=" 演示 document 物件獲取節點 " onclick="getNodeDemo()2"/>
    <input type="text" name="user"  value="hh"/>
    <input type="text" name="user"  value="bb"/>

    </body>
    <script type="text/javascript">
    function getNodeDemo2(){
//因為name的值可能相同，所以返回來的就是陣列
// var nodes = document.getElementsByName("user");
// alert(nodes[0].value);
var userNode = document.getElementsByName("user");
alert(userNode[0].value);//結果為:hh
alert(userNode[1].value);//結果為:bb
}
    </script>
</html>

getElementsByTagName()方法演示1

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title>Untitled Document</title>
    </head>
    <body>
<input type="button" value=" 演示 document 物件獲取節點 " onclick="getNodeDemo3()"/>
<a href="http://www.sina.com.cn">新浪網站11</a>
<a href="http://www.SOHU.com.cn">新浪網站22</a>
    </body>
    <script type="text/javascript">
    function getNodeDemo3(){
    //直接用標籤名獲取。
    var nodes = document.getElementsByTagName("a");
     alert(nodes.length);//1
     alert(nodes[0].innerHTML);
    //結果<a href="http://www.sina.com.cn">新浪網站11</a>
    for(var x=0; x<nodes.length; x++){
    // alert(nodes[x].innerHTML);
    nodes[x].target = "_blank";//給標籤迴圈設定屬性
    }
}
    <script>
</html>

getElementsByTagName()方法演示2
/*
* 對於頁面中的超連結，新聞連結通過新視窗開啟，入口網站連結在當前頁面開啟。
* 當然是要獲取其中被操作的超連結物件啊。
* 可是通過document獲取超連結，拿到的是頁面中所有的超連結節點。
* 只想獲取一部分該如何辦呢？
* 只要獲取到被操作的超連結所屬的節點即可。
*
* 在通過這個節點獲取到它裡面所有的超連結節點。
*/

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title>Untitled Document</title>
    </head>
    <body>
    <input type="button" value=" 演示 document 物件獲取節點 " onclick="getNodeDemo4()"/>
<div id="divid">這是一個div區域</div>
<input type="text" name="user" />
<a href="http://www.sina.com.cn">新浪網站11</a>
<a href="http://www.SOHU.com.cn">新浪網站22</a>
<div id="newslink">
<a href="http://www.163.com.cn">新聞連結1</a>
<a href="http://www.164.com.cn">新聞連結2</a>
<a href="http://www.itcast.com.cn">新聞連結3</a>
</div>
    </body>
    <script type="text/javascript">
//獲取超連結所屬的div節點
var divNode = document.getElementById("newslink");
//通過對div物件方法的查詢發現它也具備getElementsByTagName方法。
//記住：所有的容器型標籤都具備這個方法。在該標籤範圍內獲取指定名稱的標籤。
var aNodes = divNode.getElementsByTagName("a");
for(var x=0;x<aNodes.length; x++){
// alert(aNodes[x].innerHTML);
aNodes[x].target = "_blank";//但給新聞連結設定屬性，新視窗開啟
}
    </script>
</html>

document物件+獲取節點三種方法演示：

document物件+獲取節點三種方法演示：

從jdbc中獲取連線物件Connection的三種方法

url地址資料引數轉化JSON物件（js三種方法實現）

uri路徑獲取的三種方法

Java反射02 : Class物件獲取的三種方式和通過反射例項化物件的兩種方式

C++ string型別的字串長度獲取的三種方法

記錄，js中將字串轉化成json物件的常見三種方法

獲取表單物件得三種方法getElementById getElementsByName and getEl

Spring Boot(二)：從Session中獲取域物件的三種方法

Java 獲取Class物件的三種方法

獲取Class物件的三種方法

JavaSE8基礎 Class 獲取一個類的Class對象的三種方法

刪除鏈表的倒數第N個節點（三種方法實現）

js獲取物件屬性的兩種方法，object.屬性名，[‘屬性名’ ]

JS建立物件的三種方法

JavaScript - 建立物件的三種方法

Activiti獲取ProcessEngine的三種方法

Andorid獲取狀態列高度的三種方法

c# 獲取本地主機的ip地址三種方法

JavaScript獲取滑鼠位置的三種方法

document物件+獲取節點三種方法演示：

相關推薦