第61節:Java中的DOM和Javascript技術

Java JavaScript · 發表 2018-12-10 00:42:26

摘要：標題圖 Java中的 DOM 和 Javascript 技術 DOM是一門技術,是文件物件模型.所需的文件只有標記型文件,如我們所學的html文件(文件中的所有標籤都封裝成為物件了) DOM : 為 Document Object Mo...

標題圖

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後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通

簡書部落格：達叔小生

ofollow,noindex">https://www.jianshu.com/u/c785ece603d1

結語

下面我將繼續對其他知識深入講解，有興趣可以繼續關注
小禮物走一走 or 點贊

第61節:Java中的DOM和Javascript技術

window物件

結語

您可能也會喜歡…