Document物件中的查詢方法介紹-有解無憂

Document中重要且常用的幾個查詢方法

1.document.getElementById(elementId)
通過標簽的id屬性查找標簽dom物件，elementId是標簽的id屬性

2.document.getElementByName(elementName)
通過標簽的name屬性查找標簽dom物件，elementName是標簽的name屬性值

3.document.getElementByTagName(tagename)
通過標簽名查找標簽dom物件，tagname是標簽名

代碼具體演示

document.getElementById(elementId)
document.getElementById(elementId)可以獲取指定id的標簽，當多個id相同，則永遠只會獲取到第一個所指定id的標簽
問題描述：
當用戶點擊了校驗按鈕要獲取輸入框中的內容，然后驗證其是否合法，
驗證規則：
必須要有字母，數字，下劃線組成，且長度為5到12位

1.獲取輸入框中的內容

<body>
		<input type="text" id="12" value="0" />
		<button onclick="b()">校檢</button>
	</body>

創建一個文本輸入框用來給用戶提供輸入；id為12；默認值為0
創建一個校檢按鈕，加入onclick(點擊發生事件)屬性

function b(){
				var obj=document.getElementById("12");
				alert(obj.value);
			}

b()函式，用obj=document.getElementById("12")獲取到id為12的標簽，然后obj.value可以回傳obj物件(即id為12的文本輸入框標簽)，框中的值

2.驗證字串符合規則
需要用到正則運算式的技術
正則運算式知識內容請移至正則運算式技術

var a=obj.value;
var patt=/^\w{5,12}$/;
alert(patt.test(a));

定義一個變數a接收輸入框內的回傳值，然后判斷a是否符合規則然后提示

document.getElementsByName(elementName)
問題描述：
創建一個多選，并創建一個全選，一個反選，一個全不選按鈕
首先有這么一個多選框和三個按鈕

<body>
		興趣愛好：
		<input type="checkbox" name="hobby"  value=java />java
		<input type="checkbox" name="hobby"  value=hadoop/>hadoop
		<input type="checkbox" name="hobby"  value=c++/>c++
		<input type="checkbox" name="hobby"  value=c/>c <br />
		<button onclick="a()">全選</button>
		<button onclick="b()">全不選</button>
		<button onclick="c()">反選</button>
	</body>

var obj=document.getElementsByName("hobby");

查找name為hobby的標簽，同時回傳他們的dom物件，回傳值是多個標簽的dom物件的集合
即此時obj是一個集合，里面有所有的name為hobby的dom物件，
這個集合的操作方法和陣列一樣，可以用陣列的操作方法來對其操作，

obj[n]代表標簽的dom物件集合里面的順序就是html中從上到下的順序

alert(obj.length);//查找有幾個元素
alert(obj[0].checked)
//當某一項被選中，則它的checked=true

選中是由checked=checked決定的但是只要多選標簽里面有checked，不管其值是多少，初始這項都會被選中

選中物件的checked屬性并對其進行操作
當某一項被選中，則它的checked=true，當他未被選中則其checked=false，
標簽的checked屬性可被改變
我們可以用這個對其是否選中狀態進行操作
obj[0].checked=true使第一個元素進入選中狀態
obj[0].checked=false使第一個元素進入不選中狀態
代碼如下

var obj=document.getElementsByName("hobby");
			function a(){
				var i=0;
				while(i<4){
					obj[i].checked=true;
					i++;
				}
			}
			function b(){
				var i=0;
				while(i<4){
					obj[i].checked=false;
					i++;
				}
			}
			function c(){
				var i=0;
				while(i<4){
					if(obj[i].checked){
						obj[i].checked=false;
					}else{
						obj[i].checked=true;
					}
					i++;
				}
			}

document.getElementByTagName(tagename)
問題描述：
通過input標簽獲取到所有的input標簽物件，并創建一個按鈕，點擊按鈕可獲取他們所有的默認值
注：input type=“text” 獲取到的默認值是文本框里面的數值

<body>
		<input type="checkbox"  value=java />java
		<input type="checkbox"  value=hadoop />hadoop
		<input type="checkbox"  value=c++ />c++
		<input type="checkbox"  value=c />c <br />
		<button onclick="b()">全選</button>
	</body>

創建多選項和按鈕

function b(){
				var obj=document.getElementsByTagName("input");
				//獲取到input標簽物件的集合
				alert(obj[0]);
				var i=0;
				do{
					console.log(obj[i].value);
					i++
				}while(i<4);
			}

document.getElementsByTagName("input")按照括號中的標簽名進行查找,回傳值也是符合條件的dom物件集合
其操作方法和陣列一樣
集合中元素順序還是他們在html頁面中從上到下的順序

三個方法的優先使用順序：
如果有id我們優先使用document.getElementById(elementId)，沒有id但有name優先使用document.getElementByName(elementName)，id，name都沒有，那我們用document.getElementByTagName(tagename)

注意：
這三個方法，一定要在頁面加載完成之后執行，才能查詢到標簽物件，即，整個頁面代碼讀取完成，形成一個dom模型，這個時候查詢才能有效，所以這些查詢代碼需要寫在函式里面供其他代碼呼叫，或者寫在window.onload=function(){}這些頁面加載回應后才執行的函式里面才能有用，

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/157641.html

標籤：其他

上一篇：想提升JavaScript技能，你得掌握這5大關鍵概念

下一篇：PV、UV、VV的意義及區別