java學習--js--dom

時間  2019-12-18
標籤 java 學習 dom 欄目 Java 简体版
原文   原文鏈接

在DOM （文檔對象模型)中，HTML文檔的層次結構被表示爲樹形
javascript

結構，HTML文檔的樹形表示主要包含表示元素或標記的節點和知識文本串的節點構成。html

在Javascript DOM 中，Node經常被翻譯成節點，Node的屬性及方法。java

Node的屬性介紹node

——————————瀏覽器

nodeType：顯示節點的類型cookie

nodeName：顯示節點的名稱網絡

nodeValue：顯示節點的值app

attributes:獲取一個屬性節點ide

firstchild：表示某一個節點的第一個節點spa

lastchild：表示某一個節點的最後一個子節點

childNodes：表示所在節點的全部子節點

parentNode：表示所在節點的父節點

nextSibling：緊挨着當前節點的下一個節點

previousSibling：緊挨着當前節點的上一個節點

Node有各類各樣的節點，

元素節點（Element）

————————————

◆nodeType：ELEMENT_NODE

◆nodeType值：1

◆nodeName：元素標記名

◆nodeValue：null

----------------------------

 <body>

         <div id = "t" ><span></span></div>

       </body>


       <script>

         var d = document.getElementById("t");  

         document.write(d.nodeType);  

         document.write(d.nodeName);  

         document.write(d.nodeValue);  

         //顯示 1 DIV null  

       </script>

——————————————————————————


 Node的方法介紹：

 ==========================


       ◆hasChildNodes()：斷定一個節點是否有子節點


       ◆removeChild()：去除一個節點


       ◆appendChild()：添加一個節點


       ◆replaceChild()：替換一個節點


       ◆insertBefore()：指定節點位置插入一個節點


       ◆cloneNode()：複製一個節點


——————————————————————————————

javascript中document的用法

代碼

document.title   //設置文檔標題等價於HTML的<title>標籤

document.bgColor            //設置頁面背景色  

document.fgColor            //設置前景色(文本顏色)  

document.linkColor          //未點擊過的連接顏色  

document.alinkColor         //激活連接(焦點在此連接上)的顏色  

document.vlinkColor         //已點擊過的連接顏色  

document.URL                //設置URL屬性從而在同一窗口打開另外一網頁  

document.fileCreatedDate    //文件創建日期，只讀屬性  

document.fileModifiedDate   //文件修改日期，只讀屬性  

document.fileSize           //文件大小，只讀屬性  

document.cookie             //設置和讀出cookie  

document.charset            //設置字符集 簡體中文:gb2312

對象方法

代碼

document.write()                   //動態向頁面寫入內容  

document.createElement(Tag)        //建立一個html標籤對象  

document.getElementById(ID)        //得到指定ID值的對象  

document.getElementsByName(Name)   //得到指定Name值的對象

p_w_picpaths集合(頁面中的圖象)

a)經過集合引用



代碼

document.p_w_picpaths              //對應頁面上的<img>標籤  

document.p_w_picpaths.length       //對應頁面上<img>標籤的個數  

document.p_w_picpaths[0]           //第1個<img>標籤              

document.p_w_picpaths[i]           //第i-1個<img>標籤

b)經過nane屬性直接引用



代碼

<img name="oImage">  

document.p_w_picpaths.oImage       //document.p_w_picpaths.name屬性

c)引用圖片的src屬性



代碼

document.p_w_picpaths.oImage.src   //document.p_w_picpaths.name屬性.src

d)建立一個圖象



代碼

var oImage  

oImage = new Image()  

document.p_w_picpaths.oImage.src="/1.jpg"


同時在頁面上創建一個<img>標籤與之對應就能夠顯示


代碼

<html>  

<img name=oImage>  

<script type="text/javascript">  

   var oImage  

   oImage = new Image()  

   document.p_w_picpaths.oImage.src="/1.jpg"  

</script>  

</html>

forms集合(頁面中的表單)

a)經過集合引用



代碼

document.forms                  //對應頁面上的<form>標籤  

document.forms.length           //對應頁面上<form>標籤的個數  

document.forms[0]               //第1個<form>標籤  

document.forms[i]               //第i-1個<form>標籤  

document.forms[i].length        //第i-1個<form>中的控件數  

document.forms[i].elements[j]   //第i-1個<form>中第j-1個控件

b)經過標籤name屬性直接引用



代碼

<form name="Myform"><input name="myctrl"></form>  

document.Myform.myctrl          //document.表單名.控件名

代碼

<html>  

<!--Text控件相關Script-->  

<form name="Myform">  

<input type="text" name="oText">  

<input type="password" name="oPswd">  

<form>  

<script type="text/javascript">  

//獲取文本密碼框的值  

document.write(document.Myform.oText.value)  

document.write(document.Myform.oPswd.value)  

</script>  

</html>

document 文擋對象 - JavaScript腳本語言描述

---------------------------------------------------------------------

注:頁面上元素name屬性和JavaScript引用的名稱必須一致包括大小寫

   不然會提示你一個錯誤信息 "引用的元素爲空或者不是對象"

---------------------------------------------------------------------



---------------------------------------------------------------------

經常使用對象方法

