- HTML 教程
- HTML - 首頁
- HTML - 路線圖
- HTML - 簡介
- HTML - 歷史與演變
- HTML - 編輯器
- HTML - 基本標籤
- HTML - 元素
- HTML - 屬性
- HTML - 標題
- HTML - 段落
- HTML - 字型
- HTML - 塊
- HTML - 樣式表
- HTML - 格式化
- HTML - 引用
- HTML - 註釋
- HTML - 顏色
- HTML - 圖片
- HTML - 圖片地圖
- HTML - 內聯框架 (iframe)
- HTML - 短語元素
- HTML - 元標籤
- HTML - 類
- HTML - ID
- HTML - 背景
- HTML 表格
- HTML - 表格
- HTML - 表格標題與描述
- HTML - 表格樣式
- HTML - 表格列組 (colgroup)
- HTML - 巢狀表格
- HTML 列表
- HTML - 列表
- HTML - 無序列表
- HTML - 有序列表
- HTML - 定義列表
- HTML 連結
- HTML - 文字連結
- HTML - 圖片連結
- HTML - 郵件連結
- HTML 顏色名稱與值
- HTML - 顏色名稱
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML 表單
- HTML - 表單
- HTML - 表單屬性
- HTML - 表單控制元件
- HTML - 輸入屬性
- HTML 多媒體
- HTML - 影片元素
- HTML - 音訊元素
- HTML - 嵌入多媒體
- HTML 頭部
- HTML - head 元素
- HTML - 新增 Favicon
- HTML - Javascript
- HTML 佈局
- HTML - 佈局
- HTML - 佈局元素
- HTML - 使用 CSS 進行佈局
- HTML - 響應式設計
- HTML - 符號
- HTML - 表情符號
- HTML - 樣式指南
- HTML 圖形
- HTML - SVG
- HTML - Canvas
- HTML API
- HTML - Geolocation API
- HTML - 拖放 API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web 儲存
- HTML - 伺服器傳送事件
- HTML 其他
- HTML - 文件物件模型 (DOM)
- HTML - MathML
- HTML - 微資料
- HTML - IndexedDB
- HTML - Web 訊息傳遞
- HTML - Web CORS
- HTML - WebRTC
- HTML 演示
- HTML - 音訊播放器
- HTML - 影片播放器
- HTML - 網頁幻燈片
- HTML 工具
- HTML - Velocity Draw
- HTML - 二維碼
- HTML - Modernizer
- HTML - 驗證
- HTML - 顏色拾取器
- HTML 參考
- HTML - 速查表
- HTML - 標籤參考
- HTML - 屬性參考
- HTML - 事件參考
- HTML - 字型參考
- HTML - ASCII 碼
- ASCII 碼錶查詢
- HTML - 顏色名稱
- HTML - 實體
- MIME 媒體型別
- HTML - URL 編碼
- 語言 ISO 程式碼
- HTML - 字元編碼
- HTML - 已棄用的標籤
- HTML 資源
- HTML - 快速指南
- HTML - 有用資源
- HTML - 顏色程式碼生成器
- HTML - 線上編輯器
HTML - DOM 文件 getElementsByName() 方法
HTML DOM 文件 getElementsByName() 方法用於返回具有引數中指定的 name 屬性的元素集合。
語法
document.getElementsByName(name);
引數
此方法接受如下所示的單個引數。
| 引數 | 描述 |
|---|---|
| name | 它代表元素的 name 屬性。 |
返回值
它返回一個 NodeList 物件,該物件是引數中給定名稱指定的所有元素的集合。
HTML DOM 文件 'getElementsByName()' 方法示例
下面是說明 getElementsByName() 方法用法的示例。
統計元素數量
在下面的示例中,此方法用於統計 name = "apps" 的元素數量。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
HTML DOM document getElementsByName() Method
</title>
</head>
<body>
<button onclick="fun()">Click me</button><br>
<input type="text" name="apps" value="Tutorial Point">
<input type="text" name="apps" value="Tutorix">
<input type="text" name="game" value="TOD">
<p id="type"></p>
<script>
function fun() {
let x = document.getElementsByName("apps").length;
document.getElementById("type").innerHTML =
"Elements with name 'apps' :" + x;
}
</script>
</body>
</html>
獲取標籤名稱
在下面的示例中,此方法用於獲取 name="forms" 元素的標籤名稱。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
HTML DOM document getElementsByName() Method
</title>
</head>
<body>
<button onclick="fun()">Click me</button><br>
<form name="form">
<input type="text" name="apps" value="Tutorial Point">
<input type="text" name="game" value="TOD">
</form>
<p id="type"></p>
<script>
function fun() {
let x = document.getElementsByName("form")[0].tagName;
document.getElementById("type").innerHTML =
"Elements with name 'forms' :" + x;
}
</script>
</body>
</html>
獲取元素內容
在下面的示例中,此方法用於獲取 name="form1" 的內容。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
HTML DOM document getElementsByName() Method
</title>
</head>
<body>
<button onclick="fun()">Click me</button><br>
<form name="form1">
<input type="text" name="random" value="This is form 1">
<input type="text" name="apps" value="Tutorial Point">
<input type="text" name="game" value="TOD">
</form>
<br><br>
<form name="form2">
<input type="text" name="randoms" value="This is form 2">
<input type="text" name="apps" value="Tutorix">
<input type="text" name="game" value="RoadRash">
</form>
<p id="type"></p>
<script>
function fun() {
let x = document.getElementsByName("form1")[0].innerHTML;
document.getElementById("type").innerHTML =
"Content of the elements with name 'form1' :" + x;
}
</script>
</body>
</html>
支援的瀏覽器
| 方法 | ![]() |
![]() |
![]() |
![]() |
![]() |
|---|---|---|---|---|---|
| getElementsByName() | 是 1 | 是 12 | 是 1 | 是 1 | 是 5 |
html_dom_document_reference.htm
廣告




