定位頁面元素
定位頁面元素方法
Document物件提供了屬性和方法實作定位頁面元素功能，這也是DOM的標準規范中Docu ument物件的主要應用之一，
Document物件提供實作定位頁面元素的方法具有如下幾種:
● getElementByld()方法: 通過頁面元素的id屬性值定位元素，.
● getElementsByName()方法: 通過頁面元素的name屬性值定位元素，
● getElementsByTagName()方法: 通過頁面元素的元素名定位元素，
● getElementsByClassName()方法: 通過頁面元素的class屬性值定位元素，
使用getElementByld()方法定位頁面元素：
HTML頁面元素的id屬性的特點是唯一、不可重復的，所以通過這種方式定位的HTML頁面元素也是唯一的，
// 通過id名來對元素進行定位
var btn = document.getElementById('btn');
console.log(btn);
使用getElementsByName()方法定位頁面元素：
// 通過頁面中Class名來對元素進行定位;
var btn = document.getElementsByClassName('btn');
// 得到HTMLCollection集合 -> 類陣列物件;
console.log(btn);
注意：使用getElementsByName()方法定位頁面元素時，正確寫法為：
// 通過頁面中Class名來對元素進行定位;
var btn = document.getElementsByClassName('btn')[0];
// 得到頁面內類名為btn的元素;
console.log(btn);
使用getElementsByTagName()方法：
<body>
<button name="btns"></button>
<button name="btns"></button>
<button name="btns"></button>
<button name="btns"></button>
<button name="btns"></button>
<script>
// 通過頁面中name屬性名來對元素進行定位;
var btn = document.getElementsByName('btns')[0];
// 輸出的是一個索引陣列,NodeList;里面有5個button按鈕;
console.log(btn);
console.log(btn instanceof NodeList); // true;
</script>
</body>
使用getElementsByClassName()方法：
<body>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<script>
// 通過頁面中標簽名來對元素進行定位;
var btn = document.getElementsByTagName('button')[0];
// 得到頁面內標簽名為button的元素;
console.log(btn);
console.log(btn instanceof HTMLCollection); // true
</script>
</body>
總結：
getElementsByName()方法
getElementsByTagName()方法
getElementsByClassName()方法
以上三種方法，在使用時后面加上[0]，方便實際應用中得獲取元素得正確性;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/80180.html
標籤：其他