第61節:Java中的DOM和Javascript技術
阿新 • • 發佈：2018-12-17
Java中的
DOM和Javascript技術
DOM是一門技術,是文件物件模型.所需的文件只有標記型文件,如我們所學的html文件(文件中的所有標籤都封裝成為物件了)
DOM: 為Document Object Model, 文件物件模型, 是用來將標記文件以及文件中的標籤等所有內容都封裝成物件.
把標籤文件中所有的標籤封裝成物件, 文件也封裝成物件,DOM技術(標記型文件封裝成物件)
DOM技術存在瀏覽器中,內建了DOM技術解析器,變物件是需要進行解析的,描述進行封裝.在記憶體當中進行解析,為Demo.html文件.
記憶體中把文件進行解析,文件封裝成物件.
這些物件都會在記憶體中產生.在記憶體中進行解析,我們看到這種樹結構,每個部分我們都稱為節點,進行解析就物件.DOM的技術,使得文件和內容都變成了物件,才有了操作的這些物件的屬性和行為.
DHTML:
動態的html,實現了與使用者的動態互動,多項技術綜合的簡稱.(HTML,CSS,JAVASCRIPT,DOM + xmlHTTPRequest為AJAX)
HTML:提供標籤,用於封裝資料.
css:提供樣式.
JavaScript:提供邏輯型較強的程式設計,可以用來對物件進行操作和控制,是負責頁面的動態效果和行為.
DOM:提供解析,將標記文件以及文件中的內容都封裝成為物件,這樣就可以操作物件中的屬性和行為.
BOM模型
Browser Object Model 瀏覽器物件模型,瀏覽器本身就是一個物件.將瀏覽器以及瀏覽器中的內容封裝成物件.
window: 本身代表瀏覽器窗體物件.
window物件
<input type="button" value="按鈕" onclick="alert('hello')"/> <input type="button" value="按鈕" onclick="locationDemo()"/> <script type="text/javascript"> function locationDemo(){ alert('hello'); } </script>
window物件:
| 物件 | 描述 |
|---|---|
location |
包含關於當前URL的資訊 |
navigator |
包含關於web瀏覽器的資訊 |
screen |
包含關於客戶螢幕和渲染能力的資訊 |
event |
代表事件狀態,如事件發生的元素,鍵盤狀態,滑鼠位置和滑鼠按鈕狀態 |
document |
代表給定瀏覽器視窗中的html文件 |
location物件: 包含關於當前URL的資訊.
| 屬性 | 描述 |
|---|---|
| host | 設定或獲取location或url的hostname和port號碼 |
| hostname | 設定或獲取location或url的hostname和port號碼 |
| href | 設定或獲取整個url為字串 |
| pathname | 設定或獲取物件指定的檔名或路徑 |
| 方法 | 描述 |
|---|---|
| assign | 裝入新的Html文件 |
| reload | 重新裝入當前頁面 |
| replace | 裝入指定url的另外文件來替換當前文件 |
<script type="text/javascript">
function locationDemo(){
alert(location.href);
}
</script>
getElementById 根據’id’ 標籤屬性指定值的第一個物件的引用
getElementsByName 根據name標籤屬性的值獲取物件的集合
getElementsByTagName 根據獲取指定元素名稱的物件集合.
<body>
<script text="text/javascript">
function document(){
var divNode = document.getElementById("divid");
alert(divNode.nodeName);
alert(divNode.innerHTML);
divNode.innerHTML = "達叔".fontcolor("red");
}
</script>
<input type="button" value="document物件" onclick="documentDemo()"/>
<div>區域</div>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<span></span>
<input type="text" name="user"/>
<a href="https://www.jianshu.com/u/c785ece603d1">達叔小生</a>
</body>
getElementsByName
<input type="text" name="user"/>
<script text="text/javascript">
function documentDemo(){
var nodes = documents.getElementsByName("user");
alert(nodes[0].value);
}
</script>
getElementsByTagName
id屬性,name屬性,表單標籤中經常具有name屬性.
function documentDemo(){
var divNodes = document.getElementsByTagName("div");
// 遍歷節點
for(var x=0; x<divNodes.length; x++){
alert(divNodes[x].innerHTML);
}
var tableNode = document.getElementById("tableid");
var divNodes2 = tableNode.getElementsByTagName("div");
for(var y=0; y<divNodes2.length; y++){
alert(divNodes2[y].innerHTML);
}
}
層次關係獲取節點
- 父節點唯一性
- 子節點不唯一性,是陣列
function getNodeByDemo(){
var tableNode = document.getElementById("tableid");
var node = tableNode.parentNode;
alert(node.nodeName);
var nodes = tableNode.childNodes;
alert(nodes.length);
alert(nodes[0].nodeName);
// 節點的子節點
var nodes = tableNode.childNodes[0].childNodes;
for(var z=0; z<nodes.length; z++){
alert(nodes[z].nodeName);
}
// 獲取兄弟節點
var node=tableNode.nextSibling;
alert(node.nodeName);
var node2 = tableNode.perviousSibling;
alert(node2.nodeName);
}
案例
javascript:void(0)是用來取消預設效果的, 超連結本身帶有預設的事件,現在該超連結不需要預設的事件處理.就需要進行消除.
處理方式,需要進行明確的處理節點,獲取該節點的物件,並呼叫其屬性和行為.
<div id="newsdiv">
<h1>標題</h1>
<a href="javascript:void(0) onclick="changeFont(24px)" ">大字型</a>
<a href="javascript:void(0) onclick="changeFont(16px)" ">中字型</a>
<a href="javascript:void(0) onclick="changeFont(10px)" ">小字型</a>
<hr>
<div id="newstext">
達叔小生
</div>
</div>
// div文字的大小
<div id="newsdiv">
<h1>標題</h1>
<a href="javascript:void(0) onclick="changeFont(24px)" ">大字型</a>
<a href="javascript:void(0) onclick="changeFont(16px)" ">中字型</a>
<a href="javascript:void(0) onclick="changeFont(10px)" ">小字型</a>
<hr>
<div id="newstext" style="font-size: 26px">
達叔小生
</div>
<script text="text/javascript">
function changeFont(size){
var divNode=document.getElementById("newstext");
// divNode.style.font-size
divNode.style.font-size = size;
}
</script>
樣式封裝
.maxfont{
font-size: 24px;
color:#66CCFF;
background-color: #FFCCFF;
}
.normfont{
font-size: 16px;
color:#686868;
background-color: #FFFFFF;
}
.minfont{
font-size: 12px;
color:#FF3300;
background-color: #99FF99;
<script type="text/javascript">
function changeFont(classValue){
var divNode = document.getElementById("newstext");
divNode.className = classValue;
}
</script>
<div id="newstext" class="normfont" >
</div>
表單校驗
- 明確事件源和事件
- 提示資訊展示方式
<form id="formid" onsubmit="return checkForm()">
使用者名稱稱：<input type="text" name="user" onblur="checkUser()" />
<span id="userspan"></span><br />
</form>
<hr>
<input type="button" value="自定義提交" onclick="myCheckForm()" />
// 校驗方法
function checkUser() {
var flag = false;
var userNode = document.getElementsByName("user")[0];
var username = userNode.value;
var spanNode = document.getElementById("userspan");
// 對使用者名稱進行正則表示式的判斷
var regex = new RegExp("^[a-zA-Z]{4}$");
if (regex.test(username)) {
spanNode.innerHTML = "使用者名稱正確".fontcolor("green");
flag = true;
} else {
spanNode.innerHTML = "使用者名稱錯誤".fontcolor("red");
}
return flag;
}
//校驗表單。
function checkForm() {
if (checkUser()) {
return true;
}
return false;
}
表單校驗
function myCheckForm() {
//獲取表單物件。
var formNode = document.getElementById("formid");
if (checkUser()) {
//呼叫提交方法
formNode.submit();
}
}
<form id="formid" onsubmit="return checkForm()">
使用者名稱稱：<input type="text" name="user" onblur="checkUser()" />
<span id="userspan"></span><br />
</form>
<hr>
<input type="button" value="自定義提交" onclick="myCheckForm()" />
效果案例:
<body>
<!--
因為標籤都在文件中，所以想要獲取標籤需要先有document物件
getElementById 獲取對 ID 標籤屬性為指定值的第一個物件的引用
getElementsByName 根據 NAME 標籤屬性的值獲取物件的集合
getElementsByTagName 獲取基於指定元素名稱的物件集合
-->
<script type="text/javascript">
function documentDemo(){
var divNode = document.getElementById("divid");
//alert(divNode.nodeName);//獲取節點的名稱。
//alert(divNode.innerHTML);//獲取div中的文字
divNode.innerHTML = "新文字".fontcolor("red");
}
function documentDemo2(){
//getElementsByName
//var nodes = document.getElementsByName("user");
//alert(nodes[0].value);
var node = document.getElementsByName("user")[0];
node.value = "hehe";
}
function documentDemo3(){
//getElementsByTagName
//獲取文件中所有的div
var divNodes = document.getElementsByTagName("div");
//遍歷div節點
for(var x=0; x<divNodes.length; x++){
//alert(divNodes[x].innerHTML);
}
//需求：獲取表格中所有的div。
var tableNode = document.getElementById("tableid");
var divNodes2 = tableNode.getElementsByTagName("div");
for(var y=0; y<divNodes2.length; y++){
alert(divNodes2[y].innerHTML);
}
}
//按照節點層次關係獲取節點。
function getNodeByLevel(){
//獲取表格節點
var tableNode = document.getElementById("tableid");
//1,獲取表格節點父節點
//var node = tableNode.parentNode;
//alert(node.nodeName);
//2,獲取表格節點的子節點。
/*
var nodes = tableNode.childNodes[0].childNodes;
for(var z=0; z<nodes.length; z++){
alert(nodes[z].nodeName);
}
*/
//3,獲取兄弟節點。有可能會獲取到空文字節點。
var node = tableNode.nextSibling;
//alert("nextSibling:"+node.nodeName);
var node2 = tableNode.previousSibling;
//alert("previousSibling:"+node2.nodeName);
}
</script>
<input type="button" value="演示Document物件" onclick="getNodeByLevel()" />
<div id="divid">DIV</div>
<table id="tableid">
<tr>
<td>一</td>
<td>二</td>
</tr>
<tr>
<td><div>三</div></td>
<td><div>四</div></td>
</tr>
</table>
</body>
下拉選單
選擇國家：
<select name="country" >
<option value="none">--選擇國家--</option>
<option value="cn">中國</option>
<option value="usa">美國</option>
<option value="en">英國</option>
</select>
<span id="countryspan" ></span><br/>
//校驗國家
function checkCountry(){
var flag = true;
//獲取下拉選單物件
var selNode = document.getElementsByName("country")[0];
//獲取所有的option物件的集合
var optNodes = selNode.options;
var spanNode = document.getElementById("countryspan");
var val = optNodes[selNode.selectedIndex].value;
if(val=="none"){
spanNode.innerHTML = "必須選擇一個國家".fontcolor("red");
flag = false;
}
return flag;
}
選擇國家：
<select name="country" >
<option value="none">--選擇國家--</option>
<option value="cn">中國</option>
<option value="usa">美國</option>
<option value="en">英國</option>
</select>
<span id="countryspan" ></span><br/>
js基於物件的,可以面試物件的方式進行開發
面向物件,需要對物件進行描述,js 可以實現描述,通過函式來完成.
// 描述物件
var a = new Person();
// 給定義的物件新增屬性和行為
for(x in arr){
alert("x="+x);
}
達叔小生：往後餘生，唯獨有你
You and me, we are family !
90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通
簡書部落格： 達叔小生
https://www.jianshu.com/u/c785ece603d1
結語
- 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
- 小禮物走一走 or 點贊