java（十八）DOM

DOM

DOM：document Object Model(文檔對象模型)

用來将标記型文檔封裝成對象，并将标記型文檔中的所有内容(标簽，文本，屬性等)都封裝成對象。

封裝成對象的目的是為了更為友善的操作這些文檔以及文檔中的内容。

因為對象的出現就可以有屬性和行為被調用。

文檔對象模型：

文檔：标記型文檔。

對象：封裝了屬性和行為的執行個體，可以直接被調用。

模型：所有标記型文檔都具備一些共性特征的一個展現。

标記型文檔所包含的内容無非是标簽，屬性和标簽中封裝的資料。

隻要是标記型文檔，DOM這種技術都可以對其進行操作。

常見的标記型文檔：html xml

DOM這種技術是如何對标記型文檔進行操作的呢？

要操作标記型文檔必須先對其進行解析。

DOM解析按照标簽的層次關系展現出标簽的所屬，形成一個樹狀結構，稱為DOM樹，而樹中的标簽，文本

以及屬性稱之為節點，這個節點也稱為對象。标簽通常也稱為頁面中的元素。

DOM技術的解析方式：将标記型文檔解析成一棵DOM樹，并将樹中的内容都封裝成節點對象。

注意：這種DOM解析方式的好處是可以對樹中的節點進行任意操作，比如：增删改查。

但弊端是這種解析需要将整個标記型文檔加載進記憶體，意味着如果文檔體積很大，就會較為浪費記憶體空間。

另一種解析方式:SAX。這是一種民間常用的解析方式，并不是w3c标準，了解一下就行，而DOM是w3c标準。

SAX解析方式：基于事件驅動的解析。擷取資料的速度很快，但是不能對标記進行增删改，隻能查。

DOM模型有三種：

DOM level 1：将html文檔封裝成了對象。

DOM level 2：在level1的基礎上添加了一些新功能。比如解析名稱空間。

DOM level 3：将xml文檔封裝成了對象。

DHTML:動态的HTML。它不是一門語言，是多項技術綜合體的簡稱。

其中包含了HTML,CSS,DOM,JavaScript。

這四個技術在動态的html頁面效果定義時，都處于什麼樣角色呢？負責什麼樣的職責呢？

HTML:負責提供标簽，對資料進行封裝，目的是便于對該标簽中的資料進行操作。

簡單說，用标簽封裝資料。

CSS:負責提供樣式屬性，對标簽中的資料進行樣式的定義。

簡單說，對資料進行樣式定義

DOM:負責将标簽型文檔以及文檔中的所有内容進行解析并封裝成對象，在對象中定義了更多的屬性和行為，便于對對象操作。

簡單說，将文檔和标簽以及其他内容變成對象。

JavaScript:負責提供程式設計語言，對頁面中的對象進行邏輯操作。

簡單說，負責頁面的行為定義，就是頁面的動态效果

是以說，JavaScript是動态效果的主力程式設計語言。

BOM模型：

BOM：browser object model（浏覽器對象模型）

這個模型友善于操作浏覽器。浏覽器對應的對象就是window對象，這個可以通過查閱dhtml api知道。

<html>

<head>

</head>

<body>

<!--

window對象的示範：

為了示範友善，定義一個事件源，通過對事件源的觸發，擷取想要的結果。

比如讓使用者通過按鈕就可以知道浏覽器的一些資訊。

-->

<!--

定義按鈕onclick事件的處理方式

function windowObjectDemo(){

//想要知道這個浏覽器的資訊，就要用到window中的navigator對象。

var name=window.navigator.appName;

var version=navigator.appVersion; //因為window對象一打開浏覽器就存在了，是以可以不用寫，像這樣也行。

document.write("<font color='green' size='6'>"+name+"<br/>");

document.write(version+"<br/>");

}

</script>

</body>

</html>

除了navigator對象外，window還有一個比較常用的對象history，可以完成曆史紀錄的相關操作，比如前進，後退，去指定網頁等，比較簡單。

示範另一個比較重要的對象——location對象。

示範location對象。

var prop=window.location.protocol; //設定或擷取url的協定部分

