JS 之Document物件 獲取byId byName byTagName
JS 物件模型Document 的標籤節點獲取 byId byName byTagname |
|---|
一、關於Document
《一》、DOM 全稱是Document Object Model 文件物件模型
<1>、Document 物件的理解：
第一點：Document它管理了所有的Html文件內容。
第二點：document它是一種樹結構的文件。有層級關係。
第三點：它讓我們把所有的標籤 都 物件化
第四點：我們可以通過document訪問所有的標籤物件。
<2>、有了Document物件自然有了其物件的一些基本屬性，在Document中
主要的操作物件時節點 Node
節點：Node——構成HTML文件最基本的單元。
節點我們關心的主要是：
元素節點：HTML文件中的HTML標籤
屬性節點：標籤的屬性
文字節點：HTML標籤中的文字內容
<3>、節點的常用屬性
nodeName表示節點名
nodeType表示節點型別
nodeValue表示節點值
<4>三類節點的三個屬性如下：
| nodeName | nodeType | nodeValue | |
| 元素節點 | 標籤名 | 1 | null |
| 屬性節點 | 屬性名 | 2 | 屬性值 |
| 文字節點 | #text | 3 | 文字內容 |
<5>、舉例：
<div id="div01">hello world</div>
在上面的這個標籤中
<div> 是元素節點
id=”div01” 是屬性節點
hello world 是文字節點
對於三類節點屬性用alert()測試如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> //動態註冊頁面載入完成onload事件 window.onload = function() { // <div> 元素節點 var divObj = document.getElementById("div01"); alert(divObj.nodeName); // 節點名 DIV alert(divObj.nodeType); // 節點型別 1 alert(divObj.nodeValue); // 節點值 null // id=”div01” 是屬性節點 var idNode = divObj.getAttributeNode("id"); alert(idNode.nodeName); // 節點名 id alert(idNode.nodeType); // 節點型別 2 alert(idNode.nodeValue); // 節點值 屬性值 div01 // hello world 是文字節點 var textNode = divObj.firstChild; alert(textNode.nodeName); // 節點名 #text alert(textNode.nodeType); // 節點型別 3 alert(textNode.nodeValue); // 節點值 文字內容 } </script> </head> <body> <div id="div01">hello world</div> </body> </html>
★★二、Document中查詢標籤dom物件的三種方法
<一>document.getElementById(elementId)
通過標籤的id屬性查詢標籤dom物件，elementId是標籤的id屬性值
<二>document.getElementsByName(elementName)
通過標籤的name屬性查詢標籤dom物件，elementName標籤的name屬性值
<三>document.getElementsByTagName(tagname)
通過標籤名查詢標籤dom物件。tagname是標籤名
（1）使用document.getElementById(elementId)獲取dom物件
如:使用document.getElementById(elementId)
例：表單提交時驗證賬號輸入是否合法 （通過byId獲取dom物件然後使用）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 頁面載入完成之後
window.onload = function() {
//我們要操作所有的標籤物件都要分兩步
// 1.先獲取標籤物件
var usernameObj = document.getElementById("username");
// 2.操作標籤物件的屬性或者方法
alert("修改原使用者為我已經改變);
usernameObj.value = "我已經改變";
// usernameObj.type="password";
這裡效果如下：
// 獲取button按鈕的標籤物件
var buObj = document.getElementById(“bu01”);
// 動態給按鈕繫結單擊事件
buObj.onclick = function() {
//我們希望點選按鈕之後。獲取使用者名稱輸入框裡的文字內容做合法性驗證
// 驗證使用者名稱必須由字母，字母，下劃線組成。並且長度是6到15位
//1.先獲取標籤物件
var usernameObj = document.getElementById("username");
//2.通過標籤物件.value獲取輸入框裡的文字內容
var usernameObjText = usernameObj.value;
//3.我們建立一個正則物件去驗證
var patt = /^\w{6,15}$/;//只能為數字或字母或下劃線6-15位
var result = patt.test(usernameObjText);
//4.提示使用者
var spanObj = document.getElementById("usernameSpan");
// innerHTML
if (result) {
// alert("使用者名稱合法");新增圖片顯示效果
spanObj.innerHTML = "<img alt='' width='15' height='15' src=\"right.png\"/>";
不合法效果如下：
} else {
// alert(“使用者名稱不合法”);新增圖片顯示效果
spanObj.innerHTML = “”;
}
}
}
合法效果如下：
</script>
</head>
<body>
使用者名稱：<input id="username" type="text" value="7abc"/>
<span id="usernameSpan" style="color: red;"></span><br/>
密碼： <input id="password" type="password" /><br />
<button id="bu01">提交</button>
</body>
</html>
（2）使用document.getElementsByName(elementName)獲取dom物件
如:使用document.getElementsByName(elementName)
簡單說明：
實現多選按鈕的checkBox 的 全選 全不選 反選功能如下>>>>
//頁面載入完成之後做如下測試：
window.onload = function() {
// 通過name屬性查詢所有的標籤物件
var hobbyObjs = document.getElementsByName(“hobby”);
// getElementsByName方法查詢的是name屬性，返回的是一個集合，
// 我們對這個集合的操作，也就是獲取其中的元素跟陣列一樣
// 這個集合中的元素出現的順序
就是這些標籤在html頁面中從上到下出現的順序可以做如下測試
// alert(hobbyObjs.length); 結果：4
// alert(hobbyObjs); 結果：Object noteList
// var checkBoxObj = hobbyObjs[3];
// alert(checkBoxObj.checked); 結果：true
// checkBoxObj.checked = true;
}
實現三個選擇功能如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//①全選功能
function checkAll(){
//1.先獲取要操作所有的標籤物件input type=checkbox
var hobbyObjs = document.getElementsByName("hobby");
//alert(hobbyObjs.length);
效果：
//alert(hobbyObjs);
效果：
//2.遍歷所有的標籤物件，獲取到每一個input type=checkbox
for (var i = 0; i < hobbyObjs.length; i++) {
var hobbyObj = hobbyObjs[i];
//3.修改每一個複選框標籤物件的checked屬性值為true
hobbyObj.checked = true;
}
}
//②全不選功能
function checkNoAll(){
//1.先獲取要操作所有的標籤物件input type=checkbox
var hobbyObjs = document.getElementsByName("hobby");
//2.遍歷所有的標籤物件，獲取到每一個input type=checkbox
for (var i = 0; i < hobbyObjs.length; i++) {
var hobbyObj = hobbyObjs[i];
//3.修改每一個複選框標籤物件的checked屬性值為false
hobbyObj.checked = false;
}
}
//③反選功能
function checkReverse(){
//1.先獲取要操作所有的標籤物件input type=checkbox
var hobbyObjs = document.getElementsByName("hobby");
//2.遍歷所有的標籤物件，獲取到每一個input type=checkbox
for (var i = 0; i < hobbyObjs.length; i++) {
//3.修改每一個複選框標籤物件的checked屬性值為相反狀態
var hobbyObj = hobbyObjs[i];
hobbyObj.checked = !hobbyObj.checked;
}
}
</script>
</head>
<body>
興趣愛好：
<input name="hobby" type="checkbox" value="c" checked="checked" />C
<input name="hobby" type="checkbox" value="cpp"/>C++
<input name="hobby" type="checkbox" value="java"/>java
<input name="hobby" type="checkbox" value="csharp"/>C#
<button onclick="checkAll()">全選</button>
<button onclick="checkNoAll()">全不選</button>
<button onclick="checkReverse()">反選</button>
</body>
</html>
（2）使用document.getElementsByTagName(tagname)獲取dom物件
例：使用document.getElementsByTagName(tagname)
實現全選功能：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 頁面載入完成之後
window.onload = function(){
// 通過標籤名查詢所有給定標籤名的物件集合
// var inputObjs = document.getElementsByTagName("input");
// getElementsByTagName方法返回的也是物件集合。
// 我們要獲取這個集合中的元素，可以像陣列一樣操作。通過下標獲取
// alert(inputObjs);
// alert(inputObjs.length);
//查詢所有button按鈕
var buttonObjs = document.getElementsByTagName("button");
// alert(buttonObjs.length); 測試長度
var buttonObj = buttonObjs[0];
buttonObj.onclick = function(){
//1.先獲取標籤物件
var inputObjs = document.getElementsByTagName("input");
//2.遍歷修改每一個標籤物件的checked的屬性為true
for (var i = 0; i < inputObjs.length; i++) {
inputObjs[i].checked = true;
}
}
}
function abc(){
var hobbyObjs = document.getElementsByName("hobby");
alert(hobbyObjs.length);
}
</script>
</head>
<body>
<input name="hobby" type="checkbox" value="c" checked="checked" />C
<input type="checkbox" value="cpp"/>C++
<input type="checkbox" value="java"/>java
<input type="checkbox" value="csharp"/>C#
<button>全選</button>
</body>
</html>
效果：