document.write()                   //動態向頁面寫入內容

document.createElement(Tag)        //建立一個html標籤對象

document.getElementById(ID)        //得到指定ID值的對象

document.getElementsByName(Name)   //得到指定Name值的對象

document.body.appendChild(oTag)

---------------------------------------------------------------------


body-主體子對象

document.body                //指定文檔主體的開始和結束等價於<body></body>

document.body.bgColor        //設置或獲取對象後面的背景顏色

document.body.link           //未點擊過的連接顏色

document.body.alink          //激活連接(焦點在此連接上)的顏色

document.body.vlink          //已點擊過的連接顏色

document.body.text           //文本色

document.body.innerText      //設置<body>...</body>之間的文本

document.body.innerHTML      //設置<body>...</body>之間的HTML代碼

document.body.topMargin      //頁面上邊距

document.body.leftMargin     //頁面左邊距

document.body.rightMargin    //頁面右邊距

document.body.bottomMargin   //頁面下邊距

document.body.background     //背景圖片


document.body.appendChild(oTag) //動態生成一個HTML對象


經常使用對象事件

document.body.           //鼠標指針單擊對象是觸發

document.body.       //鼠標指針移到對象時觸發

document.body.        //鼠標指針移出對象時觸發

---------------------------------------------------------------------

location-位置子對象


document.location.hash       // #號後的部分

document.location.host       // 域名+端口號

document.location.hostname   // 域名

document.location.href       // 完整URL

document.location.pathname   // 目錄部分

document.location.port       // 端口號

document.location.protocol   // 網絡協議(http:)

document.location.search     // ?號後的部分


documeny.location.reload()       //刷新網頁

document.location.reload(URL)    //打開新的網頁

document.location.assign(URL)    //打開新的網頁

document.location.replace(URL)   //打開新的網頁

---------------------------------------------------------------------

selection-選區子對象

document.selection

---------------------------------------------------------------------



<html>

<!--Text控件相關Script-->

<form name="Myform">

<input type="text" name="oText">

<input type="password" name="oPswd">

<form>

<script type="text/javascript">

//獲取文本密碼框的值

document.write(document.Myform.oText.value)

document.write(document.Myform.oPswd.value)

</script>

</html>

-----------------------------------------------------------------------

<html>

<!--checkbox,radio控件相關script-->

<form name="Myform">

<input type="checkbox" name="chk" value="1">1    

<input type="checkbox" name="chk" value="2">2    

</form>    

<script type="text/javascript">    

function fun(){    

  //遍歷checkbox控件的值並判斷是否選中    

  var length    

  length=document.forms[0].chk.length    

  for(i=0;i<length;i++){    

  v=document.forms[0].chk[i].value    

  b=document.forms[0].chk[i].checked    

  if(b)    

    alert(v=v+"被選中")    

  else    

    alert(v=v+"未選中")    

  }    

  }    

</script>      

<a href=#                      

</html>

-----------------------------------------------------------------------

<html>

<!--Select控件相關Script-->

<form name="Myform">

<select name="oSelect">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select>

</form>


<script type="text/javascript">

   //遍歷select控件的option項

   var length

   length=document.Myform.oSelect.length

   for(i=0;i<length;i++)

   document.write(document.Myform.oSelect[i].value)

</script>


<script type="text/javascript">

   //遍歷option項而且判斷某個option是否被選中

   for(i=0;i<document.Myform.oSelect.length;i++){

   if(document.Myform.oSelect[i].selected!=true)

   document.write(document.Myform.oSelect[i].value)

   else

   document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>")  

   }

</script>


<script type="text/javascript">

   //根據SelectedIndex打印出選中的option

   //(0到document.Myform.oSelect.length-1)

   i=document.Myform.oSelect.selectedIndex

   document.write(document.Myform.oSelect[i].value)

</script>


<script type="text/javascript">

   //動態增長select控件的option項

   var oOption = document.createElement("OPTION");

   oOption.text="4";

   oOption.value="4";

   document.Myform.oSelect.add(oOption);

</script>

<html>



-----------------------------------------------------------------------

<Div id="oDiv">Text</Div>

document.all.oDiv                               //引用圖層oDiv                

document.all.oDiv.style.display=""              //圖層設置爲可視

document.all.oDiv.style.display="none"          //圖層設置爲隱藏

document.getElementId("oDiv")                   //經過getElementId引用對象

document.getElementId("oDiv").style=""

document.getElementId("oDiv").display="none"

/*document.all表示document中全部對象的集合

只有ie支持此屬性，所以也用來判斷瀏覽器的種類*/


圖層對象的4個屬性

document.getElementById("ID").innerText   //動態輸出文本

document.getElementById("ID").innerHTML   //動態輸出HTML

document.getElementById("ID").outerText   //同innerText

document.getElementById("ID").outerHTML   //同innerHTML


<html>

<script type="text/javascript">

function change(){

document.all.oDiv.style.display="none"

}

</script>

<Div id="oDiv" onclick="change()">Text</Div>

</html>


<html>

<script type="text/javascript">

function changeText(){

document.getElementById("oDiv").innerText="NewText"

}

</script>

<Div id="oDiv" onmouseover="changeText()">Text</Div>

</html>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程