溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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>
<h4>js-document對象學習</h4>
<h5>直接調用</h3>
<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 />
<h5>間接調用</h3>
<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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
