JS document物件簡單用法完整示例
阿新 • • 發佈：2020-01-15
本文例項講述了JS document物件簡單用法。分享給大家供大家參考，具體如下：
<html>
<head>
<title>js-document物件學習</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
// 直接獲取物件
function testGetElementById(){ //通過id獲取物件
// var gby=window.document.getElementById(); //window可以省去不寫
var gby=document.getElementById("sid");
alert(gby); //輸出的返回值是標籤的型別[object HTMLInputElement]
}
function testGetElementsByName(){ //通過name獲取物件
var gbn=document.getElementsByName("umane");
alert(gbn); //輸出的返回值型別是[object NodeList]一個物件型別的陣列
alert(gbn.length); //Nodelist的元素是節點元素，長度是節點的個數。每一個容器或標籤算是一個節點。
}
function testGetElementsByTagName(){ //通過TagName(標籤)獲取物件
var gbt=document.getElementsByTagName("input");
alert(gbt); //輸出返回值型別是[object HTMLCollection]是一個物件元素的集合
alert(gbt.length); //其集合的數目是所有input個數
}
function testGetElementsByClassName(){ //通過class獲取物件
var gbc=document.getElementsByClassName("clname");
alert(gbc); //輸出返回值型別是[object HTMLCollection]是一個物件元素的集合
alert(gbc.length); //集合元素的長度是含有傳入類屬性的元素個數。
}
// 間接獲取物件
function testParent(){ //利用父節點呼叫其節點物件
var showdiv=document.getElementById("showdiv");
var tchild=showdiv.childNodes;
alert(tchild); //輸出返回值型別是[object NodeList]的一個list陣列
alert(tchild.length); //返回子節點的長度 13，是由於在div中和text有換行符算一個子節點
}
function testChild(){ //利用子節點呼叫其父節點
var showdiv=document.getElementById("child");
var tparent=showdiv.parentNode;
alert(tparent); //輸出返回值型別是[object HTMLDivElement](其父節點的型別)
}
function testBorther(){ //利用子節點呼叫其父節點
var showdiv=document.getElementById("target");
var topBorther=showdiv.previousSibling; //輸出參考物件上面的元素
var lowBorther=showdiv.nextSibling //輸出參考元素的下面的元素
alert(topBorther+":::"+lowBorther); //輸出返回值型別是[object HTMLDivElement](其父節點的型別)
}
</script>
<style type="text/css">
.clname{}
#showdiv{
border: solid 2px cyan;
width: 300px;
height: 400px;
}
input[type=text]{
margin-left: 3px;
}
</style>
</head>
<body>
<h3>js-document物件學習</h3>
<h4>直接呼叫</h2>
<input type="button" name="" id="sid" value="測試GetElementById" onclick="testGetElementById()" />
<input type="button" name="umane" id="" value="測試GetElementByName" onclick="testGetElementsByName()" />
<input type="button" name="" id="" value="測試GetElementsByTagNames" class="clname" onclick="testGetElementsByTagName()" />
<input type="button" name="" id="" value="測試GetElementsByClassName" class="clname" onclick="testGetElementsByClassName()" />
<hr /><br />
<h4>間接呼叫</h2>
<input type="button" name="" id="" value="測試Parent" onclick="testParent()" />
<input type="button" name="" id="" value="測試 Child" onclick="testChild()" />
<input type="button" name="" id="" value="測試Borther" onclick="testBorther()" />
<div id="showdiv">
<input type="text" name="" id="parent" value="" />
<input type="text" name="" id="child" value="" />
<input type="text" name="" id="target" value="" />
<input type="text" name="" id="" value="" />
<input type="text" name="" id="" value="" />
<input type="text" name="" id="" value="" />
</div>
</body>
</html>
執行結果：
Document:
獲取HTML元素：
1：直接獲取方式：通過id 通過name屬性值 通過標籤名 通過class屬性值
2：間接獲取方式：父子關係 子父關係 兄弟關係
3：操作HTML元素物件的屬性
操作HTML元素物件的內容和樣式
操作HTML的文件結構
document操作Form元素
document操作表格
document物件實現form表單校驗
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於JavaScript相關內容可檢視本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查詢演算法技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript錯誤與除錯技巧總結》
希望本文所述對大家JavaScript程式設計有所幫助。