Java Script（二）——Document物件介紹
阿新 • • 發佈：2021-01-15
技術標籤：JavaWebjsjavascriptjavacsshtml
JavaScript（二）
Document物件
- 第一點：Document管理了所有的HTML 文件內容。
- 第二點：document它是一種樹結構的文件。有層級關係。
- 第三點：它讓我們把所有的標籤 都 物件化。
- 第四點：我們可以通過 document 訪問所有的標籤物件。
相當於：
Class Dom{
private String id; // id 屬性
private String name; //name屬性
private String tagName; //表示標籤名
private Dom parentNode; 每個使用的標籤都有一個獨一無二的id，但多個標籤可能會有相同的name，也可以使用多個相同的標籤。
因此查詢起來的話，通過id可查詢到獨一無二的單個標籤，通過name或者標籤名tagName查詢，會得到多個標籤的集合。
1. Document 物件中的方法介紹
- document.getElementById(elementId)
通過標籤的 id 屬性查詢標籤 dom 物件，elementId 是標籤的 id 屬性值
- document.getElementsByName(elementName)
通過標籤的 name 屬性查詢標籤 dom 物件，elementName 標籤的 name 屬性值
- document.getElementsByTagName(tagname)
通過標籤名查詢標籤 dom 物件。tagname 是標籤名
- document 物件的三個查詢方法，
如果有 id 屬性，優先使用 getElementById 方法來進行查詢
如果沒有 id 屬性，則優先使用 getElementsByName 方法來進行查詢
如果 id 屬性和 name 屬性都沒有，最後再按標籤名查 getElementsByTagName- 以上三個方法，一定要在頁面載入完成之後執行，才能查詢到標籤物件。
2. getElementById 方法
注意時element，說明通過id只能得到一個物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-13</title>
<!--
需求：當用戶點選了校驗按鈕，要獲取輸出框中的內容。然後驗證其是否合法。
驗證的規則是：必須由字母，數字。下劃線組成。並且長度是 5 到 12 位。
-->
<script type="text/javascript">
function checkLegal(){
var usernameObj=document.getElementById("username");
var usenameSpanObj=document.getElementById("usernameSpan");
var usernameText=usernameObj.value; //獲取文字框中的內容,即value屬性
//var Tips=usenameSpanObj.innerText;//innerText 設定span標籤的內容
var patt=/^\w{5,12}$/; //規定正則表示式的規則 ^ $ 從頭到尾; \w ; {5,12};
if (patt.test(usernameText)){
usenameSpanObj.innerText="使用者名稱合法";
}else{
usenameSpanObj.innerText="使用者名稱非法";
}
}
</script>
</head>
<body>
使用者名稱：<input type="text" id="username" name="username"/>
<span id="usernameSpan" style="color: red"> </span>
<!-- span標籤跟在input標籤後面，根據輸入文字的合理性顯示提示內容-->
<button onclick="checkLegal()">校驗</button>
</body>
</html>
3. getElementsByName 方法
這裡就是elements了，說明通過name得到的可能是物件集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-13</title>
<script type="text/javascript">
function checkAll() {
var hobbyObjs=document.getElementsByName("hobby");
//hobbyObjs就是一個數組，陣列每個元素是個物件
for (var i=0;i<hobbyObjs.length;++i){
hobbyObjs[i].checked=true;
}//checked屬性，選中就是true，對應on，不選中就是false，對應off
}
function checkNo() {
var hobbyObjs=document.getElementsByName("hobby");
for (var i=0;i<hobbyObjs.length;++i){
hobbyObjs[i].checked=false;
}
}
function checkReverse() {
var hobbyObjs=document.getElementsByName("hobby");
for (var i=0;i<hobbyObjs.length;++i){
hobbyObjs[i].checked=!hobbyObjs[i].checked;
}
}
</script>
</head>
<body>
興趣愛好：
<input type="checkbox" name="hobby" value="cpp" checked="checked"/>cpp
<input type="checkbox" name="hobby" value="Java"/>Java
<input type="checkbox" name="hobby" value="JS"/>JS
<br/>
<button onclick="checkAll()">全選</button>
<button onclick="checkNo()">全不選</button>
<button onclick="checkReverse()">反選</button>
</body>
</html>
4. getElementsByTagName方法
elements了，說明通過name得到的也是物件集合，程式碼實驗同1.3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-13</title>
<script type="text/javascript">
//按照名字屬性：name的查詢，必須要求標籤定義了name屬性的值
//當直接用標籤名tagname查詢時
function checkAll() {
var inputObjs=document.getElementsByTagName("input");
for (var i=0;i<inputObjs.length;++i){
inputObjs[i].checked=true;
}
}
</script>
</head>
<body>
興趣愛好：
<input type="checkbox" value="cpp" checked="checked"/>cpp
<input type="checkbox" value="Java"/>Java
<input type="checkbox" name="hobby" value="JS"/>JS
<br/>
<button onclick="checkAll()">全選</button>
</body>
</html>
5. 節點的常用屬性和方法
標籤物件就是一種結點
方法：
通過具體的元素節點呼叫 ：
getElementByID() getElementsByName() getElementsByTagName()
appendChild( oChildNode ) 方法，可以新增一個子節點，oChildNode 是要新增的孩子節點
屬性：
childNodes 屬性，獲取當前節點的所有子節點
firstChild 屬性，獲取當前節點的第一個子節點
lastChild屬性，獲取當前節點的最後一個子節點
parentNode 屬性，獲取當前節點的父節點
nextSibling屬性，獲取當前節點的下一個節點 (兄弟節點)
previousSibling 屬性，獲取當前節點的上一個節點 (兄弟節點)
className 用於獲取或設定標籤的 class 屬性值
innerHTML 屬性，表示獲取/設定起始標籤和結束標籤中的內容
innerText 屬性，表示獲取/設定起始標籤和結束標籤中的文字
該部分內容請跳轉JavaScript練習——Document物件
6. createElement 方法和appendChild 方法舉例
目的：使用 js 程式碼來建立 html 標籤，並在js程式碼中使其顯示在頁面上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-14</title>
<script type="text/javascript">
var DIYdiv=document.createElement("div"); //此時相當於<div> </div>
DIYdiv.innerHTML="陸億行-2021-01-14"; //此時相當於<div>陸億行-2021-01-14</div>
//注意innerHTML和innerText的區別，前者會保留標籤內容，後者只有文字，這裡二者都行
document.body.appendChild(DIYdiv);
//此時需要在body中新增一個節點即可。
</script>
</head>
<body>
</body>
</html>
但是這樣是錯誤的，因為頁面執行是從下到上依次執行的，當執行到第10行時，還沒有body，此時會出現null：document.null ，因此做一下改進，動態方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-14</title>
<script type="text/javascript">
window.onload =function (){
var DIYdiv=document.createElement("div"); //此時相當於<div> </div>
DIYdiv.innerHTML="陸億行-2021-01-14"; //此時相當於<div>陸億行-2021-01-14</div>
//注意innerHTML和innerText的區別，前者會保留標籤內容，後者只有文字，這裡二者都行
document.body.appendChild(DIYdiv);
//此時需要在body中新增一個節點即可。
}
</script>
</head>
<body>
</body>
</html>
其實，除了createElement之外，還可以建立文字等等……只要是節點都可以建立
e.g. 文字結點：createTextNode()
因此上面第10行的程式碼可以進行代替，以便更好地理解建立標籤，文字，以及建立子節點
<script type="text/javascript">
window.onload =function (){
var DIYdiv=document.createElement("div"); //此時相當於<div> </div>
var text=document.createTextNode("陸億行-2021-01-14");
DIYdiv.appendChild(text); //DIYdiv.innerText=" ";
document.body.appendChild(DIYdiv);
//此時需要在body中新增一個節點即可。
}
</script>