DOM模型
文章目錄
- DOM模型
- Document對象
- Document對象的了解
- HTML标簽要對象化
- 模拟對象化,相當于
- **Document** 對象中的方法介紹
- **getElementById** **方法示例代碼：**
- getElementsByName 方法示例代碼,全選,全不選,反選
- getElementsByTagName方法示例代碼：
- createElement方法示例代碼
DOM全稱是 Document Object Model 文檔對象模型
就是把文檔中的标簽,屬性,文本,轉型成為對象來管理
Document對象
Document對象的了解
- Document它管理了所有的HTML文檔内容
- Document它是一種樹形結構文檔,有層級關系
- 把所有的标簽都對象化
- 可以通過document通路所有的标簽對象
HTML标簽要對象化
<body>
<div id="div01">div01</div>
</body> 模拟對象化,相當于
class Dom{
private String id; // id 屬性
private String tagName; //表示标簽名
private Dom parentNode; //父親
private List<Dom> children; // 孩子結點
private String innerHTML; // 起始标簽和結束标簽中間的内容
} Document 對象中的方法介紹
-
Document.getElementById(elementId)
-
document.getElementsByName(elementName)
-
document.getElementsByTagName(tagname)
-
document.createElement( tagName)
注:
document 對象的三個查詢方法,有id,優先使用getElementById 方法來進行查詢
沒有 id 屬性，則優先使用 getElementsByName 方法來進行查詢
getElementById 方法示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
需求: 當使用者點選校驗按鈕時.要擷取輸出框中的類容,然後驗證其是否合法
驗證的規則是: 必須由字母 數字 下劃線組成 并且長度為5 到 12 位
*/
function onclickFun() {
//1. 當我們操作一個标簽的時候, 一定要先擷取這個标簽對象
let usernameObj = document.getElementById("username");
//[object HTMLInputElement] 為dom對象
var usernameText = usernameObj.value;
// 驗證的規則是: 必須由字母 數字 下劃線組成 并且長度為5 到 12 位
var patt = /^\w{5,12}$/;
let usernameSpanObj = document.getElementById("usernameSpan");
//innerHtml 表示起始标簽和結束标簽中 的内容
// innerHTML 這個屬可讀 可寫
usernameSpanObj.innerHTML = "可愛!";
if (patt.test(usernameText)) {
// alert("使用者名合法！");
// usernameSpanObj.innerHTML = "使用者名合法！";
usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
} else {
// alert("使用者名不合法！");
// usernameSpanObj.innerHTML = "使用者名不合法！";
usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
}
}
</script>
</head>
<body>
<!--value="wzg" 初始内容-->
使用者名:<input type="text" id="username" value="wzg">
<span id="usernameSpan" style="...">
</span>
<button onclick="onclickFun()"> 校驗</button>
</body>
</html> getElementsByName 方法示例代碼,全選,全不選,反選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//全選
function checkAll() {
//讓所有複選框都選中
//document.getElementsByName();是根據 指定的name 屬性 查詢傳回多個标簽對象集合
//集合的作用和數組一樣
//集合中的每個對象都是dom對象
//這個集中的元素順序是他們的HTMl 頁面中由上到下的順序
var elementsByName = document.getElementsByName("hobby");
for (var i = 0; i < elementsByName.length; i++) {
elementsByName[i].checked = true;
}
}
//全不選
function checkNo() {
var elementsByName = document.getElementsByName("hobby");
for (var i = 0; i < elementsByName.length; i++) {
elementsByName[i].checked = false;
}
}
//反選
function checkReverse() {
var elementsByName = document.getElementsByName("hobby");
for (var i = 0; i < elementsByName.length; i++) {
elementsByName[i].checked = !elementsByName[i].checked;
}
}
</script>
</head>
<body>
興趣愛好
<input type="checkbox" name="hobby" value="cpp" checked="checked">c++
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="js">javaScript
<br/>
<button onclick="checkAll()">全選</button>
<button onclick="checkNo()">全不全</button>
<button onclick="checkReverse()">反選</button>
</body>
</html> getElementsByTagName方法示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function(){
// alert( document.getElementById("btn01") );
}
// 全選
function checkAll() {
// alert( document.getElementById("btn01") );
// document.getElementsByTagName("input");
// 是按照指定标簽名來進行查詢并傳回集合
// 這個集合的操作跟數組 一樣
// 集合中都是dom對象
// 集合中元素順序 是他們在html頁面中從上到下的順序。
var elementsByTagName = document.getElementsByTagName("input");
for (var i = 0; i <elementsByTagName.length ; i++) {
elementsByTagName[i].checked=true;
}
}
</script>
</head>
<body>
<!--as -->
興趣愛好：
<input type="checkbox" value="cpp" checked="checked">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="js">JavaScript
<br/>
<button id="btn01" onclick="checkAll()">全選</button>
</body>
</html> createElement方法示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
//現在需要我們使用js代碼來建立html 标簽 并顯示在頁面上
//标簽内容就是<div> 大钊 牛逼</div>
var divObj = document.createElement("div"); // 在記憶體中 <div></div>
var textNodeObj = document.createTextNode("大钊 牛逼"); // 有一個文本節點對象 #大钊 牛逼
divObj.appendChild(textNodeObj); <div>大钊 牛逼</div>
// divObj.innerHTML = "大钊 牛逼"; // <div>大钊 牛逼</div>,
// 添加子元素
document.body.appendChild(divObj)
}
</script>
</head>
<body>
</body>
</html> ![Java String.format方法的簡單使用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)