var text=location.href; //設定或擷取整個url字元串

document.write("<font color='yellow' size='6'>"+prop+"<br/>");

document.write(text+"<br/>");

location.href="http://www.hupu.com.cn";

//給location的href屬性設定了一個值，改變了位址欄的值，并對其進行解析，如果是http，還會進行連接配接通路。

接下來示範一些window中的常見方法。

示範window中常見的方法。

function windowMethodDemo(){

var b=confirm("你真的确定要點選嗎？"); //confirm方法，帶回運作時底下會自動出現确定和取消選項。

alert("b="+b);

setTimeout("alert('timeout run'),4000"); //經過指定毫秒值後計算一個表達式。比如這個就是4秒後彈一個對話框。

setInterval("alert('timeout run0.0'),3000"); //每經過指定毫秒值後計算一個表達式。重複執行。可以用clearInterval方法終止他的運作。

function stop(){

clearInterval(timeid);

function windowMove(){

moveBy(20,20);

//moveTo(40,40);

function windowOpen(){

open("","_blank","height=400,width=200,status=yes,toolbar=yes,location=yes");

接下來示範一些window中常見的事件

window.onunload=function(){ //onunload事件，在對象解除安裝前立即觸發。

alert("onunload run");

onload=function(){ //onload事件，在浏覽器完成對象的裝載後立即觸發。

alert("onload run");

onbeforeunload=function(){ //onbeforeunload事件，在頁面将要被解除安裝前觸發。

alert("onbeforeunload run");

關于document對象：

<!--

*document對象的示範

*該對象将标記型文檔進行了封裝。它的作用是可以對标記型文檔進行操作。

*最常見的操作就是實作動态效果，這就要對節點操作，就要先擷取到節點。

*要擷取節點，必須要先擷取到節點所屬文檔對象document。

*是以document對象最常見的操作就是擷取頁面中的節點。

*擷取節點的方法展現：

*1.getElementById():通過标簽的id屬性值擷取該标簽節點。

*2.getElementsByName():通過标簽的name屬性擷取節點，因為name有相同，是以這裡element加s了，傳回的是一個數組。

*3.getElementsByTagName():通過标簽名擷取節點。因為标簽會發生重複，是以傳回的也是一個數組。

-->

function getNodeDemo(){

//需求：擷取頁面中的div節點。

//要通過document對象完成，因為div節點有id屬性，是以通過id屬性來完成。

var divNode=document.getElementById("divid");

document.write("<font color='red' size='5'>"+divNode.nodeName+"-"+divNode.nodeType+"-"+divNode.nodeValue+"<br/>");

*節點都有三個必備的屬性：節點名稱，節點類型，節點值

*常見節點有三種：

*1.标簽型節點類型1

*2.屬性節點類型2

*3.文本節點類型3

* 标簽型節點是沒有值的，屬性節點和文本節點是可以有值的。

//擷取div節點中的文本

var text=divNode.innerHTML;

document.write("<font color='red' size='5'>"+text+"<br/>");

//修改div中的文本

divNode.innerHTML="哈哈，文本被我修改了！";

document.write("<font color='red' size='5'>"+divNode.innerHTML+"<br/>");

}

function getNodeDemo2(){

//擷取文本框節點示範getElementsByName方法

var node=document.getElementsByName("user");

alert(node[0].name+"--"+node[0].value);

function getNodeDemo3(){

//擷取超連結節點對象，示範getElementsByTagName方法。

//直接用标簽名擷取

var nodes=document.getElementsByTagName("a");

for(var x=0;x<nodes.length;x++){

nodes[x].target="_blank"; //這句話就是讓超連結的網址在一個新的網頁中打開。

function getNodeDemo4(){

*對于頁面中的超連結，如果要求新聞連結在新視窗打開，而門戶網站在目前頁面打開，該怎麼辦呢？

*當然是要擷取其中被操作的超連結對象啊。

*可是通過document擷取超連結，拿到的是頁面中所有超連結節點。

*隻想擷取其中一部分怎麼辦呢？

*隻要擷取到被操作超連結所屬節點即可。

*再通過這個節點擷取到它裡面所有超連結節點。

var divNode=document.getElementById("news link");

var aNodes=divNode.getElementsByTagName("a");

for(var x=0;x<aNodes.length;x++){

aNodes[x].target="_blank";

<div id="divid">這是一個div區域</div>

擷取節點還有另外一種常用的方式：通過節點的層次關系擷取節點對象。

關系：1.父節點：parentNode，對應一個節點對象

2.子節點：childNodes，對應一個節點集合

3.兄弟節點：

上一個兄弟節點：previousSibling

下一個兄弟節點：nextSibling

function getNodeByLevel(){

//擷取頁面中的表格節點

var tabNode=document.getElementById("table");

//擷取父節點。

var node=tabNode.parentNode;

//擷取子節點

var nodes=tabNode.childNodes;

alert(nodes[0].childNodes[0].nodeName);

//擷取兄弟節點

var node2=tabNode.previousSibling;

alert(node2.nodeName);

//盡量少用兄弟節點，因為在解析的時候或出現浏覽器不同，解析結果不一緻的問題。

//會解析出标簽間的空白文本節點。

}

擷取到節點之後就是對節點的操作了，操作無非就是增删改查，查已經完成了，就是擷取。

div{

border:#00ccff 1px solid;

width:500px;

padding:80px;

margin:20px;

#div_1{

background-color:#00ccff;

#div_2{

background-color:#FFccff;

#div_3{

background-color:#cc00ff;

#div_4{

background-color:#00FF00;

</style>

function creAndAdd(){

//需求：在div_1節點中添加一個文本節點

//思路：1.建立一個文本節點，使用document中的createTextNode方法

// 2.擷取div_1節點

// 3.将文本節點添加到div_1節點中。

var oTextNode=document.createTextNode("這是一個新的文本節點");

var oDivNode=document.getElementById("div_1");

oDivNode.appendChild(oTextNode);

function creAndAdd2(){

//需求：在div_1中建立并添加一個按鈕節點。

var oNode=document.createElement("input");

oNode.type="button";

oNode.value="一個新按鈕";

oDivNode.appendChild(oNode);

function creAndAdd3(){

//需求：通過另一種方式完成添加節點

//其實是使用了容器型标簽的一個屬性——innerHTML。這個屬性可以設定html文本。

oDivNode.innerHTML="<input type='button' value='有個按鈕'/>";

function delNode(){

//需求：将div_2節點删除

//1.擷取div_2節點

//2.使用div節點的removeNode方法删除

// 但是這個方法用的比較少，一般使用removeChild方法，删除子節點，

// 是以就得先擷取div_2的父節點，然後用父節點的removeChild方法将div_2删除。

var oDivNode=document.getElementById("div_2");

// oDivNode.removeNode(true); //傳個false，div區域的字還會留下來，傳個true就會把子節點全部删除。

oDivNode.parentNode.removeChild(oDivNode);

function updateNode(){

//需求：用div_3節點替換div_1節點。

//1.擷取div_3和div_1節點

//2.使用replaceNode方法進行替換。

//但是不建議使用這個方法，建議使用replaceChild方法。

var oDivNode_1=document.getElementById("div_1");

var oDivNode_3=document.getElementById("div_3");

// oDivNode_1.replaceNode("var oDivNode_3");

oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);

function cloneNode(){

//需求：希望用div_3替換div_1，但是要求保留div_3.

var oCopyDiv_3=oDivNode_3.cloneNode(true); //true表示還要複制該節點的子節點，這裡就是還要指派div區域的文字。

//否則指派過去的隻有div_3這個區域，沒有裡面的文字。

oDivNode_1.parentNode.replaceChild(oCopyDiv_3,oDivNode_1);

<hr/>

</div>

好好學習。day day up!

</div>

div區域示範文字

節點的增删改查

java（十八）DOM

繼續閱讀

關于Gradle配置的小結

Java小案例——随機數猜測随機數猜測

nginx location中斜線的位置的重要性

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的簡單使用

neo4j之cypher使用文檔

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method